Tags without a repeater?

Hi there,
I was wondering if you are able to display tags on a dynamic page (item) that has no repeaters.

This is the scenario:
The collection includes tags previously filled from a user input form.
These tags are displayed on the dynamic page (all), and I would like to also display them on the dynamic page (item). right now tags are displayed on the “all” page (and that’s great).
But I cant make them display on the Item page… not without including a repeater.
I’ve also tried to set it manually (input element + connect) but nothing happens.

This is the code used for the “all” dynamic page that includes the repeater:

exportfunctionrepeater1_itemReady($item, itemData, index){
let options =[];
let tags = itemData.tipoActividad;
let tagLength = tags.length;      
console.log("Item-Data: ", itemData)     
console.log("Index: ", index)     
console.log("Tags: ", tags)
if(tagLength!==undefined){for(var i=0; i<tagLength; i++){                     
options.push({"label": tags[i],"value": tags[i]})$item("#selectionTags1").options = options;}}

Forum posts I’ve checked are connected to repeaters, so I would reaaaaaally appreciate it if you can give me a hint on how to display the tags without using a repeater, and using the selection tags input element.

Thank you!!!

1 Like

You can display tags in an HTML string. For an example of what it looks like, take a look at this page: Back Button Example .

The code looks like this:

let itemObj = $w("#dynamicDataset").getCurrentItem();
let tags = itemObj.tags.split(',');
let tagsHtml = tags.map(tag =>
   `<span style="background: #459fed; 
        border-radius: 5px; 
        padding: 0 6px; 
        color: #fff; 
        font-size: 16px">${tag}</span>`).join(' ');
$w('#tags').html = tagsHtml;

Nice! thank you @yisrael-wix !
but will it look good on mobile?
I’ve been reading that this can sometimes using html can be tricky on mobile.

You can use a different version of the HTML specifically for mobile if needed.

1 Like

Hummm… its not working for me…

I’ve customized the keys and ids, yet it doesnt call the tags properly… :confused:

My code is only an example of how it’s done. You’ll have to make the appropriate changes.

Are you getting the tags OK in the code that you posted in your question? If so, get the tags that way, and create the HTML string as I show in my code snippet.

1 Like

Not sure if I am understanding completely what you mean…
This is what I’ve used:

let itemObj =$w("#dynamicDataset").getCurrentItem();
let tags = itemObj.tipoActividad.split(',');
let tagsHtml = tags.map(tag=>
`<span style="background: #459fed;         
border-radius: 5px;         
padding: 0 6px;         
color: #fff;         
font-size: 16px">${tag}</span>`).join(' ');

$w('#selectiontags1').html = tagsHtml;

The Current Item, well Returns the current item.
But I need to call the field. I guess I have to call the item.data
Ive also tried $w(“#selectiontags1”).onViewportEnter
but couldn’t make it work.

I’ve tried both both.
a text field and the selection input.

What am I missing? (besides grey matter) hahahhaha

Hello.
I was following this post.
My question is why you don’t just use the normal Selection-Tags for your purposes?

Read all needed values out of your DB and push them to your Selection-Tag.
https://www.wix.com/velo/reference/$w/selectiontags/selectedindices

Example: https://www.media-junkie.com/rd-database-manager

You will find a button in the left upper corner prepared just to show you how it would work…

Click on —> Set-Tags and see what happens…


Code for the shown example:

export function button499_click(event) {
    $w('#ST1').selectedIndices = [0,3,4]
}

This is the Selection-Tag —> $w(‘#ST1’)

You can use it to do a selection-tag-input and output from DB.

But also like Yisraels suggestion!

Nice one!

hi @russian-dima nice to see you!

Right now I just need to display the items in the collection, not select them manually as this is a dynamic Item page.

At first, I’ve tried this:

But it doesn’t display the tags on the collection.
This is a dynamic item page, with no repeater on it, so I had to discard the itemReady solution.

Then I tried the getcurrentItem on a text field, but it didn’t load the HTML style

Later, I moved back to the selection tags, and tried on viewportenter, but it doesn’t load the values.

As simple as it is, I cant seem to make them load to the selection tag input element.

As i already have written in my last post, you can use the selection-tag-element to show values from your DB and to put them back to DB.

  1. You have a DB ? Of course you have. → Collection-Name = ???
  2. You surely want refer to one special field? Of course you want → Field-ID ?
  3. The Field is a Tag-Field? Of course it is, because you store multiple values in it.
  4. You are using dynamic pages? Does it really matter if you use dynamic or non-dynamic pages? —> NOPE it doesn’t ! Why? —> Because at the end you get your values from your DB .

Now what and how to do it?

  1. Using wix-data and doing a —> QUERY → getting all ITEMS/RESULTS of DB.

  2. Why not putting a repeater onto your dynamic page → i don’t know why you don’t want to do that.

  3. Ok working without repeater → using a STRIP and putting the SELECTION-TAG-ELEMENT into the STRIP (why using a STRIP? —> because RESPONSIVE.

  4. Now the most interesting part! How to get always the → CURRENT-ITEM out of the QUERY ? —> currentItemIndex will help you out…
    https://www.wix.com/velo/reference/wix-dataset/dataset/getcurrentitemindex

You know the INDEX of the current ITEM ?
Then you can also get the related ITEM out of the DB.

Where to find a similar working example?
Of course here —> https://www.media-junkie.com/rd-database-manager (V-1.5)

Working-Filter-Engine…

Example-DATABASE: —> with 2x Selection-Tag-Fields (sprache/bundesland)

Now you want to show these "selection-tag-fields " as → “selection-tags”
1) Go to —> “Settings” —> Preset-Settings

2) Choose —> [sprache] & [bundesland] <— both selection-tag-fields in the Selection-Tag-Dropdown-Options…(left-sided-options).


3) Click on —> SAVE !

  1. Go back to Table-Filter & LOAD the new Set-Up…

What do you see? Is that what you are trying to achieve?

SOME-EXTRAS:

Wanna change to another DB ? Here you can choose another EXAMPLE-DB…
https://www.media-junkie.com/databases

Where to put the new DB-Name ? → Change DB-Name and click on —> SAVE

Set-Up DropDowns / Selection-Tags & Check-Boxes like you want.
Click —> SAVE and do not forget to —> LOAD the new SETUP !

Try out all possible options and combinations!

Have fun! :wink:


Edit: forgot to tell you, that you even can EXPORT all the given DATA to a Excel-File.

How?
Open Sub-Menu…

Click on —> Export-Data…


A new window with included data will open…

Click on —> Export to Excel…


Be impressed :sweat_smile::grin:

How much i was working on that simple-looking DB-Manager? → more than 4-Month! :wink: (and still in developement!)

Seems like you are trying to generate the same…
https://www.wix.com/velo/forum/coding-with-velo/want-to-call-multiple-items-from-database-according-to-user-selection-can-you-help/p-2

You must be lucky.:wink:

Let me tackle one by one:

  1. You have a DB ? Of course you have. → Collection-Name = ???
    - Guess? Datos Perfil :wink:

  2. You surely want refer to one special field? Of course you want → Field-ID ?
    - tipoActividad

  3. The Field is a Tag-Field? Of course it is, because you store multiple values in it.

  • Sure. Online,offline, online and offline.
  1. You are using dynamic pages? Does it really matter if you use dynamic or non-dynamic pages? —> NOPE it doesn’t ! Why? —> Because at the end you get your values from your DB .
    -absolutely correct. But my item page has no repeaters as there is no info to repeat.

  1. Using wix-data and doing a —> QUERY → getting all ITEMS/RESULTS of DB.
  • Currently using wix data :slight_smile:
  1. Why not putting a repeater onto your dynamic page → i don’t know why you don’t want to do that.
  • Becasue i don’t have any items that should repeat on this dynamic Item page :slight_smile:
  1. Ok working without repeater → using a STRIP and putting the SELECTION-TAG-ELEMENT into the STRIP (why using a STRIP? —> because RESPONSIVE.
  • Already using a strip, and selection tags.
  1. Now the most interesting part! How to get always the → CURRENT-ITEM out of the QUERY ? —> currentItemIndex will help you out…
    https://www.wix.com/velo/reference/wix-dataset/dataset/getcurrentitemindex
  • yes I have already read this.

What do you see? Is that what you are trying to achieve?

  • nope. Just to display the items (tags)that correspond to that item (owner) on the item page as a selection tag… it shouldn’t be so hard to achieve without a repeater…

Hahahaa, not quite the same… sheesh…

The other ones are a boolean and relate with filters -much more complex than this one :slight_smile:

In this case is just displaying the tags (tipoActividad) on a selection tag element on an item page… simple as it sounds…

https://www.wix.com/velo/reference/$w/selectiontags/value

Put all the given input together. Take some time to understand everything & you will find your solution. You are close to find the right way.

You could even solve it with a dataset (not with Wix-Data), when you use a normal dataset (non-dynamic one).

Good luck.

Thank you @russian-dima for all the cheers!!
Yet I don’t think I’m making myself clear.

Sadly, I’m not asking anything related to filter. Im not trying to filter anything here.

What I am asking is plain simple…

  • Does anyone knows a way to display the tags from a collection without using a repeater and using the selection tags input element?

I’ve tried manually, with viewportenter and it didn’t work for me.
Does anyone managed to do this without a repeater?

If so, what did you use to make the selection tags input element display the tags from the collection?

No, I cant set the values manually, as this is a dynamic item, at it should collect the values from the collection field.

Not sure if this clarifys things :slight_smile:

English a third language :slight_smile:

Thank you!

Ok, my last one tip for you!

This is an excerpt of the already known DATASET-DRIVEN-EXAMPLE…
https://www.media-junkie.com/filter-test

I expanded the example just for you, to show you how to work with SELECTION-TAGS. And this is the working CODE …

//Result-Counter----------------------------------------------
function result_COUNTER() {console.log(DATASET)
    let count = $w(DATASET).getTotalCount().toString();
    console.log("COUNT = " + count)
    $w('#resultCounter').text = count.toString()
    //-------------------------------------------
    let myTagFieldID = "sprache"
    let OPTIONS=[]
    let currentItem = $w('#dataset1').getCurrentItem(); 
    console.log(currentItem[myTagFieldID][0])

    for (var i=0; i<currentItem[myTagFieldID].length  ;i++) {
        OPTIONS.push({"label": currentItem[myTagFieldID][i], "value": 
      currentItem[myTagFieldID][i]})
    }
    $w('#Stag1').options = OPTIONS
}

Of course it is just an example and you can improve it much more and generate much more automation.

Because this example is not based on a dynamic page (dynamic-dataset), it works a little bit different, but does the same as an dynamic one.

Every-time when you do a filtering, you change values. It will be always the ---------->FIRST-ITEM, of which related —> SELECTION-TAGs will be shown…

Sorry for my last WRONG-LINK in my last post…

It was NOT—> value
It was ----------> options in your case !

Play around with this example and have fun!

Good luck with your (my) project! :wink::grin:

Thank you @russian-dima and I hope you keep on building your awesome example and it keeps on helping others like me! I have indeed had fun along the way.

Finally, I’ve looked into a much more simpler (and very creative) solution.
Hope this message thread help others that encounter this issue, solve it.

Have a great day and #takecare!!!

@hola95401 Glad you worked it out. Please share your “simple and creative solution” as others might be interested. :beers:

hi Yisrael!, just text!
And design around the item page. Thats it :slight_smile: