Row context referencing

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

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

You can notice how the values in the URL column have immediately changed into the username 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:

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.

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 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:

Create a table with default data and keep id, first_name, last_name columns;
Create a new column with initials prop and string type;
Find the Value field in the Edit settings group and fill it with {{draftRow.first_name?.[0] || ''}}{{draftRow.last_name?.[0] || ''}};
Set the Enable edit button field to true in the table settings;
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 2: Change select options depending on another column's value.

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' },
];

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'],
};

Create a table component and set the getTableData action to the Data field;
Select the month column and change the type to Select;
Find the Options field in the General settings group, enable js-mode, and fill it with next code:

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

Set the Enable edit button field to true in the table settings;
Select the table, enable edit mode, and try to change the season value and check available options for the month column.