How do I display tags from a dataset?

Ask the community
, ,
1

I know the tags are a user input, but is there a way you can use them to DISPLAY tags from a dataset?

My site will display a repeater which contains information about trades people, and link to their profiles. I want each item in the repeater to display a unique set of tags.

I’ll be entering the tags manually in the “profession” dataset. Then id like to show those tags on a page inside a repeater. Each professional will have their own unique set of tags.

Heres the dataset which provides data for the repeater

2712×1376 251 KB

and heres the page with the repeater

2868×1346 314 KB

My problem is: I want to keep that tag design and display the tags from the dataset in each item on the repeater.

Whats a good solution for this?

Thanks!

2

See Yoav’s answer in this thread . A nice solution.

3

Thanks @yisrael-wix , I have tried this but I get an error “html does not exist on #tags”

2876×1448 387 KB

4

@bill24563 What kind of element is #tags? I tried this with a Text element and it works great.

5

@yisrael-wix #tags was a tag selection user input element, I have just tried with a text element

2880×1454 398 KB

heres the live results:

2880×1344 294 KB

How can I get this to look like the tag user input tag element? I want to get the design similar to this:

6

You’ll have to play with the HTML in the code. Change the font size, padding, etc.

7

@yisrael-wix Im getting closer to the desired result with this code

export function repeater1_itemReady($item, itemData, index) {
let tags = itemData.skills;
let tagsHtml = tags.map(tag =>
`<span style="background: #459fed;
border-radius: 20px;
padding: 6px;
line-height: 40px;
color: #fff;
font-size: 14px">${tag}</span>`)
.join(' ');
$item('#tags').html = tagsHtml;}

for some reason, it doesn’t split each tag in to its own container. Is there a way to split each tag?

2782×1312 267 KB

Thank you for your help!

8

@bill24563
Try something like this to split them:

let tags =itemData.skills.split(',');
9

@yisrael-wix
Thank you, I’ve got the results I was after!

10

Is this supposed to replace the original “let tags” line? That’s what I tried, but the HTML doesn’t work at all if I do that for some reason.