Skip to Content
Product Information
Author's profile photo Daniel Davis

Start Your scripting Journey The Easy Way With SAP Analytics Cloud | Part One

The Journey

I’ve been using SAP Analytics Cloud for almost 8 years and like many of you, have stuck to stories rather than Analytic Applications as I don’t have a massive coding background. Well if truth be told, I’m old and so my Basic and Pascal skills haven’t had an airing for quite a few years.

With the latest innovations such as the Optimised Design Experience and the ability to add script elements to existing stories, I have now started to ‘enhance’ my visual storytelling. It struck me that rather than go big bang I would take an existing SAC Story and add code where I could get some quick wins without having to write big chunks of code.

Where to start this journey – that was the question and this blog series shows some small code elements that help me to create a more appealing, usable story that can add a little more finesse to the usability experience.

1. Show and Hide Stuff

So one of the elements i always want in a SAC story is the simple ability to Show one element and Hide another – just to swap one display type for another in the same real-estate. With the new Optimised Story type you can do exactly that, quickly and simply.

One difference of the Optimised Story is that each element you add to the page gets a default name and if you look in the Story Outline you’ll see all the objects you’ve added to your story.

Here we can see a simple story with 1 page added (Page_1) and two objects, (Chart_1) and (Table_1). You can see from the image we’ve got a simple bar chart and a table that have the names that SAC assigns as default. Currently they take up real-estate on the page that perhaps, could be used better. Maybe I want to allow the user to visibly switch between the chart or the table, but not both.

Simple ask and simple code so let’s see what we need to do to toggle between one and the other. We’re going to use a button control to switch between the two items – the logic (not the actual code) will be…

// This is not code, just the logic the code will follow:

    IF Chart is visible, 
            Hide Chart & 
            Show Table 
            Show Chart & 
            Hide Table
    The End

In practice I’m going to add a Button and add the code to the onClick() button script. Access to the button scripts is via the Outline or right-mouse clicking the button and selecting the onClick script.

Add the following code:

// 	console.log("Check what's visible and switch");

if (Chart_1.isVisible())
else {

1st line is a comment – SAC uses the “//” notation to indicate the following line is for commentary only. We then have the IF condition to check if Chart_1 is visible? If it is hidden we show it and hide the table. If is is not visible the reverse is set, so each push of the button will then toggle what is displayed. Close, Save and View the story and you’ll now see a button that toggles the visible elements of the story between the chart and the table.

Simple ask, Simple code, Simple solution…

2. Add Columns / Rows to SAC Table

My second useful tip shows functionality that I want in all my stories. It allows a user to Add, Change or Remove measures and dimensions from an existing table at runtime. The benefits mean that I don’t have to grant Edit permission to a story but still allow users to change the table and save a bookmark to the new structure. I still want users to interact with the story wherever possible but don’t need to entire user community to have edit capabilities.

So let’s start with a New Button on the same story as the above example, we can name this button “Edit Table” and open the onClick() script and add the following code:

// Use openNavigationPanel to allow the user to add dimensions at runtime


That’s all, just one line of code making sure the “Table_1” object is the same as the name of the table in your story. Save, Close and View the story and we now have a button that, when pushed gives you Available Objects panel for the selected table.


The OpenNavigationPanel() function tells the application to open the panel next to the table and the argument “expanded:true” means that both panels are open. If you change that to “expanded:false” open the right hand panel will open. The following video shows both behaviors:

Again a simple ask, simple code so a simple solution – we don’t need much code to get the desired functionality, here it’s just the one line.

As a side item I tend to use the Button object to attach my scripts, but I don’t tend to label the buttons. Instead I use an icon image on the button and a tooltip to explain the usage of the button action. Also the choice of icons is always the same, i don’t chop and change – each time a colleague sees a story they should know that this button does a specific task – always.

So choose your icons carefully, select the properties for the button, clear/remove the Text property and add instead add text to the Tooltip:

So a simple start to this series, we’ve learnt that you can control the visibility of objects with a couple of lines of code and we’ve now seen that users can change existing tables with just one line of code as well. There are many examples of small code segments having big changes to ‘usability” and in the coming week’s i’ll add to this series showing more simple techniques.

The Blog will continue in Part Two of this occasional series – i’ll add that as soon as I can.

Happy Coding


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Iver van de Zand
      Iver van de Zand

      super useful ...... I went through this journey myself; Apart from being a lot of fun, scripting can absolutely be learnt by anyone.

      Author's profile photo Juan Carlos Lazaro
      Juan Carlos Lazaro

      Simple, yet super powerful. Standard features never cover all the use cases, and using simple scripting can really make a difference.

      Author's profile photo Andre Rodrigues
      Andre Rodrigues

      The NavigationPanel button yet so simple is a really game changer! super good!

      Author's profile photo Daniel Davis
      Daniel Davis
      Blog Post Author

      Part 2 coming soon...

      Author's profile photo Francisco Tarancon Rossetti
      Francisco Tarancon Rossetti

      Thanks for sharing this simple but useful tips, looking forward for part 2 🙂

      Author's profile photo Daniel Davis
      Daniel Davis
      Blog Post Author

      Should be start of next week

      Author's profile photo Diego Curci
      Diego Curci

      Thanks for sharing.

      I was wondering if a user will be able to save the changes.

      I'm assuming and hoping that that's a hard No.

      Looking forward to part 2.



      Author's profile photo Daniel Davis
      Daniel Davis
      Blog Post Author

      That's up to the Admin of the SAC tenant - SAC gives you the option of View, Edit, Full Control and Custom when it comes to story access. If you have View access then that's all you can do, no SAVE permission so that won't be a problem.

      On the flip side you can allow those VIEW users the ability to SAVE A BOOKMARK (in SAC not the browser) and this gives the user the ability to save the re-open the story with filters etc set the way they were set when the bookmark was saved.

      Check out the Bookmarks help within the SAC Help Portal.



      Author's profile photo Diego Curci
      Diego Curci

      Thanks again, Daniel.

      We have several demos of our SAC solution with "major" coding in it and this very simple line of code definitely hits the spot in terms of what rights we were looking to grant the end users without compromising security.



      Author's profile photo Vishwanath Rajgopal
      Vishwanath Rajgopal

      Thank you for sharing this.

      Can we use something similar to Point 2 - Add column/row for Charts. An option to change the dimension on charts as they want ?




      Author's profile photo Daniel Davis
      Daniel Davis
      Blog Post Author

      At the moment - no, there is no 'panel' available within the Chart API that works like the Table API. I've reached out to product group for an update and will post a response here when I get one. In the meantime you can of course use a Measure Input Control to 'swap' measures within chart(s).

      Alternatively you can use the Scripting API to 'change' from one measure to another using the:

      // Add M1 and Remove M2 from the chart Chart_1

      I'll post a reply from Product Group as soon as I get one.


      Author's profile photo Vishwanath Rajgopal
      Vishwanath Rajgopal

      Thank you..will try it out

      Author's profile photo Hadar Kuint
      Hadar Kuint

      Amazing. thanks.
      I used a button to hide all the charts with an X measure. and show all the charts with the Y measure. \now I'll have to fix it 🙂 to use this better version of code...