How to cache App Logo in Reactive Web Apps

Hello,


I'm trying to create a Reactive web theme for different applications. The apps are designed in a white-label fashion and the requirement is to display the client's logo (per tenant) or otherwise display a generic one.

The problem I'm facing is that I put the required logic in an ApplicationTitle webblock, but it seems the client's logo is always fetched from the DB, causing the logo to always flicker when screens are refreshed.

Is there a possibility to cache the results of the data action that fetches the binary file of the logo, or other smart ways of dynamically displaying a logo in the applications without having that flicker everytime screen is refreshed?


Regards,

Bogdan

mvp_badge
MVP
Solution

Hi Bogdan,

I had addressed the same case in one of the old posts.  Refer to this link - Forum Post Link


Steps To Follow (a bit more precise):

1) Define a Client variable of Text data type (for e.g., TenantLogo)

2) Define an OnInitalize event handler to the ApplicationTitle block 

3) In the ApplicationTitle block scope, introduce an Aggregate (e.g., GetTenantLogo) with Source entity which holds the Tenant Logo image

   - Set the Aggregate Max.Records value to 1

   - Set the Aggregate Fetch property value to Only on demand

4) Within the ApplicationTitle block, OnInitalize event handler flow, check whether the client variable is "" (empty/blank) value

   - If the TenantLogo client variable is empty, then refresh the GetTenantLogo Aggregate (Refresh Data node) and pass the Logo image binary to the JavaScript node to convert it to Base64 String and store the output base64 string value to the client variable, i.e. TenantLogo

var toBase64 = $parameters.binary;
$parameters.base64String = window.atob(toBase64);

  - In case the TenantLogo client variable contains base64 string, convert the base64 string to binary and assign it to the Local binary type variable, which is mapped to the Tenant Logo Image

var encodedText = window.btoa( $parameters.base64String );
$parameters.binaryData = encodedText;


I hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith,


This sounds like something that would work. I will definitely try it and come back to you if anything is not working.


Thanks for your help,

Bogdan

mvp_badge
MVP

I hope it helps!

Glad to help you :)


Kind regards,

Benjith Sam

Hi,

I don't know anything about caching binaries from the database by outsystems, but maybe a couple of alternative suggestions :

1) is the flickering made worse by the fact that first, for a brief time, the default logo is shown, before the tennant-specific logo comes back from the server ?  If that's the case, just put an IF datafetched around the image, won't speed up the retrieval, but might look less awefull

2) Maybe experiment with storing the logo on a file server rather than in the database, i would imagine browsers will be smart enough to cache that.

Dorine

mvp_badge
MVP
Solution

Hi Bogdan,

I had addressed the same case in one of the old posts.  Refer to this link - Forum Post Link


Steps To Follow (a bit more precise):

1) Define a Client variable of Text data type (for e.g., TenantLogo)

2) Define an OnInitalize event handler to the ApplicationTitle block 

3) In the ApplicationTitle block scope, introduce an Aggregate (e.g., GetTenantLogo) with Source entity which holds the Tenant Logo image

   - Set the Aggregate Max.Records value to 1

   - Set the Aggregate Fetch property value to Only on demand

4) Within the ApplicationTitle block, OnInitalize event handler flow, check whether the client variable is "" (empty/blank) value

   - If the TenantLogo client variable is empty, then refresh the GetTenantLogo Aggregate (Refresh Data node) and pass the Logo image binary to the JavaScript node to convert it to Base64 String and store the output base64 string value to the client variable, i.e. TenantLogo

var toBase64 = $parameters.binary;
$parameters.base64String = window.atob(toBase64);

  - In case the TenantLogo client variable contains base64 string, convert the base64 string to binary and assign it to the Local binary type variable, which is mapped to the Tenant Logo Image

var encodedText = window.btoa( $parameters.base64String );
$parameters.binaryData = encodedText;


I hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith,


This sounds like something that would work. I will definitely try it and come back to you if anything is not working.


Thanks for your help,

Bogdan

mvp_badge
MVP

I hope it helps!

Glad to help you :)


Kind regards,

Benjith Sam

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