# Associated items

> [HTML Version](associated-items.html)

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](app-data-type.md) 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](field-for-linking.md) 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](360028941112.md#searchandsortbyfield) option so the field can be used when configuring the **Associated Items** widget.  
**(associated_items_01.png)**

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](360028941032.md), open the **View** tab and launch the app form in the [interface designer](interface_designer.md).

3. If you want to place the order table separately from the company information, add a new **Orders** [tab](tabs.md) 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.

**(AI4.PNG)**



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

**(associated_items_02.png)**

- **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](360009707032.md#app) type field from the specified app. For example, the **Company** field added to the **Orders** app created at [step 1](#step-one). 

- **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](mass_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.

**(associated-items-6.png)**

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.