Associated items

By using the Associated Items widget, you can display items of one app on the page of another app.

For example, when creating an order, an employee selects a client company. You can display a table with all of that company’s orders directly on the company’s page. Employees can then view the order details and open any order as needed.

Please note that this widget is intended for viewing a list of associated items only. If you need employees to be able to create orders directly from the company page, use a field of the App type instead. When you create fields in both the Companies and Orders apps that reference each other, you can automatically sync related items using the Field for linking setting.

Configure the widget

You can add the Associated Items widget to any app page. Let’s walk through how to display items from the Orders app on a company page using this widget 

Step 1. Add a link to the Companies app to the Orders app

1. Open the Orders app form settings.
2. Add a field of the App type and select Companies in its settings.
3. Enable the search and sort by field option so the field can be used when configuring the Associated Items widget.
   
4. Save the settings.

Step 2. Add the "Associated Items" widget to the company page

1. Navigate to the Companies app form settings.
2. In advanced mode, open the View tab and launch the app form in the interface designer.
3. If you want to place the order table separately from the company information, add a new Orders tab by clicking the + icon next to the existing tabs.
4. Add the Associated Items widget to the form by clicking + Widget or dragging it from the sidebar.

5. In the window that opens, configure the widget settings:

• Associated app. Select the app whose items will be displayed on the configured form. In our example, this is Orders.    
• Linked field. Select an App type field from the specified app. For example, the Company field added to the Orders app created at step 1.
• Displayed fields. Specify which fields of the app will be displayed on the configured form. To add a field, click the + icon.
• Filter fields. Select the properties of the app that will be used to filter items. Users will be able to select values of these fields above the list of linked items. To add a property, click the + icon.
• Show Refresh Button. Enable this option to display a button for refreshing data above the list of associated items.

6. Save the widget settings.
7. To complete the form configuration, click Save and Publish on the top panel of the interface designer.

Widget in the interface

After all the settings in our example, an additional Orders tab will appear on the company pages. This tab will display all items of the Orders app that have a particular company specified on their pages.

Also, if bulk actions are enabled for the Orders app, you will be able to edit and delete the associated orders items, as well as change their statuses directly on a company page.

You can change the width of any column in the table. To do this, place the cursor over its header and drag the appeared column border to the desired width. The customized width will be saved for all items and forms of the app.

Please note, that if you delete an order associated to a certain company, it will also be deleted from the company page.

Was this helpful?

Thanks for your feedback!

Please specify why:

Recommendations did not help meArticle is hard to understandDidn`t answer my questionContent does not match the topicOther

How we can improve it?

YesNo

Please specify whyRecommendations did not help meArticle is hard to understandDidn`t answer my questionContent does not match the topicOther

Found a typo? Select it and press Ctrl+Enter to send us feedback