UserAvatar in UserInfo block - reactive web app

I am currently developing a web application using the reactive framework. In the UserInfo web block (top right corner of the standard screen layout) there is a placeholder for a user picture. I have developed a way for the user to upload, crop and store an avatar picture and an auxiliary table referencing the system User table to store the picture. So far, so good. 

In order to display the picture, I try using the UserAvatar widget that comes standard with Outsystems UI. I have added an aggregate to fetch the picture from the database. The issue is that the picture seems not to be cached and is being picked up every time the user navigates between pages, leading to a very unsexy flickering between user initials and the user picture at each screen load.

I have tried with various combinations of cached server actions, fetching on initialise using js (like the username is already picked up in this web block) instead of the aggregate, local variables and the like without any success. Since I cannot use a binary file as a client variable, I don't really know how to persist the picture data between screen loads.

Is there any simple way to resolve this?

Many thanks in advance for any help you can provide!

mvp_badge
MVP
Solution

Hi Mattias Rundberg,

In order to solve your use case, I will prefer the below mentioned steps:


1) Introduce a client variable of data type Text (let's call it UserProfile)

2) At the first load of UserInfo block, I'll convert the user profile pic binary Value into Base64 string and store the Base64 (text) value in the newly created Client Variable (i.e. UserProfile)


JS Script to Convert Binary To Bas64 String

var toBase64 = $parameters.Binary;
$parameters.Text = window.atob(toBase64);

3) I'll initialize a OnInitialize handler on the UserInfo block, where I'll be converting the client variable UserProfile value to Binary value and assign the converted binary value to the Local Binary type variable which is mapped with Profile Image widget.


JS to convert Base64 String value to Binary

var encodedText = window.btoa( $parameters.Text );
$parameters.BinaryData = encodedText;


Please check this: https://sbsam.outsystemscloud.com/ReactiveTestApp/Home?_ts=637196037517109912


Hope this helps you!


Thanks & Regards,

Benjith Sam

Awesome, this worked perfectly!


Thank you so much, Benjith! I implemented the Binary --> Base64 --> Binary conversions through creating the JS blocks in resuable functions so that I just could use an assign for the local binary variable in the UserInfo block. I imagine this type of function might be useful in other places as well!

mvp_badge
MVP

Mattias Rundberg wrote:

Awesome, this worked perfectly!


Thank you so much, Benjith! I implemented the Binary --> Base64 --> Binary conversions through creating the JS blocks in resuable functions so that I just could use an assign for the local binary variable in the UserInfo block. I imagine this type of function might be useful in other places as well!

Hi Mattias,

Thank you for sharing the implemented approach. Happy to hear that the solution helped you :)


Thanks & Regards,

Benjith Sam

Hi all! Is there a way to store the user picture in another variable type, in order to avoid the flickering effect? Would local storage be a good option in mobile?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.