Displaying Database Tags in a Repeater

Ask the community
,
1

I am trying to display tags from my database as tags in my repeater. The Field key of the tags I want to display is operatorTypes .

I’ve pasted my code into the page console like so:

// For full API documentation, including code examples, visit https://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
export function repeater2_itemReady($item, operatorTypes, index) {
let tags = operatorTypes.tags;
let tagsHtml = tags.map(tag =>
`<span style="background: #459fed;
border-radius: 5px;
padding: 0 3px;
color: #fff;
font-size: 12px">${tag}</span>`)
.join(' ');
$item('#tags').html = tagsHtml;
}
});

See attached for what I’m trying to achieve:

2256×1274 315 KB

2

Export function is created using the properties panel , if you want to put an element’s onReady function under the page’s onReady function then see below.

Since you said operatorTypes is the field key then you should start with something like this:

$w.onReady(function () {
   $w("#repeater2").onItemReady( ($item, itemData, index) => {
      let tags = itemData.operatorTypes;
      //continue your code here
   });
});
3

Hi Shan, thanks so much for trying to help me with this. I’m very much a novice so I might be beyond help.

I think I must be missing something essential. Do I need to add an element to the repeater for the code to reference and appear?

Currently I’m showing tags as text but this is ineffective on mobile, as they’re comma separated value and the wrapping looks bad. I want to show each tag as an actual tag within the repeater box. Eventually I also want to implement a search feature so that users can filter by tag so it’s important for me to be able to show the tags as actual tags rather than text.

2244×1260 280 KB

4

Hi guys, this worked for me with the selection tags user input element.

example: https://hatlelukas.wixsite.com/mysite/repeater

exportfunction 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;
}
5

Nice one @hatlelukas !

By the way, if you do not want the tags to be clickable you can disable them and design the Disabled state the way you wish the tags to look. This trick will also take care of the cursor, and prevent it from changing into a hand on hover.

6

The options is not defined. Can you help ?

1256×458 77.4 KB

7

Add this line before the for loop:

let options = [];

I don’t know what the rest of the code looks like, but this might help.

8

Perfect! It works now, thank you so much!

9

Perfect! It works now, thank you so much!

10

Hi, hoping somebody can help me. I am trying to add a code so that clicking on tags in my #selectedTags1 box will filter which elements are displayed in a repeater (#repeater1) on the right side of the screen. The repeater is connected to a data set with a Tag-column that matches the value of the tags in the selectedTags1 box.

tags are titled:
brost
ansikte

How do I go about to code this???

11

Hey everyone!!

I need to display the tags included in my collection that has been collected via input element from a form.

I need it to look great on both mobile and desktop.
The collection field is tipoActividad.

