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:
No problem. And do not forget to like it, if you really liked it 😉
Nice!
I had tried that, but my code was wrong.
Yours works a charm!
Now the items are displayed in the repeater :)
thank you! thank you! thank you!!!!
Not sure how to get just one onready... scares me very much...
Here's the console
I have collected them in the collection as Tags, from a checkbox group. (sounds familiar?)
These are the " selectionTags1"
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;} } }
Ha... Check this out... 😫
ok... Im scared....
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...
Hahahaha sort of. I still have to perform the validation from the VIP. Its on my log :)
Sadly, the console just runs fine :/
yet... nothing happens.
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 asume you have used something like ---> 123-forms 🙄
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. :(
Thank you!!!!!!
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????
The options is not defined. Can you help ?
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; }
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.
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 }); });