Im able to create a row of icons that can link out to external sites using html and css only.
However, I am interested in doing the same thing but using button components so I can get additional actions other than open link.
Anybody have any ideas on how to achieve?
use CSS images with actions… not buttons, much easier!
Like add 3 separate image components and use css to align?
yes… or just place the image link directly into CSS…
Are the number of icons fixed?
For something like that, I think I’d just use an Inline List, and use Hero Icons as the images.
Relatively simple, little or no CSS required.
There is a maximum number of icons, but could range from 0-4 depending on if the user adds the corresponding link. Thus the horizontal list would be dynamic.
Also would like unique actions per icon as not all will open an external link.
I can try and see if an inline list will work. Thanks!
you can replace image links using a template column… this way, you have more freedom arranging your buttons… the inline list has limitations… also it might not work well with CSS on many devices or OS
Ill try tomorrow and report back my results. Thanks for the suggestions!
Inline List using a tiles layout can have up to 4 side by side, so that would work out.
Only thing is if you have less than 4 then they’ll be left aligned, which might look a bit wonky.
But it would probably be possible to get them centred with a bit of CSS. Of course that would need to be dynamic, taking the number of items into account - so could get a bit fiddly.
I wad able to use a Title Component to make it look exactly like one of the above icons, however still lost on aligning multiple Title Components together.
And yes the Inline list option didnt work for this use case.
Just out of curiosity, what was the challenge with the Inline List?
Was it just not being able to get them centred, or something else?
Basically, if I have up to 4 List Items, make the Inline List Display 4 items Horizontally, filter the list based on if Link provided and only 3 items have links, then the list is no longer centered.
In addition, I cant assign individual actions to each List Item as they all act the same. I would like multiple components with Actions (title, image, rich text, etc) that are aligned horizontally. This way, 1 icon can open a form, another opens an external link, another opens compose email, etc.
As long as you have a value in the table that is the source of your screen that indicates if you need 3 items it 4 items, then you could use that as a visibility condition to show either a 3 wide list or a 4 wide list.
You can definitely assign individual actions to each list item. You just need a column value in each list item row that you can use with an IF condition in a custom action to identify which action you want to happen when you click on an item in your list.
mmm, I can’t help with that, but one of the CSS gurus might be able to.
yeah you can. Use a custom action with a separate conditional branch for each list item.
oooh, nice trick 
and so obvious, haha
Ah perfect, that works! Just need to figure out the css to reduce image size of each. Interestingly enough. I have a Hero Icon at 50px and use circle image size yet image is quite large. Reducing the Hero Size doesnt seem to effect the Inline Image Size. But this is definitely putting me on the right track!
Bottom is the new inline list with custom actions for each icon. Nice!
Question,
I have a Restaurant Sheet with all their detail information.
To create this new icon Inline List, I created a new Sheet which has the HeroIcons and Names.
Within my App, I am using the Restaurant Sheet with an Inline List pointing to the Icon List. However, all the actions are based on the Icon List. Any ideas on how to structure this Icon Inline List so its related to all the details in the Restaurant Sheet?
Using the above Screenshot, I need Website to go to that specific restaurant’s website. A series of Temps and ITEs on the Restaurant Sheet?
Read through this thread. It should be a very similar setup. If you have questions, let me know.
Thanks I reviewed your suggestion in the linked post.
I was able get it to work for the most part .
However, if someone goes to the Restaurant’s site via Deep Link, the Set Column action is bypassed and not triggered to set columns, making the USC’s not updated.
