Row context referencing

With the row context option, you can add references to a specific table or form variable for different view types. Below are several of the most popular cases when this feature may come in handy.

Referring to a User name instead of a Link

Let's say you have a table with employee data with links to their social profiles. You don't want to display a plain link, but you want it to contain the name of your employee instead. Here's the flow:

1. Select your table and click on the Profile column (which contains the link) to open its settings.

2. Check that the column type is set to Link.

3. Next, scroll down to the View settings section, expand it, and specify {{row.name}} in the Text field.

Done! Now, you'll see the url value change to that of the user name.

Setting up dynamic dropdown values

Another example of row context referencing is displaying dynamic dropdown values based on the value selected in the main dropdown. For example, in the first dropdown you need to select a country and in the second one a city based on the country selected.

Here's how you can achieve that:

1. First, open the Actions tab, click + in the App/Page section (depends on the scope), and select State variable.

1. Give the variable a name (in our example, country), select the Object type, and set its initial value as:

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

1. Now, select your table and start adding the columns you need in the right side panel:

   1. For the Country column:

      1. Set the Select/Tag field type.

      2. In the Options field, switch to the JS mode, and specify the following code to display the countries from the state variable:

         Copy

         Object.keys({{state.country}})

      3. Select the Inline editable checkbox and set the Always mode.

   2. For the City column:

      1. Set the Select/Tag field type.

      2. In the Options field, switch to the JS mode, and specify the following code to display the cities:

         Copy

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

      3. Select the Inline editable checkbox and set the Always mode.

Done! When you select a specific country in the first dropdown, the corresponding cities will be displayed in the second dropdown.

Changing input value while editing

Sometimes you may need to predefine the input's value or change it depending on another input's value. In such cases, you can use the Value field in the table column's Edit settings section. This field works similarly to the default Value field of the Text input component. However, in the table you can use context variables, such as:

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

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

Below are two examples of using the Value field with the {{draftRow}} variable👇

Use case: Display first letters of the First & Last name inputs in the Initials input

1. Select your table, add a new Initials column, and set its type as String.

2. Scroll down to the Edit settings section and specify the following in the Value field:

{{draftRow.first_name?.[0] || ''}}{{draftRow.last_name?.[0] || ''}}.

1. Next, select the Enable edit button checkbox in the table's Actions settings section.

That's it! Now, when you click the Edit button next to any table row, you'll see the value of the Initials column populated automatically based on the values of the First & Last names columns.

Use case: Change Select options based on another column's value

Let's say you have a Table with the Season and Month fields and you want to display only the months corresponding to the specified season. Here's how you can configure this:

1. Create an action of the JavaScript Code type (getAvailableOptions here) and add the following code:

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

1. Now, select the Table's Month field, change its type to Select/Tag, and add the following code to the Options property in the General settings section (in the JS mode):

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

1. Next, select the Enable edit button checkbox in the table's Actions settings section.

That's it! Now, when you change the season's value, you'll see that the month's values also changes based on the specified season.