Transparency / Opacity in Format Rules

AppSheet Tips & Tricks
1

You can use Hex colors with transparency / opacity in Format Rules.

This one will look like this:

2X_3_32064c1bf104751fb1d82e6028a486da332f14ac.png

2X_a_a8bbd6727e1d722412f33b1ba73de667000d6d87.png

If you add the Opacity value after the Hex value, it looks like this:

2X_e_ee54fc96c5fe01cf572e426aab803d64af5da89d.png

2X_3_3a6460efdd27575bf607f7b82acdbed55955b55f.png

This is also working for Actions:

2X_2_2d24e9b85c71a663d426db29112222625f274f24.png

And for Map Pins:

2X_b_b832a5c4a0950a594cbba41827af9b66c1d4f916.png

2X_1_1d101b9d404408c468af3ab3350c8caca9d0f7ca.png

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
46 Likes
2

Fabian, how did you find the trick, by accident?
Super awesome finding.

To Appsheet team, I think we should put this to official documentation!

4 Likes
3

Thank you Koichi, I needed a Dummy Pin in a Map that should not be visible.
So I looked in google, if Hex colors are working with transparency

6 Likes
4

Very, very cool.

1 Like
5

Holy dope tastic!
I too need dummy pins… It seems the background XY trick you showed off really needs a starter pin to initiate the backgrounds image… Is that what you’re using this for.

1 Like
6

Fantastic

7

Yes I need the dummy Pin for a XY Background Image. After adding the first real Pin, the dummy gets deleted via an Action.

8

@Adam this is one of the issues we were emailing about. One hell of a workaround that Fabian worked out.

9

Don’t forget to put the pin back if there are no pins remaining… Like if someone deletes all the pins

10

Great input @Fabian.

11

You are right thank you. There are always so many scenarios to consider

1 Like
12

Agreed. I had considered this, and in the end decided to just leave the pin…

1 Like
13

Where do you place the Dummy Pin? 50, 50 or 0, 0 ?

I mean you could also give him an icon via Format Rules like
2X_7_7cfc0adf91c568fdc68922769f22727d0792b471.png

and assign him some infos. When the user opens the XY he can click on the INFO PIN to learn what to do next.
Just some ideas

14

I might like that idea of an info pin…
50, 50 is the best bet for now…

1 Like
15

Can this be used to set the specific color and transparency in the UX Brand: Primary Color?

That would be cool and enable me to match our corporate branding.

Lucinda

16

Adding @nico FYI

17

This is working also with RGB. Thanks you @tsuji_koichi

[Format rule - RGBA can be used for color picker](https://community.appsheet.com/t/format-rule-rgba-can-be-used-for-color-picker/24656) Tips & Tricks ?

This might have been tweeted before, but let me post quickly although possible duplicates. For the color picker of format rule (not theme color), we can use HEX, but rgba color code is also working. Meaning, we are able to set the “transparency” of the color as well. Nice. [image] This generates, [image]

1 Like
18

To make something completely invisible, you can also use the word transparent instead of #000000.

[Automatic star rating based on likes and dislikes](https://community.appsheet.com/t/automatic-star-rating-based-on-likes-and-dislikes/24947/27) Tips & Tricks ?

Instead of making the text white you can type the word transparent which means when grouping data it wont show white text on grey background [image]

1 Like
19

Very nice. Can I do something similar for images. I have a set of records in card view and want the user to focus on a single card at a time so i m looking to grey out the other cards. I can now reduce the opacity of the text but i m interested to do that for the image too.

Ideas? Thank you!

20

Wow, this is nice, thank you very much

2 Likes