Dynamical change images without using nested case statements

[former_member665845]

Introduction :

This blog post explains how to dynamically change images based on custom use cases and requirements leveraging the ability to read custom css files in Lumira designer

Problem :

For Example, let us consider an scenario where user wants to see top sold product out of all the available products as an image for making the dashboard more interactive. We would normally approach this requirement by adding N number of  image components and controlling the visibility or having one image component and controlling the image that is being shown using an nested if statement.

This requirement can be solved using a much simpler method

Solution :

Step 1 : Getting the right data

Based on our requirement we need to know the top sold product out of 10 available products. This can be archived by using a simple rank function to obtain the Top 1 sold Product

For this example we have taken Native HANA modelling approach , The calculation view returns the Product Name and the Sold Value .Refer to the below figure showing the input data and out put data

 

Input Data :



 

Output Data :



Step 2 : Getting the Images Ready

We have collected images corresponding to each product available in the input data.

Lets Convert these images into base64 data-URIs for embedding as URLs directly into  stylesheet background-images.

It should look something like this



 

We can convert the image to base 64 using one of the many online resources available

I used https://websemantics.uk/tools/image-to-data-uri-converter/ to get the job done

Now here is the trick , Name the CSS Class of each of the images using the Product ID.

You should have 17 CSS Classes now in your custom CSS file

Step 3 :

Mapping the Image to the Data

To Represent the information I have designed a simple application with 4 text components

• Text 1 - For Image


• Text 2 - For Tile Title


• Text 3 & Text 4 - Product Name and Value

The application design is shown in the below image



Now comes the coding part , The goal is archived with just a few lines of code as shown below

 



Output :



As showcased the image is dynamically set based on the top value.

 

Conclusion :

This method avoids the use of many complex case statements and helps in achieving certain requirements as stated above.Some other use cases of the above blog post is

• Dynamically showing the Profile Photo of Top performer in a Team in a Human resources Dashboard


• Showing a personalized profile pic corresponding to the Login user