What is the data model for tags component when using Javascript

I am trying to use the results of a query to dynamically render tags in a tag component. Specifically, I want to set colors for each tag. Can you please give an example of what the data model for myTagComponent.setValue(dataModel) should look like?

I can see that If I do this:


it does set the tag value correctly.

I have tried a data model like this:

myTagComponent.setValue({ tags: ['Tag1','Tag2','Tag3'], color: ['color1','color2','color3'] })

but that doesn't work I get an error message 'value must be an array'

Hey @Ron_West! :slight_smile:

Hmm, so looking at the component input options, it looks like there's a field for the values (must be an array) and a field for the colors (also must be an array)

Is there a reason you're trying to .setValue instead of the just referencing the values directly?

You could set the component's Tag field to {{query1.data.tag_names}}and the Tag colors field to {{query1.data.tag_colors}}, for example, if your query has the tag_names and tag_colors columns.

If you need to set the value and not have it be directly set, you could probably use temp state!

For the tag values, you could just proceed as normal like myTagComponent.setValue(['Tag1','Tag2','Tag3'])

For the tag colors, you could

1. Create a new temporary state (e.g. state1)

2. In your tag component's Tag colors field, set it to {{state1.value}}

3. When you need to set the colors, you can do state1.setValue(['color1','color2','color3'])

Let me know if you have any questions at all!

Thank you Victoria. I wrote this when I was a little new to Retool and looking back I see now how easy this is (and it works :slight_smile: ).

Sorry for the late response I never got an email notifying me of activity on this question. Will check settings and make sure I don't miss future responses to questions.

Very glad to hear it and no worries at all. Hope to hear from you again soon :slight_smile: