Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Nverhoeven
Product and Topic Expert
Product and Topic Expert
3,382
Procrastination is something we all struggle with at times. We all have some task looming over us that we know we should be doing, but still we do everything within our power to avoid it. For some it’s cooking, for others it could be cleaning. For me it is to learn some basic scripting in SAC Analytics Designer to utilise in planning scenarios. For sure not that relatable at the dinner table, but given you've ended up at this page, it's interesting to you!

The upside


Analytics Designer allows for complete control over interactions of the user within an UI which you can tweak in any way you want. This aids you in creating an easy to understand UI for the occasional planner and reduce the amount of potential errors for example.

The downside


Even though many programmers would laugh at the scripting needed, to me, it's still a little daunting. I can create business rules in SAC for planning quite naturally, but actual coding still feels somewhat like the Matrix to me. Therefore, my downside is the steep learning curve for a business educated person like myself.

The use-case (scroll down to the bottom of the page to get a video of the final result)


You are now reading this page so you know I stepped outside of my comfort zone with Analytics Designer, here I'd like to share the story with you so you might do the same. I chose a non-business use-case to make sure I can share my learnings openly. My use-case is to generate a mobile friendly interface for Mountain bike training and lap time tracking. With my to be built app I should be able to manage the following trailside:

  • App 1 - Add trails (Masterdata on the fly in a planning model);

  • App 2 - Input lap times (Guided planning application);

  • App 3 - Analyse my times (Utilise BI capabilities).


Before you start


More Analytics Designer topics around design, responsiveness, etc. could surely be added, I however need to draw the line somewhere and therefore restrict the blog to some major planning capabilities. Furthermore I will assume you have Planning modelling knowledge as well as story building experience. On top of that it should not be the first time you open the Analytics Designer, this is a next step to start using planning functionality as well. If  this is not the case don't worry, there are many great resources to learn from on the community or on the SAC help pages.

The model named “MTB” will be used in this use-case and can be viewed in the image below.


Model used



App 1 - Add trails


Speaking with much more talented UX designers than myself I’ve learned I need to have my user in mind whilst creating my to be application. In this case this is not too hard given it’s me, so what do I want? What I’d like to be able to do is after an MTB run to be able to add a new trail to my app without having to wait to do it at home, so it needs to be mobile. Furthermore, I’m still wearing gloves so as little typing as possible would be appreciated. Below the end result and outline to review, which we will now build.


App 1 - Add trails



Textbox “ID”


Adding a textbox is as simple as drag & dropping it on the WYSIWYG interface of Analytics Designer. You’ll find the text widget under insert. After adding it to your canvas it will have absolutely zero function, we’ll need to define that later on.

Sliders “Height” and “Distance”


Again, there is a pre-built widget for this that you can add to your canvas, in the designer panel you can also add the intended ranges for you to work with. I’ll add one for tracking my distance and one for my vertical meters.

Table “Table_1”


Finally I’d like a table at the bottom so I can make sure I can visually confirm that the trail has been added correctly, again drag & drop and use designer in the same way as in stories. The theme so far is that you can reuse many capabilities from stories directly in the Analytics Designer, but now we want to expand on that in the next step.

Button "Button_1"


This is where the magic happens! Because here we can define all of those hollow objects to actually fulfil a function. Now let me save you some time googling and take the below script and start to decipher it bit by bit. You can add comments in code by adding // so I’ll use this:
var HM = ConvertUtils.numberToString(Height.getValue());

var KM = ConvertUtils.numberToString(Distance.getValue());

// Var let's you define a variable which we can use later on

// Distance and height are the names of my 2 dropdowns .getValue takes their value

// Sliders produce numbers but I need a string later on to fill my properties, so I use ConvertUtils.numberToString to do so



// I have s script variable created called Member, this is of the type Planningmodelmember

Member = {id:ID.getValue(),

description:ID.getValue(),

properties:{Afstand:KM,Hoogtemeters:HM}};

//Here I define what to fill my to be created member (Trail) with, basically telling it what to put in each column



// 2 more variables to first conduct the creation of the member, and after define the data source of the table to refresh it later

var result =MTB.createMembers("Route", Member);

var ds = Table_1.getDataSource();



// make sure we get a toast message

if (result) {

Application.showMessage(ApplicationMessageType.Success, "Made it");

} else {

Application.showMessage(ApplicationMessageType.Error, "Fail");

}

// and finally refresh the data

Application.refreshData([ds]);

App 2 - Input lap times


Now we have a trail to ride on, but we still need to log our lap times in the same conditions; wearing gloves standing trailside. Once again, we will discuss the end result below.


