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!