Colorful Avatar - Initials Placeholder Profile Image

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).

15 29 3,280
  • UX
29 REPLIES 29

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.

Ferret
Participant V

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!

Top Labels in this Space