App 2 - Input lap times



Dropdown “Dropdown_1” and "Table_2" (invisible at runtime)


This can be dragged and dropped, but doing so will give us an empty dropdown. To feed the right dimension members to the dropdown we will add a dummy table that holds the members but does not show at design time. Subsequently we can add an onIntialization event from the canvas. Using below script we can fill the dropdown, note the // for my comments.
// Table_2 is our dummy table, getMembers loads the members into my variable

var routes = Table_2.getDataSource().getMembers("Route");



// subsequently we'll run a for loop as long as there are members in the table, for each emmber we will add it to the dropdown

for(var i=0 ;i< routes.length;i++) {

Dropdown_1.addItem(routes[i].id,routes[i].description);



}



//I don't want unassigned so I remove it

Dropdown_1.removeItem("Unassigned");



//I'd like the dropdown to have a member pre filled of my choosing, in this case my favourite Dutch Trail Amerongen

Dropdown_1.setSelectedKey("Amerongen");

Slider “Distance”


Same as in the prior app drag & drop and simply adjust the settings in the designer panel.

Date picker “Datepicker_1”


Ok this one is taking it all a step further. I wouldn’t dream to be able to create my own custom widgets, but using one is rather easy. This Link will give you the needed guidance. After you’ve added the custom widget as a JSON it’s no more than dragging & dropping it in.

Table “Table_1” (At runtime visual) and “Table_3” (invisible at runtime)


A table like any other, but we will use this to show what we’ve only just inputted. But for inputs we’ll actually add another table. The first table will be visible to see what we’ve just inputted on booked mode. The second table is where the trick comes, it will be on unbooked mode so that we make sure any input we generate on the slider and date picker can actually find a place to land.
Pro tip: use the console.log function in onSelect in your second table to get an example of the right inputs in the console of your browser.

Button “Button_1”


Magic! Yet again we need a way for this button to take selections from the slider and date picker and push it to our second table in order to become visible in the first. Let’s look at the script for onSelect:
// To actually start planning we will use getPlanning on our dummy table

var planning = Table_3.getPlanning();



//Create a variable to capture our selections, pro tip console.log comes in handy here to get the right ID's

//for date we have to convert the format with Dateformat.format function

var selection = {

"@MeasureDimension": "SnelsteRondetijd",

"Route": Dropdown_1.getSelectedKey(),

"Date":



DateFormat.format(Datepicker_1.getDateVal(),"yyyy-MM-dd")



};



//Slide called distance will give us the value as a string which the function expects

var ValueString = ConvertUtils.numberToString(Distance.getValue());





//now to set the inputs and directly after submit and publish

planning.setUserInput(selection, ValueString);

planning.submitData();



Table_3.getPlanning().getPublicVersion("Actual").publish();

App 3 - Analyse my times


Ok this might not be purely planning related, but it does bring everything together nicely. SAC’s combination of analytics and planning is vital to complete our circle and monitor my performance. With this, the image shown below will be my final design to create.


App 3 - Analyse my times



Dropdown “Dropdown_1”


We use the same trick as before, a simple copy & paste from the previous app. As I started building app after app I noticed the high degree of reusability Analytics Designer actually offers. Only difference now is we can use the selected value immediately, because we want the dropdown to filter our charts on the screen when used. To do so we utilise below script for the onSelect action:
//Get selected member in the dropdown and filter all charts on the screen

Chart_1.getDataSource().setDimensionFilter("Route", Dropdown_1.getSelectedKey());

Chart_2.getDataSource().setDimensionFilter("Route", Dropdown_1.getSelectedKey());

Chart_3.getDataSource().setDimensionFilter("Route", Dropdown_1.getSelectedKey());

Time series chart “Chart_1”


No different from the chart you create in a story, drag & drop away.

KPI tiles “Chart_2” and “Chart_3”


Again, similar as the story to drag & drop a numeric point chart, but now we create a min. and max. aggregation calculation in each chart to show the fastest and slowest time.

Final result


Below video shows an end to end flow over the three apps, from adding a trail to inputting my times and analysing the final results. The end user is happy, again this is me so maybe not that impressive but at least someone's happy...


Before you go


My guide is a collection of bits and pieces of information that you can find on the web. Google is your friend to find what you're looking for (sorry Bing). But to get you started I've added some links with great content from more skilled writers and builders than myself:

SAC Analytics Designer reference guide

Analytics Designer Handbook

Video by Fabien Aubert: How to build a guided planning application

Blog on Analytics Designer for Planning by UX Guru Chen Nee

 

 

 

 

 

 

 

 

 
1 Comment