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!

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

Solution

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!

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