Hero Backgroud Elements 2
Reading Time: 10 Min

Analytics Designer: Typical Patterns and Samples

Learning Article
  • WebPage

    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


    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.

    Author: Jason Yang

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