Tagify Show Existing Array on Page Load

[TMR]

Hi All,

I’m using a Tagify component to show a user selection of work experience. The data comes from a list of experience categories in the table UserCats. The Tagify side of it all works very well, and the data is stored in a CSV array in the table however, I’d like to show the existing array as tags, preferably without having to show a separate array at the bottom as per:

Working with Arrays

This page already has an array stored for this section but heres what it looks like on page load::

I need it to look like this before the user has selected / deselected any tags, it has to show whats already stored in the DB:

Heres what my code looks lke:

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="">

Has anyone done this before…?

[Teodor]

As with any other input, you need add a value to the tagify, so that it shows the values.
Add dynamic attributes > input > value
Select your query as a value and add the Values formatter to it, using the UI. For the property select the JobsCatID value.

The code generated will be:

dmx-bind:value="scWorkCats.data.query.values(`JobsCatID`)"

[TMR]

Appreciate that @Teodor - I was confusing myself by making this way more complex than it needed to be. However, when I try the following all the records are shown (I’ve set a limit of 20 tags).

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scWorkCats.data.query.values(`JobsCatID`)">

The actual array, stored in the ‘UsersCats’ column is: 1,32,21,20, on initial page load it should only be showing whats in that array.

I then tried dmx-show and some variations of that but sill cannot show the array on initial page load, heres what I have so far that isn’t working:

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scWorkCats.data.query.values(`JobsCatID`)" dmx-show="(selectedValue == JobsCatID)">

[Teodor]

@TMR

However, when I try the following all the records are shown (I’ve set a limit of 20 tags).

So what exactly are you trying to show then?
Where should this data come from?

[TMR]

I think I’m almost there, I was using an incorrect path to the array, the array is in UserCats column in the table referenced in the Server Connect ‘scUserDetails’ - this is now showing all records instead of array contents:

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scWorkCats.data.query.values(`JobsCatID`)" dmx-show="selectedValue.contains(scUserDetails.data.query.UsersCats)">

I think the issue may be with the ‘selectedValue’ here: dmx-show="selectedValue.contains(scUserDetails.data.query.UsersCats)"

[Teodor]

Hm … when you say array, what do you mean? Do you just store a comma separated list of values such as: 1,2,10,999 in a field in your database table?

@TMR

I think the issue may be with the ‘selectedValue’ here: dmx-show="selectedValue.contains(scUserDetails.data.query.UsersCats)"

Also dmx-show has no place here at all.

[TMR]

I think I have this, this code is workinh but its showing all records briefly on page load, I’ll get a gif of it and post back.

This looks like a solution:

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scWorkCats.data.query.values(`scUserDetails.data.query.UsersCats`)" dmx-show="selectedValue.contains(scUserDetails.data.query.UsersCats)">

[Teodor]

@TMR

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scWorkCats.data.query.values(`scUserDetails.data.query.UsersCats`)" dmx-show="selectedValue.contains(scUserDetails.data.query.UsersCats)">

No, this does not look like a correct code to me.
Can you please answer my qeustion above?

[TMR]

@TMR

1,32,21,20,

Yes, this is how its stored, CSV in a table.

[Teodor]

Well that’s not an array. There’s a difference between an array and a comma separated string.
The tagify component requires an array, so you need to split the list to an array.

Is it a separate server action which returns these comma separated values? (different than the source for the tagify values?) If yes - is it a single query? Is it a repeat? How do you filter it? Does it return a single record or many records?

Maybe some screenshots would help.

[TMR]

Its a single record returned from the security provider identity on a protected page: scUserDetails. The field that contains the CSV list is UsersCats:

The data fed into Tagify comes from a separate table from scWorkCats

UsersCats is a single CSV list eg: 1,32,21,20 which are keys for
JobsCatID

[Teodor]

So you need to split the value like:

dmx-bind:value="scUserDetails.data.query.UserCats.split(',')"

[TMR]

Bingo!!

I had to change slightly your solution but this works perfectly:

<input is="dmx-tagify" id="UsersCats" name="UsersCats" dmx-bind:data="scWorkCats.data.query" tag-text="JobsCatName" tag-value="JobsCatID" nocustom="true" min-chars="0" max-items="100" no-close-on-select="true" noinput="true" placeholder="Please select work experience categories ... " max-tags="20" required="" dmx-bind:value="scUserDetails.data.query.UsersCats">

I tested it by putting the raw data in is exactly as it appears in the DB:
dmx-bind:value="'1,32,21,20'"
and that worked too.

I really appreciate your help @Teodor - looks like that’s anther very large beer I owe you.

This is now working perfectly, very fast on load and looks elegant.