Low-code designer > Set up interfaces > Widget types > Data widgets / Associated items

Associated items

By using the Associated items widget, you can link apps from different workspaces in such a manner that the items of one app are displayed on the page of another app. For example, all the orders made by a customer can be listed on the customer's page, with a link to each order. 

Configure the widget

The Associated items widget can be set in any app. Let's say you have a custom Projects app that you want to link to the Companies app so that a customer's page displays all the projects that you have done for them. You can set this up in several steps. 

Step 1. Add the Company field to the custom Projects app

Go to the Advanced mode in the Form settings of the Projects app. Add a new app type field. Select the Companies app.

AI1

Make sure that you check the Search and Sort box next to this field. Otherwise, you will not be able to link the apps.

AI2

Step 2.  Add a new tab to the company page

Open the View form of the Companies app for editing. Note that the Advanced mode is now the default editing mode for this app.

Add a new tab by dragging it from the side panel or by clicking on the + sign next to an existing tab. Let's name the tab Projects.

tabs_crt_page

The Events and System tabs are for system settings that are the same for all the widgets. They allow you to configure a widget’s visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc. Find out more in System widget settings.

Step 3. Add and configure the widget

Drag the Associated items widget to the new tab.

AI4

The widget settings window opens.

associated-items-5

Specify the settings:

  • Associated app. Select the app whose items will be displayed on the configured form. For example, specify the Projects app to display all the projects associated with the company on its page.    
  • Associated field. Select the App type field from the associated app. For example, specify the Company field added to the Projects app at step 1.
  • Displayed fields. Click the + icon to add the fields of the associated app that will be displayed on the configured form.
  • Show button for refreshing items. Enable this option to display a button above the list of app items that will be used to refresh the data.

Save the settings. To finish the configuration, click Save and Publish on the top panel of the Interface designer.

Widget in the interface

Now, the company page has the Projects tab. All the projects associated with a particular company will be shown on its page.

Also, if Bulk actions are enabled for the Projects app, you will be able to edit, delete the associated project items, or change their statuses right on the company's page.

associated-items-6

In the editing mode, you can delete the tabs you don’t want and move them around. Also, instead of using a separate tab, you can place the widget right on the view form, if that suits you better.

If you delete a project linked to a certain customer, it will also be deleted from the company page.

Found a typo? Highlight the text, press ctrl + enter and notify us