Colorful Avatar - Initials Placeholder Profile Image

AppSheet Tips & Tricks
1

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 Likes
2 
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)
)
)
10 Likes
3

2X_4_4ff5a6ca72fbdd1eed0cddb65e54a1221433586b.png
2X_4_4ff5a6ca72fbdd1eed0cddb65e54a1221433586b.png358Ă—666 37.3 KB

6 Likes
4

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!

5 Likes
5

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
9 Likes
6

This gives me a similar idea, but to skip the EnumList and directly randomize the hex value…

1 Like
7

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

3 Likes
8

Of course… And for good material design you want a complimentary palette…

1 Like
9

Oh,I have … different … ideas for it.

3 Likes
10

Bahahaaa, well hook it up, i like ideas

1 Like
11

If I get it working, I’ll let you know.

2 Likes
12

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:

[Just for fun ? Or any use case? - Create users avatar!](https://community.appsheet.com/t/just-for-fun-or-any-use-case-create-users-avatar/20010) Tips & Tricks ?

Inspired by https://getavataaars.com/?accessoriesType=Kurt&avatarStyle=Circle&facialHairType=BeardMedium&topType=LongHairBob I generated another sample. https://www.appsheet.com/samples/Sample-App?appGuidString=962e88e4-80da-4e1e-99bc-3148ce4496ba Just for fun now. Feel free to copy app and add to yours.

@Bahbus For Random HEX i was using this expression
"https://ui-avatars.com/api/?background=" & RANDBETWEEN(000000,999999) & "&name=" & ENCODEURL([UserName])

3 Likes
13

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.

2 Likes
14

I also use this approach. This tip is nice but I would still use the old approach.

2 Likes
15

What’s the “old approach?”

1 Like
16

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

1 Like
17

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)

3 Likes
18

Some users in this area have limited internet speed. So, less cosmetic is sadly required.

2 Likes
19

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.

20

Mine doesn’t increment. It’s just a simple RANDBETWEEN 1 and 16

2 Likes