Multiselect/Tags

[Istvan]

Hi, I have three issues around this field and column type when I want to load the tag values dynamically from a different table.

1. FORM: I managed to bring in the different tags into the form, I select them, the values are saved into the database, but when I want to edit the same field with the same form, it shows as empty. I don’t know if it matters, the values are saved like {value_1,value_2,…,value_x} into the database

2. FORM: I would like to see the tag titles in the form, but the tag values inside the database. I am able to see just the values everywhere.

3. TABLE: no matter what I do, the whole database value is shown as it is inside the cell, as text, like {value_1,value_2,…,value_x}. I struggle to have separate tags like value_1, value2, etc.

The available documentation is not enough for me, unfortunately, and the example templates lack the multiselect/tag field, while the demo table’s data looks to be “hardcoded” instead of coming from a database.

Many thanks!

[Max]

Hi @Istvan, seems like the barcode scanner will see some use : )

Now, regarding your issues

1. The data gets saved in the database, meaning there is an action that inserts the data into the table. But what happens when you are trying to edit the same field, is there an action for it? Is there any process going on that determines if you are editing an existing field? Or is it basically a fresh form that lets you enter new data?

2. I think this issue just stems from the setup. I’m 100% sure that you can display the labels and use the values, it mostly depends on what you do in your actions and how the components are configured.

3. The values displaying like that makes sense if you just retrieve and display them. Assuming I understand you right, in that its a string with the values divided by comma, you need to transform the data to the desired format in the action that gets the data from the database.

Once we cleared up these and maybe some other things, we’ll figure everything out

[Istvan]

Thank you @Max! If only I would already be at the barcode scanning

1. I have a form, which I use both for adding new records and editing existing ones. The problem is related just to the edit side. The data is loaded/prepopulated when I select a row in a table - it works fine for other fields, but not for multiselect/tags. The tags are loaded, are selectable, but the ones already saved in the field are not pre-selected. It’s like we are adding completely new data into that field.

2. Yes, the actions and/or custom coding which causes headaches for me

4. Yes, I am aware of this, but as I mentioned above, this is where I got stuck. A full, working example would help me a lot, but I couldn’t find any in the templates/documentation. All I could resolve is that now I have individual entities inside the table cell, but each displays [object Object] instead of the actual value, or title.

[Max]

Haha, soon you’ll be working on that one!

---

Alright, so your main issues are obviously how the Multitag/Select field values are inserted into / loaded from the table and how they’re displayed.
The important thing to configure here, is the transforming of the values when inserting / loading the data.

I quickly made an example app for you. On the first page I use the table—form setup like you, on the second page the same thing is done with just a table.

App-Istvan.zip

(Can’t directly share it here)

If something about the setup of the Multitag/Select isn’t clear, check the following “guide”. It roughly shows the setup specifically of that field type in the way you want it.
Or you can just ask here if something’s not mentioned or unclear

Guide

But, first and foremost, you have to configure the field in the table & form. Since there are multiple components having the same field type, it’s far more efficient and future-proof to create an action that yields the data for the Options setting in the Multitag/Select field.
An option can have 3 properties: value, title and color. The only thing that is required is the value. If you provide a title, then it will always display the title, but in the actions you’ll always get the value.

Now you can simply pass the data of this action to the field setting Options in the table and the form

(If you can’t write in this field, press the small JS icon on the right)

Then the select will display the names

Now add a trigger for either On Submit or On Custom Button Click to the form, where we pass {{value}} as Action Arguments, which refers to the value of the form, i.e., the values in the inputs/selects/etc.

In the action that is triggered, you first want to determine whether these values should be inserted as a new row, or if a row should be updated. To determine that, all we need is a Condition step where just check if the primary key is set. If one is set, it indicates that a row in the table is selected and the form contains the data of that entry. If it’s not set, then we know it’s a new entry.

And then just insert or update the data. But don’t forget to transform the values of the selected tags, which is as straightforward as {{data.field_name?.join(", ")}}. The ?. optional chaining operator is important because if nothing is selected, the value is not an empty array [], but undefined.

The last thing to do, is transforming the data back to an array when loading the table. Presumably, most people will have a Load Table step / action, so just toggle the Transform result option and split the joined string into the separate values: