Showing an 'array?' with icon tags

[HouseHippo]

I’m probably using wrong language. I have a choice component, where user can select 1 or multiple “metals”. Made it look nice with the text and an little picture icon beside it. Screenshot below.

Clicking the choices only writes the text to the destination column of my choice, in an array if multiple. So the user sees ugly text only, separated by commas. Like below.

I’d like the same nice ‘tag style’ items (text with icon) to populate into my column and show to the user. Preferably without commas, but a few comma’s never hurt anyone. The “tags” would NOT be selectable or changeable of course, just for displaying more beautifully. For use in lists, titles, etc. Like this:

I think the solution relies on arrays and relations which I’m bad with. Couldn’t get an array column to actually display to the user. Here’s my simple choices table setup. Does anyone have solutions?

[ThinhDinh]

@HouseHippo

Clicking the choices only writes the text to the destination column of my choice, in an array if multiple. So the user sees ugly text only, separated by commas.

That’s the default behaviour.

@HouseHippo

I’d like the same nice ‘tag style’ items (text with icon) to populate into my column and show to the user.

I think the only layout that accepts array natively is the tags of Kanban, but that doesn’t contain the image like your choice component.

@HouseHippo

The “tags” would NOT be selectable or changeable of course, just for displaying more beautifully.

If you use a custom container (I think that’s what you did in the screenshot), plus some kind of CSS to disable the choice (only on Business & Enterprise) plan then you may get it, but I’m not sure if CSS is the answer here.

[Jeff_Hager]

I guess I never pursued this, but some creative html with a handful of computed columns could give you a simulated non-clickable chip style view.

Choice component appearance

Working on something. Top is CSS styled DIV tags created from a joined list column. Bottom is a choice component. Not overly complicated, but edging on overkill. Might end up making a single javascript column do handle it. Also, these are not clickable, so only useful if you just want a bunch of tags generated from a comma delimited list. [image]

[HouseHippo]

Hmm maybe misunderstanding? @Jeff_Hager and @ThinhDinh

I found this in dummy data when creating a new page. The “tags” are showing with the icon using a relation. Step 1, perfect.

Now how do we display that column to the user in a component? If I use a list, it won’t allow me to select the “related things” column. I’m on pages btw.

[Jeff_Hager]

Short answer…you don’t. It’s not a native option.

You have to come up with something creative, such as building it with HTML in a custom collection, or as @ThinhDinh suggested, use some CSS on a choice component within a custom collection.