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!
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!
Mattias Rundberg wrote:
Hi Mattias,
Thank you for sharing the implemented approach. Happy to hear that the solution helped you :)
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?
Today I published an article on how to store the profile picture in local storage and avoid unnecessary data traffic: https://medium.com/@sebastian-krempel/profile-pictures-in-outsystems-the-traffic-saving-way-5c5f727b1253
Hope this answers your question.