Skip to Content
Technical Articles
Author's profile photo Felipe Brigo

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


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.



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.



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.




  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.



  1. 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:



  1. 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:


var len =  Table_1.getDataSource().getDataSelections().length;
var url_image = Table_1.getDataSource().getDataSelections()[0].Link;
if (len > 1) {
} else {


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:




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:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Diogo Martins
      Diogo Martins

      Thanks for this blog Brigo, it was exactly what I needed.

      Author's profile photo Samuel Gonzalez
      Samuel Gonzalez

      Hi Felipe, Do you know if it possible "draw a polygon" into the image in order to click on it or use overmouse to get info?

      I mean I try to do, is hightligth some espace of an image and the interact whit it, to get some info.

      Like when in a mall, you hace the map of te entire place in a digital kiosk and you touch the screen to know something about the local of you interest


      Author's profile photo David Badillo
      David Badillo


      Thank you for sharing. However, it doesn't work for me, not even the setVisible function without the entire code.

      Additionally, you forgot to explain that we need to select "script > onResultChanged" to add the code.

      Do you know if there have been any updates since July?