I created a user input form that uses the multiple selector check boxes. This can only be saved as tags in the database.
I want to display the checked values on a dynamic page, but no element will let me chose tags as the connected data. Any suggestions?
@corvidcode - I have the same query. Kindly guide
Hi,
You can display the data using the same Multiple selection element.
Iād like to bump this query.
I also have a data input form, using checkbox groups. This saves data of the field type ātagsā but there are no UI elements (i.e. display elements, NOT input elements) which display tag field types, as far as I can see. This limits the way we can enter data using forms which are intended for display in dynamic pages.
What is the best way to display data in a dyamic page which has been saved as field type tags? Seems weird to force the data type to something which has no associated UI display elements.
Also, it looks like dataset filters do not support tags field types either!! aaargh!
Agree - I want to be able to get the admin user to suggest a bunch of options which get sent to the user on a dynamic page who can then select which of the options they want but that doesnāt seem to workā¦
You can do that, using a bit of code.
Here is an example repeater which shows tags -
export function repeater2_itemReady($item, itemData, index) {
let tags = itemData.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;
}
First, I read the tags field value from the itemData - which is the current item in the repeater this event is called for.
Then, using the fact that tags are just an array of string, using the map function I transform each tag value into an HTML that renders the tag - using a span element with the right CSS.
Using the Join function I turn it all into a single HTML string, which I then set to the tags text element.
Hope that helps.
Hey Yoav, thanks very much for the reply - this is a really nice bit of html and Iām going to try and use it to render a tag area on my items.
Additionally, I was finding it hard to add filters to a page dataset because filtering tags isnāt possible. So, therefore, for these fields, I have found it necessary to use an array.join() script so that my filters and searches can work.
for example:
export function checkboxCategory_change(event) {
let str = event.target.value.join(", ");
$w('#dataset1').setFieldValue('category', str);
}
If I wanted to render the tags in addition to searching, I would create a new searchable field (text) to the database and then use the original tag field array for rendering as you have done.
I appreciate you taking the time to reply and provide a fab example. Cheers.
Hey @sedmondsonwork , Best if you ask a second question to ask it as a new topic.
That way, when someone else has a similar need, they can find the right thread.
Send me the new topic URL on the chat here, will try to help.
Hi @yoav-wix - I have a very similar need to the solution you showed above to manually add the tags to a repeater component. See screenshot of my repeater - I have all my columns mapped to the dataset, but there is a column not mapping called āprogramdaysā defined as a Tags data type.
What are the steps I need to use your code in my scenario?
I guess I need to add an empty, unmapped column to my repeater? I canāt seem to find how to do this.
Then, where is the itemReady() callback defined? When I look at the properties of my repeater, I do not see this event callback listed to add my own code.
thanks
Hi @yoav-wix , thanks for instruction, could you pls give a bit more detail about how to add the code?
Best,
Hi Yoav,
I added your code and followed the steps very carefully, even for a couple of hours to try and debug, but it would NOT work for me. Can you elaborate? I used the amended version for dynamic page:
$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();
});
You made a mistake in your code.
Remove the quotation marks after the 12px where it says fontsize, and add a semi-colon.
This will then allow the css to execute the font size, and render the item.
It should read - fontsize: 12px; >${tag}'}
export function repeater1_itemReady($item, itemData, index) {
let tags = itemData.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(ā#text232ā).html = tagsHtml;
}
Half a year late to the party, but you can now connect Tags to Text component. It shows tags as comma separated values. Hope that helps!
Hi @yoav-wix , I want to display tags on my repeater exactly as youāve shown in your example.
Iāve tried pasting your code into the PAGE CODE but Iām not seeing any changes.
I updated itemData to be the Field key which is āoperatorTypesā. Are there any other changes I need to make? Iām pasting the code in the console after ā//TODO: write your page related code hereā¦ā
@florencemunrobrown Please make a new post instead. Follow our community guidelines .
Yoavās code is a working example of how to display tags from the database and as Adas says , you can now connect tags to the Text component.
Since 2 solutions have been laid out above I am closing this thread to avoid unnecessary bumps. If anyone has an issue regarding database tags please open a new thread while following our Community Guidelines .
