Jason Yang

Jason Yang

Jason Yang is the Product Owner in the SAC Analytics Designer development team with over 10+ years of experience in Business Analytics.

Keep in touch

Subscribe for the latest news, updates, tips and more delivered right to your inbox.

Subscribe to updates



Connect with us

SAP Analytics Cloud, analytics designer extends standard SAP Analytics Cloud's capabilities and integrates with other applications including both SAP applications and other third-party applications. Here are several typical patterns and samples we find useful in Analytics Designer integration cases.


Using the web page widget, you can embed a web page into your analytic application to enrich your analytics with additional live hosted content. To dynamically set the address that the web page will navigate to, write the setAddress API:

setAddress(address: string): void

Below we provide an example that uses a Web Page widget to embed a search engine and allows users to dynamically change the search keyword according to their selections.

Script Variable as a URL Parameter

You can define a script variable’s value via a URL parameter. The script variable can be defined in URL parameter must be of type string, Boolean, integer or number.Detailed steps are as below:

  1. Choose the script variable you want to define and go to the Script Variable dialog.
  2. In the dialog, select the option Expose Variable via URL Parameter.
  3. Save the change to the analytic application and choose Run Analytic Application.
  4. In the URL of the analytic application, enter a new parameter that starts with “p_” and is followed by the script variable’s name.For example, if you want to set the value of ScriptVariable_1 to 3.14, add the following information to the original URL: ;p_ScriptVariable_1=3.14
  5. Reopen your application URL and you will see the URL parameter value has been passed to corresponding script variables. In this way, you can initialize the application based on your needs by simply making some changes to the URL parameters.

Below we provide you a use case where we’ve already had the value of Quantity Sold, but also want to know the planned value which is passed to SAP Analytics Cloud from an external application to calculate the completion ratio.

Post Message

With Post Message API, you can enable bi-direction communication between a HTML page and analytic application as describe in the two scenarios below.

Scenario 1: Embedding analytic application in a host HTML page via iFrame

Scenario 2: Embedding a HTML page in an analytic application through the webpage widget

Post Message API description


postMessage(receiver: PostMessageReceivermessage: string, targetOrigin: string): void
Posts a message to the parent window or the top-level window.

onPostMessageReceived(message: string, origin: string)
Called when the analytic application receives a message from the hosting page or an embedded page.

Note: Before embedding an analytic application via a iFrame in the host HTML page, you need to first make sure the host HTML page is added as a trust origin in the System  Administration > App Integration > Trusted Origin.

Caution: We advise you always check the origin when receiving an event-triggered message, because a malicious site can change the location of the window and therefore intercept the data you sent using the postMessage event without your knowledge.

Below is an example of the use case.

Navigation APIs

Navigation APIs allow end users to navigate from one analytic application to another or to a specific page of a story.

APIs defined in NavigationUtils:
NavigationUtils {

openStory(storyId: string, pageId: string, parameters ? : UrlParameter | UrlParameter[], newTab ? : boolean): void

openApplication(appId: string, parameters ? : UrlParameter | UrlParameter[], newTab ? : boolean): void

createStoryUrl(storyId: string, pageId: string, parameters ? : UrlParameter | UrlParameter[]): string

createApplicationUrl(appId: string, parameters ? : UrlParameter | UrlParameter[]): string

openUrl(url: string, newTab ? : boolean): void


Sample Code:
NavigationUtils.openStory("story_id", "page_id", UrlParameter.create("p_script_var_1", "123"));

Below is an example of the use case.

Explorer API

The Explorer API allows you to trigger the launch of the explorer mode in the application to generate charts or tables for data exploring, and meanwhile setting additional dimensions and measures to the current data source in explorer mode. For example:

Sample Code:

//Add Travel_Date and Traveler dimensions to current dimension scope for data exploration.
Chart_1.getDataSource().getDataExplorer().setAdditionalDimensions([“Travel_Date”, “Traveler”]);

Below we provide you an example that demonstrates how to leverage data explorer API and the feature creating story from widget to realize an interesting workflow: Assume the customer has their own enterprise BI portal. When end users click one link on the BI portal, for instance “Sale Analysis”, they would like to be directly navigated to the data exploration and story creation, without first picking a data source.


In Analytics Designer, OData actions can be called from and executed in the backend system via scripting inside an analytic application. Furthermore, it is also possible to read and use the data of entity sets (exposed via OData services) by using the APIs.

Below is an example of the use case.


These are some typical patterns and samples we hope could help you get familiar with the integration of Analytics Designer with other applications. Please reach out to us at anytime if you have any questions.

Documentation and Sample Code

Get the sample apps here (based on release 2019.9)

Get the latest Help documentation from SAP Analytics Cloud’s menu.

SAP Analytics Cloud earns a top ranking from BARC

See how SAP Analytics Cloud performed in the world’s largest survey of Business Intelligence software users.