All, wanted to share this simple way to bring an immersive experience to your app users without placing too many expectations of them. I have pre-defined 16 theme colors in an ENUM table, and when a person is added to the app they have a fixed column with an initial value set to RANDBETWEEN(1,16).
IF(
ISNOTBLANK([people_avatar]),
[people_avatar],
CONCATENATE(
"https://ui-avatars.com/api/?rounded=false&color=ffffff&uppercase=true&length=3&font-size=.4&size=256&background=",
SELECT(ENUM[enum_text],
AND(
[enum_REF_enum]=ANY(COMPANY_ROOT[company_theme]),
[enum_order]=[_THISROW].[people_theme_num]
)
),
"&name=",
LEFT(UPPER(INITIALS([people_fullname])),3)
)
)
This is awesome!
I am currently using the โNo Image Availableโ approach. But this fits todays standard and is SOOOO much nicer.
Thanks for sharing!
I also use this approach. This tip is nice but I would still use the old approach.
Whatโs the โold approach?โ
โNo image availableโ like what JB commented, Iโam using a static hosted image. I personally try to keep minimum expression processing.
Thanks for sharing this useful tip.
Oh, yeahโฆ
Done that before as well. There is for sure a line between processing weight and UX. I totally respect keeping the processing down! (Always a good decision)
Some users in this area have limited internet speed. So, less cosmetic is sadly required.
I might as well go the rest of the way and include my color themesโฆ
I got these from the paint section at Lowesโฆ
COLORTHEME | ENUMLIST | |||
---|---|---|---|---|
GLOBALSPICE | HEXCOLOR | 1 | CBA97E | |
GLOBALSPICE | HEXCOLOR | 2 | D59858 | |
GLOBALSPICE | HEXCOLOR | 3 | AC6B53 | |
GLOBALSPICE | HEXCOLOR | 4 | B1A584 | |
GLOBALSPICE | HEXCOLOR | 5 | 9C7A56 | |
GLOBALSPICE | HEXCOLOR | 6 | 907D66 | |
GLOBALSPICE | HEXCOLOR | 7 | 676064 | |
GLOBALSPICE | HEXCOLOR | 8 | 7C3655 | |
GLOBALSPICE | HEXCOLOR | 9 | B85444 | |
GLOBALSPICE | HEXCOLOR | 10 | 5F4B3F | |
GLOBALSPICE | HEXCOLOR | 11 | 5C9598 | |
GLOBALSPICE | HEXCOLOR | 12 | 4E4247 | |
GLOBALSPICE | HEXCOLOR | 13 | 6D7645 | |
GLOBALSPICE | HEXCOLOR | 14 | A6613C | |
GLOBALSPICE | HEXCOLOR | 15 | 48423C | |
GLOBALSPICE | HEXCOLOR | 16 | 017680 | |
COLORTHEME | ENUMLIST | |||
JH5THEME | COLOR | 1 | 4F4842 | |
JH5THEME | COLOR | 2 | B4B05A | |
JH5THEME | COLOR | 3 | ABA39A | |
JH5THEME | COLOR | 4 | 598C74 | |
JH5THEME | COLOR | 5 | 83AFBC | |
JH5THEME | COLOR | 6 | FBCB78 | |
JH5THEME | COLOR | 7 | 8BA7BB | |
JH5THEME | COLOR | 8 | D9766C | |
JH5THEME | COLOR | 9 | D67C56 | |
JH5THEME | COLOR | 10 | 7BB1B2 | |
JH5THEME | COLOR | 11 | 498555 | |
JH5THEME | COLOR | 12 | 98B092 | |
JH5THEME | COLOR | 13 | 506B84 | |
JH5THEME | COLOR | 14 | E6955F | |
JH5THEME | COLOR | 15 | C0B2A2 | |
JH5THEME | COLOR | 16 | A42E37 | |
COLORTHEME | ENUMLIST | |||
FORWARDAPPEAL | COLOR | 1 | 2F3D4C | |
FORWARDAPPEAL | COLOR | 2 | 7FAC6E | |
FORWARDAPPEAL | COLOR | 3 | 015D87 | |
FORWARDAPPEAL | COLOR | 4 | C4633E | |
FORWARDAPPEAL | COLOR | 5 | C1E6DF | |
FORWARDAPPEAL | COLOR | 6 | 01A0B8 | |
FORWARDAPPEAL | COLOR | 7 | 90979B | |
FORWARDAPPEAL | COLOR | 8 | F1D3DA | |
FORWARDAPPEAL | COLOR | 9 | 353337 | |
FORWARDAPPEAL | COLOR | 10 | ED939D | |
FORWARDAPPEAL | COLOR | 11 | 624977 | |
FORWARDAPPEAL | COLOR | 12 | BFC9D0 | |
FORWARDAPPEAL | COLOR | 13 | C0AFD0 | |
FORWARDAPPEAL | COLOR | 14 | 99324E | |
FORWARDAPPEAL | COLOR | 15 | 22657F | |
FORWARDAPPEAL | COLOR | 16 | CE6C91 | |
COLORTHEME | ENUMLIST | |||
COASTALCOOL | COLOR | 1 | BDC0A0 | |
COASTALCOOL | COLOR | 2 | 91AF9D | |
COASTALCOOL | COLOR | 3 | 7DC1CB | |
COASTALCOOL | COLOR | 4 | B4CCC9 | |
COASTALCOOL | COLOR | 5 | A7A094 | |
COASTALCOOL | COLOR | 6 | CFC291 | |
COASTALCOOL | COLOR | 7 | 75B9AE | |
COASTALCOOL | COLOR | 8 | A6D0D6 | |
COASTALCOOL | COLOR | 9 | BEC3BB | |
COASTALCOOL | COLOR | 10 | CBB584 | |
COASTALCOOL | COLOR | 11 | 98B092 | |
COASTALCOOL | COLOR | 12 | 988977 | |
COASTALCOOL | COLOR | 13 | C8BD98 | |
COASTALCOOL | COLOR | 14 | 9FA694 | |
COASTALCOOL | COLOR | 15 | 6B8CA9 | |
COASTALCOOL | COLOR | 16 | B2C8D8 |
This gives me a similar idea, but to skip the EnumList and directly randomize the hex valueโฆ
If you are including Text as Grant did, you have to be careful which colors are used so they donโt obscure the displayed text value
Of courseโฆ And for good material design you want a complimentary paletteโฆ
Oh,I have โฆ different โฆ ideas for it.
Bahahaaa, well hook it up, i like ideas
If I get it working, Iโll let you know.
Thanks for sharing thisโฆ I really like the idea of having โThemesโ, & using the complementary palletโs (like youโve already done) really gives them a professional look. I remember looking at this post before & briefly trying it out but I got stuck and couldnโt implement it. I thought then that I would let someone else ask the questions & I would come back later & do itโฆ
Unfortunately that didnโt happen so at the risk of sounding sillyโฆ could you elaborate a bit more on how to construct the โENUMโ table?
I see you have the columns [enum_REF_enum] , [enum_order] , and [enum_text]โฆ how do I incorporate these with the โCOLORTHEMEโ & โENUMLISTโ?
Thanks
@Brand-It I hope this helps.
Brilliant! That was an excellent tutorialโฆ Thanks so much for doing this. That filled in all the gaps for me.
Some cool stuff going on in the background but well worth it. I think your themeโs really give the Appsheet UX a modern feel.
Iโm going now to watch the video a few more timesโฆ set up my ENUM tableโฆ & give it a go andโฆ (thanks to your video) feeling quietly confident!
Will keep you posted!
For sure, if you need to schedule some time just let me know.
Thank you very much @Grant_Stead this is very cool.
And I would like to come to Steadโs Pizza House
The Tip reminded me of @tsuji_koichiโs Tip:
@Bahbus For Random HEX i was using this expression
"https://ui-avatars.com/api/?background=" & RANDBETWEEN(000000,999999) & "&name=" & ENCODEURL([UserName])
Iโve tried it all. Default standard placeholder images, bots, cats, manipulate your own bots, etc, etc. This seems like the best fool proof and socially acceptable version that still gives us that little bit of texture we need as developers. I initially did the colors randomized. In the end following a color palette is what really sold the whole endeavor and added the final polish.
Thank you for sharing this, @Grant_Stead . Could you show the formula for the โpeople_theme_numโ column please?
Currently, this is the formula I came up with. It works (to create an incremental number that starts at 1 after 16), but feels bloated.
if(
any(select(Users[Color Theme Num],[ID]=maxrow(โUsersโ,"_RowNumber")))<16,
any(select(Users[Color Theme Num],[ID]=maxrow(โUsersโ,"_RowNumber")))+1,
1)
Now that Excel has a let() function to set variables, repeating patterns like this suddenly feels even worse. Sure hope Sheets/AppSheet follow suit.
Mine doesnโt increment. Itโs just a simple RANDBETWEEN 1 and 16
Iโm not surprised I over-complicated it. Thanks again.
I looked at the way my Android phone, contacts were handledโฆ It seems random.
Hi, thanks for putting this together. I got it working in my app. However, it seems to take the Edit Photo button away on the profile edit screen so I cannot update with a real pic.
Any ideas what would cause that?
@FreshSqueezed the expression that creates the final resultant image should be in a virtual column.
@Grant_Stead Awesome. That worked. Sorry I missed that step from the video!
Iโm glad you got it working!