This blog gives a quick introduction into Application Design and describes the key features in the example of the SAP CRM Sales Performance. It’s going to cover the following aspects:

• Initializing Application State
• Switching between Chart and Table display
• Extract Table Cell information
• Reuse Stories in the application

Disclaimer

Please note, that the Application Design at this point of time is still in Beta and not in General Availability yet. Update on that is expected to come soon!

What is the Application Design?

SAP Analytics Cloud Application Design is a professional design of centrally governable analytic content, ranging from dashboards via guided analytics to sophisticated planning and Smart Predict applications.

The target audience are experts and professional designers, who can use custom scripting logic to meet more advanced business requirement and drive standardization of analytics content, reusable UI elements and application logic (such as headers, footers, toolbars).

Key Features:

Scripting allows the user to write a subset of JavaScript in a secured environment, while being assisted by system with code auto completion, syntax check, Where-Used list, etc.

Scripting logic is enabled on dedicated events of the existing UI components, such as onInitialization(), onClick(), onSelect() , etc.Thereby, the user can manipulate and store the state of the application in so called global variables. These variables are accessible from any UI component and allow them to interchange data.

In addition, the UI components themselves provides accessor methods, such as setVisible(), getDataSource(), setHierarchy() and setFilter(), in order to change the behavior and state of the UI components themselves.

Here are the all key features in a nutshell:

• Intuitive design environment in browser
• Large set of design widgets
• Function-rich scripting editor
• Theming and customization
• Application and story share data connectivity and UI artifacts
• Widgets with charts or tables that can be reused in stories

What’s the difference between a Story and an Application?

• Applications and Stories share functionality and widgets
• Applications and Stories provide same user experience
• Applications and Stories are different artifacts
• Applications and Stories are created with different Design Environments

SAP CRM Sales Performance

The SAP CRM Sales Performance is part of the standard Business Content in the SAP Content Library. It illustrates the analysis of sales revenue growth measured against targets, portfolio performance, and customers

• Identify leads and opportunities – with focus on pipeline health
• Simulate sales scenarios to forecast future results
• Monitor sales team performance with win-loss analysis

For more details on the that content package, please check the following link: https://video.sap.com/media/t/1_dgd5f6dq .

In the following example, we look specifically into the Leads and Opportunities analysis. I will enhance and augment the story step by step with new features provided by App Design.

Initializing the application state

In App Design it is possible to initialize the state of the application, such as setting the default drill-down level of a hierarchy. Or you might want to set some global variables as well. As mentioned before, Global variables comes very handy when it comes to share data across the entire application.

In the following, I will describe on how to fill a Dropdown box with a list of dimensions. For that you have to add the following items into your application:

• Table:
  • Name: LeadsByDimensionTable
  • Data Source: SAP__CRM_GEN_IM_LEADS
• Dropdown
  • Name: DimensionsDropdown
• Global Variable:
  • Name: selectedDimension

While local variables can only be defined on the scripting and are valid / accessible in the scope of the event function only, global variables can not be declared directly in the script, instead they must be created in a dedicated App Design panel:

Now, we need to edit the onInitialization() event of the Main Canvas and enter the following script:

// 1. read the available dimensions from the datasource of a table
var leadsDimensions = LeadsByDimensionTable.getDataSource().getDimensions();


// fill the Dimension Dropdown box with data
for(var i = 0; i<leadsDimensions.length; i++){
	DimensionsDropdown.addItem(leadsDimensions[i].id, leadsDimensions[i].description);
}

// set dimension #9 as default for the Dimension Dropdown box
selectedDimension = leadsDimensions[9].id;
DimensionsDropdown.setSelectedKey(selectedDimension);

When running the application you should be able to see a Dropdown filled with dimensions as the following:

Since we want to modify the global variable selectedDimension whenever the user makes a selection, we have to edit the onSelect() event of the Dropdown box as the following:

selectedDimension = DimensionsDropdown.getSelectedKey();

Again, since the selectedDimension is a global variable, it can be accessed from all other widgets for further processing.

Switching between Chart and Table display

With the introduction of the setVisible() accessor method on the UI components, you can let the user toggle the display between a table or a chart. In my example I am using the following UI components to realize this behavior:

• RadioButtonGroup:
  • Name: ChartTableRadioButtonGroup
  • Values should contain the entries “Chart” and “Table”:
• Chart
  • Name: LeadsByDimensionChart
  • Data Source: SAP__CRN_GEN_IM_LEADS
• Table
  • Name: LeadsByDimensionTable
  • Data Source: SAP__CRN_GEN_IM_LEADS

The Chart and the Table must be layout in such a way, that they are overlaying each other:

Then you have to set their visibility according to the radio button group selection. The scripting logic of the onSelect() event contains the following:

if(ChartTableRadioButtonGroup.getSelectedKey()=='Chart'){
	LeadsByDimensionChart.setVisible(true);
	LeadsByDimensionTable.setVisible(false);
} else{
	LeadsByDimensionChart.setVisible(false);
	LeadsByDimensionTable.setVisible(true);
}​

Furthermore, it is recommended to set a default display in the onInitialization() event of the Main Canvas:

LeadsByDimensionChart.setVisible(false);
LeadsByDimensionTable.setVisible(true);

The result will look as the following:

Extract Table Cell information

With App Design it is possible to extract table cell information on the onSelect() event of a table. This enables user to create dynamic UI behavior, such as selecting a table item and change/filter of another UI component based on that selection.

In the CRM example, I use a table to display a list of customers. When selecting a customer, a KPI widget is going to be filtered accordingly.

For that we need:

• Table:
  • Name: Table_1
  • Data Source: SAP__CRM_GEN_IM_OPPORTUNITIES
  • Rows: Customer
•  Chart:
  • Name: Chart_1

The onSelect() event of the table contains the following:

var selection = Table_1.getSelection()[0];
var dimensionId = selection.dimensionId;
var memberId = selection.id;
Chart_1.getDataSource().setDimensionFilter(dimensionId, memberId);

This is how the result is looking like:

Embed stories in your application

Reusing existing stories in the application enables the user to wire stories and combine them into one business context. With that the end user can enrich new aspects and views to a specific business problem.

To embed existing SAC stories in App Design, you can place a WebPage UI component on your application. This is the container where your story is going to be displayed. All it requires is then an URL string.

For accessing stories the via an URL, you just have to follow the specification for Open Story URL API (https://api.sap.com/api/URL_API/resource). That URL API not only allows the user to access a story, but also to past variables, e.g. to filter on a specific dimension or to display a specific page of the story.

In my CRM example, I’m utilizing the new UI component Popup, which contains the WebPage. When clicking on a button, then the Popup shall be shown up. Hence, we need the following components:

• Popup
  • Name: Popup_1
• WebPage:
  • Name: WebPage_1
• Button
  • Name: ShowCustomerPopButton

In the onClick() event of the button, we build the story URL to display the CRM Sales Performance Story on Page 4 filtered by a specific Customer ID:

var selection = Table_1.getSelection()[0];

var storyUrl = "https://d031182.eu10.sapanalytics.cloud/sap/fpa/ui/bo/story/D0E3DD595FDB7C65E10000000A4E740E";	
var mode = "embed";
var page = "4";
var modelId = "t.S.SAP__CRM_GEN_IM_OPPORTUNITIES:SAP__CRM_GEN_IM_OPPORTUNITIES";
var dimensionId = selection.dimensionId;
var valueId = selection.id;
var url=storyUrl + "?mode=" +mode+ "&page=" +page + ";f01Model=" + modelId+ ";f01Dim=" +dimensionId+ ";f01Val="+valueId+";f01Op=in";

Eventually, the URL shall be set on the WebPage widget and the Popup shall be opened:

WebPage_1.setAddress(url);		
Popup_1.open();

Now, we’re ready to run the application with the following result, when clicking on the Button:

With the introduced features I hope I could help you to get started with Application Design and create your own business application. Please note that the journey is not ending here, since there are more great features to come, which I will write in future posts.