Action button "ish" texts or Text button "ish" button icon?

[Koichi_Tsuji]

To put a little different taste and flavour to detail view, this can be additional UI and component as action button ? Not sure how to “name” those, but we can place any text you want and make it an action button to “do” something you want.

Sample App

Just using UNICODE text and place to the cell value. Then using the Appsheet format to large the size and change the color. Create action and place it as INLINE to attached to those text fields.
Inline action button is hidden by giving white color of #ffffff hex code to action icon.
To place those text horizontally centered, place the icon on the texts by format rule and samely hide it by giving white color.

There are bunch of unicode text generator, but i found this is useful.

https://fsymbols.com/generators/smallcaps/

[Fabian_Weller]

This is awesome and very creative. Thank you for sharing this @tsuji_koichi

Please allow me to add some thoughts

You can delete the Action icon. I think you don’t need it.

You also don’t need the Icon in Format Rules.
Just set the Highlight Color to #ffffff00 or #0000 which will make it transparent.

Transparency / Opacity in Format Rules Tips & Tricks 💡

You can use Hex colors with transparency / opacity in Format Rules. This one will look like this: [image] [image] If you add the Opacity value after the Hex value, it looks like this: [image] [image] This is also working for Actions: [image] And for Map Pins: [image]_____[image] Hex Opacity Values 100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00

Otherwise you will see the icon if you long click with your mouse:

If you have a Centered Detail view like you do, you don’t even need the Highlight Color. Because the Text will be already centered.

[Koichi_Tsuji]

Thanks for your feedback as always. I made the icon colors transparent on sample app as well.

[Mike_T]

This is a great “trick”. Everything works as advertised except for the removing the icon doesn’t center the text. It still appears to leave space for the icon.