Create Selection Tags from data

Ask the community
,
1

I would like to create selection tags based on data in my database. Is there any way to do this?

Thanks so much!

Regards, Stefan

1 Like
2

Hello Stefan,
what do you mean, when you say “selection-tags” ?
How does it looks like?

Can you make/show an example? (pic?)

3

If you create a tags field in your dataset, you can easily add your tag word or words to that field and use that to filter your dataset on the page.

You can see more in this previous forum post, the Selection Tags example and Selection Tags from the Wix API Reference.
https://www.wix.com/corvid/forum/news-announcements/new-feature-selection-tags
https://www.wix.com/corvid/example/filter-with-multiple-options
https://www.wix.com/corvid/reference/$w.SelectionTags.html

4

//Selection tags selection
wixData.query(“collectionID”, )
.find()
.then((results) => {
if (results.items.length > 0) {
let repData = results.items;
let result1 = repData.map(({ title }) => title)
const propertyValues = Object.values(result1);
console.log(propertyValues);
let options = [];

            for (let b = 0; b < result1.length; b++) { 
                options.push({ label: result1[b], value: result1[b] }) 
            } 
            $w("#selectionTags1").options = options 

        } 
    })
5

Or:

export function getOptions() {
    return wixData.query("DatabaseID")
        .find()
        .then((queryRes) => {
            const { items } = queryRes;

            if (items.length > 0) {
                return items.map((item) => {
                    return {
                        label: item.title,
                        value: item._id
                    }
                })
            }
        })
}

Dropdown, Selection Tags, Radio Buttons, Checkboxes
These inputs have ‘option’ property to pass or get data and each of them works in same way.

You will have an array and inside that array you will have objects with two property: value and label.

When you are getting data from a database you can return it using map in that format.

6

I need help, I am trying to use selection tags as options, where if the user selects one tag, then tries to select another, the former selected is automatically deselected. do you have any trick for this?

7

https://www.wix.com/velo/forum/coding-with-velo/selection-tags-single-selection

https://www.wix.com/velo/forum/coding-with-velo/use-selection-tags-element-with-one-option-at-a-time-without-having-to-unclick-the-option

8

This code worked great for me.

import wixData from 'wix-data';

    wixData.query("ID OF COLLECTION", )

        .find()

        .then((results) => {

            if (results.items.length > 0) {

                let repData = results.items;

                let result1 = repData.map(({ FIELD ID }) => FIELD ID)

                const propertyValues = Object.values(result1);

                console.log(propertyValues);

                let options = [];


                for (let b = 0; b < result1.length; b++) {

                    options.push({ label: result1[b], value: result1[b] })

                }

                $w("#SELECTION TAG ID ON PAGE").options = options


            }

        })