Row context referencing

Learn how to add references between the variables in Tables

The row context option allows you to add references to a certain Table or Form variable for different view types. Let’s check some of the popular cases where this feature could be of use

Refer to a Username instead of a link

Say you have the data about your employees with the URLs to their Linkedin profiles, but you do not want to see the plain links in the Table, but have a username instead.

Let’s see how this can be achieved.

• Start with loading the data and displaying it in a Table

• Click anywhere on the Table to open the right menu with the Columns list

• Find the Link column in the list and click on it to open its Settings

• Make sure the column type is set to Link

Checking Field type

• Then, navigate the View Settings tab and in the Text field, insert the code {{row. Username}} - referencing the column which values you would like to see in the Column. As you type, the autocomplete will suggest all the available variables

Adding code to the Text field

You can notice how the values in the URL column have immediately changed into the username values.

Setting up dynamic dropdown values

Let's go through another example. In the Table, you would like to select a Country in the dropdown and then have the opportunity to select the city based on the Country's dropdown selection. This is how this can be done. (Please note we suppose that you have already loaded your data and added a Table prior to this step).

First, create a state variable:

Creating a state variable

• click on the plus button and rename a variable into Country

• select the Object type for the variable

• set its' initial value and click Save. For the Countries example, it would be as below:

{
  USA: [
    {
      value: 'NY'
    },
    {
      value: 'LA'
    }
  ],
  Germany: [
    {
      value: 'Berlin'
    },
    {
      value: 'Frankfurt'
    }
  ]
}

Now, click anywhere on the Table to open the right Columns menu. First, let's add a Country column:

• Press the + sign

• Enter the Field - Country

• Type: Select/Tag

• Options: specify the countries from the state variable

• Check the option ✅ Always display as editable

Now, we can add another column for a City. Add a new column and set a field and a type for it (should be Select/ Tag as well). Switch the Options field to JS and specify the following code:

{{ state.Country[row.country] ?? []}}

Check the option ✅ Always display as editable.

In the Table, you can now notice, that the values in the City dropdown change as you change the Country values.

Change an input value while editing

Sometimes you may face the need to predefine input's value, or change it depending on some other input. For this purpose, you can use Value field in the Edit settings group.

Value field in Edit settings

It works similarly to the default Value field in the Input component. However, here you can use some table context variables:

• {{draftRow}}- contains the current edited/created row data with all draft changes

• {{row}} - contains the original row data;

Here is an example of using the Value field with the {{draftRow}} variable:

Case 1: Fill the "initials" input with the first letters of the first and last name inputs:

1. Create a table with default data and keep id, first_name, last_name columns;

2. Create a new column with initials prop and string type;

3. Find the Value field in the Edit settings group and fill it with {{draftRow.first_name?.[0] || ''}}{{draftRow.last_name?.[0] || ''}};

4. Set the Enable edit button field to true in the table settings;

5. Select the table, enable edit mode, and try to edit the first and last name - the value of the initials input will be updated automatically depending on the values of the first and last names:

Case 1 example

Case 2: Change select options depending on another column's value.

1. Create a getTableData action with the Code step and the following data to it:

return [
  { id: 1, season: 'Winter', month: 'December' },
  { id: 2, season: 'Spring', month: 'March' },
];

2. Create a getAvailableOptions action with the Code step and set the following to it:

return {
  Winter: ['December', 'January', 'February'],
  Spring: ['March', 'April', 'May'],
  Summer: ['June', 'July', 'August'],
  Autumn: ['September', 'October', 'November'],
};

3. Create a table component and set the getTableData action to the Data field;

4. Select the month column and change the type to Select;

5. Find the Options field in the General settings group, enable js-mode, and fill it with next code:

{{actions.getAvailableOptions.data?.[draftRow.season] ?? []}}

6. Set the Enable edit button field to true in the table settings;

7. Select the table, enable edit mode, and try to change the season value and check available options for the month column.

Case 2 example