News and Announcements icon

Power Platform CommunityForums Power Apps - Building Power Apps Split comma separated ...

Power Apps - Building Power Apps

Answered

Split comma separated values and make them look like tags in a horizontal gallery

Like (0) Share

Report

Report

Posted on 4 Nov 2023 20:23:06 by Franklin_vaz

47

Hello beautiful minds!

I am developing Canvas with Dataverse for teams.
I have a table called "SQM Queries", in it there is a column called "Tags" which contains comma separated values as single line text.
I basically need something exactly like the above screenshot.
First connect my table to a vertical gallery control to list out all items in the table.
Inside the main vertical gallery, i need to have a nested gallery to display the comma separated valuesas Tags with grey background horiztaly just like the example above.
Note: Length of each separated values would be differing.

i have tried multiple options, couldn't crack it, can you help me please?

Categories:

General Questions

All responses Img

All responses (2)

Answers Img

Answers (1)

Franklin_vaz 47 on 05 Nov 2023 at 05:09:33

Like (0)

Report
Re: Split comma separated values and make them look like tags in a horizontal gallery

Dear @LaurensM,
Thank you very much for helping me do this, I wasn't thinking about using HTML text property. It works as expected.
I would be incredible naive If i dont learn how to make them each executing a code. If i may ask, how would you approach this scenario if you were to make each button (tag) executable?
Kind Regards,
Frank
Verified answer

LaurensM 12,510 Moderator on 04 Nov 2023 at 21:03:44

Like (1)

Report
Re: Split comma separated values and make them look like tags in a horizontal gallery

Hi @Franklin_vaz,

In case these tags are only displayed for informational purposes and do not need to execute code when selected, the most flexible approach would be using the HTML text control and styling these tags via HTML and inline CSS. I have created a quick example of how you could go about styling the tags below:

//HtmlText property $"<ul style = 'list-style-type: none; margin: 0; padding: 0;'> {Concat(Split(ThisItem.Tags, ","), "<li style = 'display: inline-block; background-color: rgba(218, 218, 218, 0.8); padding: 0px 5px 3px 5px; margin: 3px 3px; border-radius: 3px'>" & Value & "</li>")} </ul>"

Additional info on the HTML text control can be found here.

If this solves your question, would you be so kind as to accept it as a solution & give it a thumbs up.

Thanks!