tags element - using it with my database

Ask the community
,
1

Hi,
I would like to display my tags in a conventional way (each tag in small frame in the text)
and also to allow the user to add his own tags.
Which element should i use?

753×163 3.26 KB

2

Hey there!
You can’t use that Tag Cloud from the Blog but you can make that work with your Data Collections anyway using Wix Code and a bit of HTML Magic and a component called ZingChart for example.

1946×1552 363 KB

Online Demo: https://www.brb.ai/tag-cloud-demo

3

not sure what to do… i just want to allow user to add tags to my data and to save it… currently i have text input and the user enters something like that: “tag1, tag2, tag3”
i just want it to look like in conventional software, where each tag appears in a small separate frame

753×163 3.26 KB

4

I think the answer is in this post: https://www.wix.com/corvid/forum/community-discussion/database-tags
Although that answer is talking about dynamic pages and repeaters I believe.
What worked for me is using a text element with a slight variation of the code in that post:

$w('#dynamicDataset').onReady(() => {
 let currentProject = $w('#dynamicDataset').getCurrentItem();
 let tags = currentProject.projectTags;
 let tagsHtml = tags.map(tag =>
                `<span style="background: #459fed; 
        border-radius: 5px; 
        padding: 0 3px; 
        color: #fff; 
        font-size: 15px">${tag}</span>`)
            .join(' ');
        $w('#text27').html = tagsHtml;
        $w('#text27').show();
    });

Note that I set the text27 to be hidden on load and only show once I set the html

5

Hi, this works me with tags user input element. Add this snippet to your repeater page


export function repeater1_itemReady($item, itemData, index) {
 
 //get tags from db for an item 
 let tags = itemData.tags;


 //prepeate hashmap with tags to be diplayed
 for (var i = 0; i < tags.length; i++) {
        options.push({"label": tags[i], "value":   tags[i]});
    }
 
 
 //Set tags UI component
    $item("#selectionTags1").options = options;
}