So I’ve tried this using a tags input (#selectionTags2)

export function repeater1_itemReady($item, itemData, index){
 //get tags from db for an item   
 let tags = itemData.tipoActividad;//prepeate hashmap with tags to be diplayed
 let options = [];

 for(var i =0; i < tags.length; i++){        
        options.push({"label": tags[i],"value": tags[i]});}//Set tags UI component    
        $item("#selectionTags2").options = options;
        }

And the console reads:


But tags is defined…

And in this case, I used Text (#tags):

export function repeater1_itemReady($item, itemData, index) {

let tags = itemData.tipoActividad;
let tagsHtml = tags.map(tag =>

`<span style="background: #459fed;
border-radius: 5px;
padding: 0 3px;
color: #fff;
font-size: 12px>${tag}</span>`)

.join(' ');

$item('#tags').html = tagsHtml;

}

In this case, the console reads


But tags is defined…

Ive also tried this:

$w.onReady(function(){
$w('#selectionTags3').onChange(()=>{
const selectedTag =$w('#selectionTags3').value;

let filter = wixData.filter();
if(selectedTag.length >0){   
filter = filter.hasSome("tipoActividad", selectedTag);
}   
$w('#dataset1').setFilter(filter);  
})
    });

  But nothing happens....

what am I missing???

I really appreciate it if anyone could share some advice on this.
Its driving me nuts.
and yes, I have wix data above this code. :frowning:

Thank you!!!

12

Inspect your own code by using some console.logs and you will recognize what to do.

export function repeater1_itemReady($item, itemData, index){
    let tags = itemData.tipoActividad;
    let options = [];
    
    console.log(itemData)
    console.log(tags)
    
    for(var i = 0; i < tags.length; i++){
        options.push({"label":tags[i], "value":tags[i]});}
        $item("#selectionTags2").options = options;
    }
}

Take a look into CONSOLE and inspect the results.

I need to display the tags included in my collection that has been collected via input element from a form.

I asume you have used something like —> 123-forms :roll_eyes:

13

Hahahaha sort of. I still have to perform the validation from the VIP. Its on my log :slight_smile:

Sadly, the console just runs fine :confused:
yet… nothing happens.

14

I can’t see the console-log. Would perhaps be helpful to see the log of → console . log ( tags )

Please use the CONSOLE of Google-Chrome.

15

I read that if you include the tags as text, once you run the mobile version it turns them into text elements such as -presencial, online, presencial y online.

For avoiding this then you could use the selection tags input.
Is this the only way to display them great on mobile?

Should I only consider just his one and consider looking into the length issue?

exportfunctionrepeater1_itemReady($item, itemData, index){//get tags from db for an item   
let tags = itemData.tipoActividad;//prepeate hashmap with tags to be diplayed
let options =[];for(var i =0; i < tags.length; i++){                 options.push({"label": tags[i],"value": tags[i]});}//Set tags UI component    $item("#selectionTags2").options = options;}

What I need to do is:
1st - display the tags in the collection inside a tags selection item in the repeater.
2nd - once this is done, create a filter that allows me to filter those items in the repeater that include those tags.

Yeah… I know…

16

Ha… Check this out… :tired_face:

557×769 74.8 KB

559×627 77.5 KB

ok… Im scared…

17

That console-logs looks not good :sweat_smile:
It’s not recommende to have so much errors on your site, if you want to create a well working website.

ok… Im scared…
I am scared, too. :rofl:

Well i am still not sure if i at least understood your issue completely.
Your problem is the type of value in the databse? (tags / text)?

You write here…

I need to display the tags included in my collection that has been collected via input element from a form.

export function repeater1_itemReady($item, itemData, index){
   let options = [];
   let tags = itemData.tipoActividad;

   console.log("Item-Data: ", itemData)
   console.log("Index: ", index)
   console.log("Tags: ", tags)

   for(var i =0; i < tags.length; i++){        
       options.push({"label": tags[i],"value": tags[i]})
       if(i===tags.length){$item("#selectionTags2").options = options;}
   }
}

Ok, but how do your DATAFIELD —> “tipoActividad” in your DB looks like, after the values were collected via input element from a form into your DB?

Can you show a DB-Screenshot of this field?

Here you can see 2-different scenarios… (Example):

  1. First one has normal TEXT → STRING-Type
  2. Second one is formated as TAGS → Array of individual STRINGS or STRING-Groups.


Now the question is, how is structured your DATAFIELD —> “tipoActividad”?

As i already told you, try to work more with CONSOLE-Logs, they will help you to debug your problem.

Run the shown code above and see what exactly you get for all the logs…

console.log("Item-Data: ", itemData)
console.log("Index: ", index)
console.log("Tags: ", tags)
18

I have collected them in the collection as Tags, from a checkbox group. (sounds familiar?)

1072×425 25.7 KB

These are the " selectionTags1"

495×545 35.7 KB

Maybe there is some conflict with something?


import wixData from 'wix-data';
import wixLocation from 'wix-location';


var refFields = []
//--------- USER-INTERFACE ---------------------
var DATASET     = "#dataset1"
var DATABASE    = "DatosPerfil"
//-------------------------------
var REFERENCE1  = "actividad" 
var REFERENCE2  = "provincia" 
var REFERENCE3  = "colaborador"
//--------- USER-INTERFACE ---------------------
 
$w.onReady(async function () {
    refFields=[REFERENCE1, REFERENCE2, REFERENCE3]
 
 //Options for CheckBox-1--------------------------------------------------------------
    $w('#CB1').options = [
        {"label": "Embajadores",    "value": "Embajador"},
        {"label": "Embajadas",      "value": "Embajada"},
    ];

 //Create-Unique-Dropdown--------------------------------------------------------------
    wixData.query(DATABASE)
    .limit(1000)
    .find()
    .then(results => {
 const uniqueTitles1 = getUniqueTitles1(results.items);
 const uniqueTitles2 = getUniqueTitles2(results.items);
        $w("#DD1").options = buildOptions1(uniqueTitles1);  //---> ACTIVIDAD
        $w("#DD2").options = buildOptions2(uniqueTitles2);  //---> PROVINCIA
    });

 //Dropdown_Buttons--------------------------------------------------------------------
    $w('#DD1, #DD2').onChange(()=>{SEARCH_ENGINE();});
 //Checkbox_Buttons--------------------------------------------------------------------
    $w('#CB1').onChange(()=>{SEARCH_ENGINE();});
 //Search_Buttons----------------------------------------------------------------------
    $w('#BuscarBtn').onClick(()=>{ SEARCH_ENGINE(); });
 //Reset_Buttons-----------------------------------------------------------------------
    $w('#btnReset1').onClick(()=>{$w("#DD1").selectedIndex=undefined, SEARCH_ENGINE();});
    $w('#btnReset2').onClick(()=>{$w("#DD2").selectedIndex=undefined, SEARCH_ENGINE();});
})


//------------- Functions ------------------------------------------------------------
function getUniqueTitles1(items)    {const titlesOnly = items.map(item => item[refFields[0]]); return [...new Set(titlesOnly)];}
function buildOptions1(uniqueList1) {return uniqueList1.map(curr => {return {label:curr, value:curr};});}
//-------------
function getUniqueTitles2(items)    {const titlesOnly = items.map(item => item[refFields[1]]);  return [...new Set(titlesOnly)];}
function buildOptions2(uniqueList2) {return uniqueList2.map(curr => {return {label:curr, value:curr};});}
//-------------
 
function SEARCH_ENGINE() {console.log("Search-Engine started")
 let filter  = wixData.filter()  
 //DropDowns-------------------------------
 let item1   = $w('#DD1').value //---> DropDown
 let item2   = $w('#DD2').value //---> DropDown
 //Checkbox-Group--------------------------
 let item3   = $w('#CB1').value //---> CheckBox 

 //DropDowns-------------------------------
 if (item1!==undefined && item1!=="") {filter = filter.eq(REFERENCE1, item1)}
 if (item2!==undefined && item2!=="") {filter = filter.eq(REFERENCE2, item2)}
 //Checkbox-Group--------------------------
 if (item3!==undefined && item3!=="")  {
 for (var i = 0; i < item3.length; i++) {filter = filter.eq(REFERENCE3, item3[i])}
  }
  $w(DATASET).setFilter(filter)
  .then(()=>{
      result_COUNTER()
      $w('#table1').refresh();
  })
}
 
function RESET (parameter) {
    $w("#DD1").selectedIndex = undefined;
    $w("#DD2").selectedIndex = undefined;
    $w('#CB1').value = undefined;
}

//Result-Counter----------------------------------------------
function result_COUNTER() {
 let count = $w(DATASET).getTotalCount().toString();
    console.log("COUNT = " + count)
    $w('#resultCounter').text = count.toString()
} 

///SearchBar

///EMAIL BTN

/**
 *  Adds an event handler that runs when the element is clicked.
 *   @param {$w.MouseEvent} event
 */
export function btnemail_click(event) {
    wixLocation.to("mailto:") + $w('#dataset1').getCurrentItem().emailDeContacto.id
}

//HIDE ITEMS
$w.onReady(() => {
    $w("#dataset1").onReady(() => {
 // Gets the current item properties and stores them in a variable called item
 const item = $w("#dataset1").getCurrentItem();
 // Checks if the current item has a value in the "video" field
 if (!item.fbEmpresa) {
            $w("#FBimage").hide();
        }
 if (!item.instagramEmpresa) {
            $w("#INSTempresa").hide();
        }
 if (!item.youtubeEmpresa) {
            $w("#YTempresa").hide();
        }
 if (!item.twitter) {
            $w("#TWempresa").hide();
        }
 if (!item.LINPersonal) {
            $w("#LINKPersonal").hide();
        }
 if (!item.linEmpresa) {
            $w("#LINEmpresa").hide();
        }
 if (!item.iniciativa) {
            $w("#group1").collapse();
        }
 if (!item.URL) {
            $w("#web").collapse();
        }
    });
});


export function repeater1_itemReady($item, itemData, index){
 let options = [];
 let tags = itemData.tipoActividad;

   console.log("Item-Data: ", itemData)
   console.log("Index: ", index)
   console.log("Tags: ", tags)

 for(var i =0; i < tags.length; i++){        
       options.push({"label": tags[i],"value": tags[i]})
 if(i===tags.length){$item("#selectionTags1").options = options;}
   }
}
19

Yes of course it sounds familiar —> https://www.wix.com/velo/forum/coding-with-velo/want-to-call-multiple-items-from-database-according-to-user-selection-can-you-help :wink:

You have now some results in your console.


…open Item-Data and Tags and see what you can find inside the shown OBJECT and ARRAY (do not forget to show a screenshot of console-results, after you have opened them) .

BTW. Your code has 2x onReady(). You should eleminate one of them. Always just 1x onReady() in your code!

20

Not sure how to get just one onready… scares me very much…

Here’s the console

948×565 70.7 KB