Select/Tag field: Utilizing Tag mapper

Let's say you have a Table with a Select/Tag column, and you want the items that have already been selected and are displayed in the table to not show in the dropdown. It may be useful, for example, when you don't want users to select one item multiple times.

In this case, you can use the Tag mapper setting for this field type. Here's an example how you can configure it in your app:

1. Create an action that will return your table data - select the JavaScript Code type and specify your data in the code, for example:

[
  {"id": 1, "tag": 0},
  {"id": 2, "tag": 2},
  {"id": 3, "tag": 1},
]

We've specified tag values here that match their titles.

1. Assign this action to the table.

2. Next, create another action that will return all available tag options - select the JavaScript Code type and specify the options in the code, for example:

return [
  { value: 0, title: 'Innovate' },
  { value: 1, title: 'Synergy' },
  { value: 2, title: 'Dynamic' },
  { value: 3, title: 'Strategic' },
  { value: 4, title: 'Sustainable' },
  ];

1. Add this action to the Select/Tag column's Options field in the JS mode:

{{actions.availableOptions.data}}

Or, alternatively, you can specify there the following code to additionally display the selected value in the Edit mode:

const options = [...{{actions.availableOptions.data}}];
if ({{value}}) {
  const valueOption = {{actions.allOptions.data.find(o => o.value === value)}};
  options.unshift(valueOption);
}
return options;

1. Finally, create an action that will return only the options NOT selected - select the JavaScript Code type and specify your code, for example:

return {{actions.allOptions.data}}?.filter((option) => {
  return !{{ui.table.value}}.find(item => item.tag === option.value);
});

Make sure to toggle on Reactive trigger, run on components' changes in the Setup step of this action.

1. Now, click the Select/Tag column and open its View settings section.

2. Locate the Tag mapper field and specify the following code to return the values not selected in the table:

{{actions.allOptions.data.find(i => value === i.value).title}}

Now, when you select a value from the dropdown, it will be added to the table and will no longer be available for selection.