- SAP Managed Tags:
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 piece continues from Part Three where I show small code elements that help me to create a more appealing, usable story that adds a little more finesse to the standard story interface. Now in my 4th part of the series we look at a couple more simple scripting elements to help you make your stories more engaging.
But before we look at a couple more small chunks of code to enhance your stories, I thought it would be good to share some resources that I've found invaluable on this journey. Let's start with some free education in the basics of scripting within SAP Analytics Cloud. I found a very nice course on learning.sap.com that give you the basics of scripting within the new Optimised Story environment.
You can find the link to the course below but for guided learning I found this to be a most excellent resource.
Once I started this course there were certain concepts I was still struggling with because I don't have a scripting background - now I was stuck !! The solution was to learn the basics of JavaScript as well as the specific application within SAC. So, what to do? Well, the answer was pretty simple as there are a host of excellent resources available to teach yourself JavaScript.
The one I settled on (in no way affiliated to SAP) was a course entitled "JavaScript - Perfect for Beginners" from the code-basis.com website. Links to the specific course are here:
So that's a couple of very useful training courses I've now taken but there are a few more links that I think are worth sharing giving some help on the method and functions available within the SAC environment:
- Scripting (Optimized Story Experience and Analytics Designer)
- Optimized Story Experience API Reference Guide
- Analytics Designer API Reference Guide
One more link that I've found useful explains the various conventions in object naming and as you'll come to see everything now needs a name - pages, objects, scripts, functions, you name it... and you'll need to name it.
So, what little scripting chunk are we going to look at in this instalment? Well today I thought we'd start with a quick Measure Swap on a simple chart - Like a Measure Input control but done via scripting to show the theory behind reusing a chart but changing a specific element via the coding API.
So if you've used SAC for any length of time you'll have seen that you can create a Measure Input Control or a Dimension Input Control in a story. These controls allow a user to swap measures or dimensions in a chart by simply selecting the desired items from a list added to the story.
This does not change with the new Optimised Story option, but I thought it would be a good introduction to changing chart elements using scripting. Also, once you've understood changing Measures or Dimensions via scripting other chart elements follow similar patterns.
So, imagine for the sake of this example we have a story, and that story contains a chart. The chart's data model has 3 different dimensions and 3 different measures.
Measures:
- Total Revenue (TR)
- Total Costs (TC)
- Units
Dimensions:
- Categories
- Countries
- Brands
Charts:
- Chart_1
For this example, we will create the following story with a column chart containing 1 measure and 1 dimension. Then we'll add a couple of buttons to swap measures and swap dimensions so you can see the steps required. First the video showing the completed exercise - the chart on the left is the one we'll use for the scripting, the chart on the right uses Input Controls to swap those items around.
So, as you can see from the above illustration you can control what Dimension or Measure is displayed in a chart at the push of a button. But what is in that script exactly - well the logic is pretty simple:
// These are the steps and not the actual code
Work out what is the current measure in the chart
Remove the existing Measure from the Chart
Add the new Measure to the Chart
In practice you can use the Ctrl-Spacebar hint to 'show' you the options as you start to write the code but let's look at the actual code behind the 1st button:
// Remove the current Measure from the chart and add the new Measure
// Create a variable to hold the current chart measure using the getMembers() function
var TheCurrentMeasure = Chart_1.getMembers(Feed.ValueAxis);
console.log(TheCurrentMeasure[0]);
// Remove that measure so that the chart has no measures added to it
Chart_1.removeMember(Feed.ValueAxis,TheCurrentMeasure[0]);
// Add the desired measure to the chart to replace the measure removed above
Chart_1.addMember(Feed.ValueAxis,"[Account].[parentId].&[TR]");
So, what is each line of the code doing? Well as you should know by now SAC comments are preceded with the // characters so lines #1 and #3 are comments. Line #4 creates a variable called TheCurrentMeasure and is assigned the value by using the getMembers() function and the Feed.ValueAxis enumeration.
Put simply it gives you a list of the measures applied to the chart. Now the function actually returns an array with a member per measure but here we only have one measure in the chart. That means that we only have 1 element in the array. You can see the array values by looking at the browser console and in this case I print them out in Line #5.
We've created a variable, populated it with the existing measure applied to the chart and now we wish to remove that measure before we add the new one. Line #8 uses the removeMember() function to remove the specified Feed Element - in this case the ValueAxis and we remove it with the 1st element of the array.
Chart_1.removeMember(Feed.ValueAxis,TheCurrentMeasure[0]);
Note: we use TheCurrentMeasure[0] to signify the 1st element of the array - remember the array contains all the measures that were applied to the chart so could contain more than 1. You can use a Loop construct to loop through all the members if there are more than one but here, we just use element [0].
OK almost done, we've removed the measure from the chart and so the final piece is to add a new measure it its place. For this we use the addMember() function to add a measure called [TR]:
Chart_1.addMember(Feed.ValueAxis,"[Account].[parentId].&[TR]");
That's it, we find the measure, remove the measure, and then add the measure that we wish to put in its place. It's the same as a Measure Input Control but shows the capabilities and flexibility of the Scripting API. We can of course do exactly the same thing with Dimensions with the following code:
// Create a variable to hold the current Dimension applied to the chart
var TheCurrentDimension = Chart_1.getDimensions(Feed.CategoryAxis);
console.log(TheCurrentDimension[0]);
// Remove that Dimension from the chart - it's array element [0]
Chart_1.removeDimension(TheCurrentDimension[0],Feed.CategoryAxis);
// Add the Channels dimension to the chart
Chart_1.addDimension("Channels",Feed.CategoryAxis);
Very similar in design to the example for measures but using the getDimensions(), removeDimension() and addDimension() calls to facilitate the code.
Some of you may have noticed that even with the scripting example the titles of the charts change as you change the Dimension or the Measure. Currently there is no scripting API to alter the chart title (don't get me started) but you can still get the title to change dynamically.
You simply add dynamic text to the chart title - in this case you can add Accounts & Dimensions into the chart title using the Add >> Dynamic Text and away you go.
Format appropriately and every time you change the measure or dimension with the script API the titles will change as well.
Happy Coding and before I go, here are the links to the previous episodes:
Enjoy and see you in Part Five due out before the end of the year. As always comment if you need clarification and I'll try to respond as soon as I can.
Daniel.
