Display name instead of ID for relation

Learn how to display values from related tables instead of foreign key values

Let's check the case when you need to display a value in the table instead of a foreign key field from a related table.

Modifying the values from the related table

Prerequisites

Say we have Customers and Orders tables, and both of them have a Customer Number field. For ease of use, we would like to display Customer Name values in the Orders table instead of their Customer Number, which is a foreign key there.

1. Start with loading data for Orders: Action - Load Table or HTTP request (based on your data source).

2. Add a table to populate your Orders data.

Loading Orders data and displaying in the Table

3. Add another action to load Customers data from the Customers table.

Adding a relation between the Tables

Now, in order to display a Customer Name value instead of a Customer Number, which relates to both of the tables, follow the below steps: 1. In the Orders table, click anywhere on it to open the Settings.

2. Find the Customer Number column in the Columns list, and click on it to open the Main settings for the Column.

3. By default, the type of Customer Number field is Number. It needs to be changed to Select/Tag. For that, click on the Customer Number field in the right menu to open the field's General Settings.

4. Navigate the Type field and update it to Select/Tag.

Switching field type

5. After that, scroll down to the Options field and switch to JS mode.

Switching to JS mode

6. Populate the code that should do the mapping of the First Name from the Contacts table to the corresponding Customer Number in the Orders table:

return {{ actions.loadCustomers.data }}
  .map(customer => {
    return { 
      value: customer.customerNumber,
      title: customer.contactFirstName
    }
  });

This code maps the values of certain fields from one table to the corresponding titles from another table.

Check your table - you will now see customer names instead of customer numbers: