How to Create Dynamic Images in SAP Analytics Cloud Story using Script

[felipebrigo]

Introduction:

Dynamic dashboards are becoming increasingly popular in the business world as they provide a way to visualize data in real-time and make informed decisions. In this blog we will dynamically change static images depending on user selection/filter.

It will help the user experience when you need to represent through images some products, categories, personal photos, etc.

 

Prerequisites:

In this scenario, we will use SAP Datasphere to bring all information needed through a local table, however it can be stored on an SAP ERP, Hana Cloud or other source which can be connected in SAP Datasphere.

After connect SAP Datasphere tenant to SAP Analytics Cloud (SAC) and all pictures stored on Google Photos server the procedure can be performed.

 

Note:

We will use scripts to hide/show pictures and tables on the story, thus Story Mode in SAC must be Canvas with Optimized Design Experience to allow us to control through script a specific container behavior.

 

 

Procedure:

1. 
   

   Firstly, we will add an image widget in our page. You do not need to configure or add any picture in the widget. It will be added by script later.

   
   

 

 

2. 
   

   You will need to add a simple table to get the link where to find the related picture dynamically. Take care of getting the raw address of the image to be shown, otherwise the script will not work!

   
   

 

Excel Table image example of what we are loading into DataSphere:

 

When you add a table, you have to choose the space and dataset/model in Datasphere that your table has been created to link each other.

 

 

Now you should have something in your story like this:

 

 

3. 
   

   We will add an input control to story. It will help us to filter the table and show a unique line related to our data.

   
   

 

 

Note that you must choose Individual Selection on Settings for Users setting filter.

 

Let´s start our script:

 

Our script will be written in the table, to change canvas dynamically depending on filter chosen.

To access table script editor, you need to select the widget and click on the fx button. After that you need to select the event onResultChanged.

 

 

Then in the script area you will write down the following script in JS-based language:

 

Table_1.setVisible(false);

var len =  Table_1.getDataSource().getDataSelections().length;

var url_image = Table_1.getDataSource().getDataSelections()[0].Link;

if (len > 1) {

	Image_1.setVisible(false);

} else {

	Image_1.setVisible(true);

	Image_1.setImage(url_image);

}

 

In this script, we are setting the Table_1 as invisible and creating 2 variables: One variable called “len” will get the length of our table to check whether user selected all teams in the input control or only one team, and another variable called “url_image” to get the link in the position [0] and set the image to our canvas later on.

After that we are using a conditional statement if/else to set the canvas Image_1 as visible or not and which picture (link) must be shown.

Finally, we will add a console.log to show how parameters is read by your browser.

Now, the script page should be like this:

 

 

To better User Experience, you can set Table_1 and Image_1 as “Visible = false” in the page script area on the event onInitialization.

 

The result will be like this:

 

 

Conclusion:

Customizable widgets in optimized stories can provide a significant advantage when there is no possibility of native execution in SAC, as per customer request.

The language used is based on JavaScript, which makes programming more user-friendly and flexible. This opens up a huge opportunity for advanced widgets customizations and the user experience as a whole.

Please check out the SAP documentation for scripting-based and its capabilities:

https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html