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
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
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
As showcased the image is dynamically set based on the top value.
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