Introducing SAP Analytics cloud Widget API

[Ashok_R]

Great News! With the latest releases of 2025.08 for the SAP Analytics Cloud fast track customers (BI weekly release model) and for Quarterly release cycle with 2025 Q2 QRC, SAP Analytics Cloud Widget API  is now Generally available.

 

What is SAP Analytics Cloud widget API?

The SAP  Analytics Cloud (SAC) Widget API is a powerful tool that allows developers to embed charts from SAC stories into external  applications. This blog will provide an overview of the Widget API, walk you through the integration process, and demonstrate how it can enhance your application’s analytical capabilities

 1. Overview of the Widget API

    The Widget API in SAP Analytics Cloud enables seamless embedding of SAC visualisations into external web applications, portals,         or custom-built systems. With this API, you can:

• Display interactive charts within web applications.
• Control the content programmatically (filter, refresh, resize, etc.).
• Ensure secure communication between your application and SAC via authentication.
• Achieve better user experience by embedding analytics directly into Desktop and web applications.

 2. Widget API Features

    Some key capabilities of the Widget API include:

• Embedding Charts: Integrate single or multiple charts from SAC stories.
• Filtering and Parameters: Apply filters and programmatically to change the view.
• Context Menu & Interactions: Charts will be interactive, and you can filter on data point selection and apply various interactive options.
• Cross-Origin Communication: Secure communication between the parent application and SAC.

 3. Prerequisites

      Before getting started, ensure that you have:

• Access to SAP Analytics Cloud with the required permissions. Ex: User will be able to log in to SAP Analytics cloud and view access to stories.
• A widgetID, storyID, TenatID that you want to embed. 
• Basic knowledge of JavaScript and HTML.

4. Widget API Overview : 

This API enables seamless embedding of widgets from SAP Analytics Cloud into external applications. It comprises three main elements: a namespace, a function call, and a set of parameters (some mandatory, some optional).

4.1 Elements of the API :

• Name Space:  Defines the scope for accessing the API components. -  "sap.sac.api.widget" 
• Function Call : Primary function to invoke the and render the widget. - "renderWidget"

4.2 Required Parameters: 

   4.2.1 Container ID:

     Specifies the HTML container (such as a <div>) in your application where the widget should be embedded

    4.2.2 Tenant URL:

     Base URL of SAP Analytic cloud. Ex: https://sample.tenant.cloud/sap/fpa/ui 

    4.3.3 SAP Analytics Cloud Story ID and Widget ID: 

• To retrieve the Story ID, open the story in SAC and extract it from the URL.
  Example URL: https://sample.tenant.cloud/sap/fpa/ui/app.html#/story2&/s2/C7D03902C194A72F5F130EC083762CCA.      Story ID: C7D03902C194A72F5F130EC083762CCA

• Widget ID Indicates the specific widget you want to embed. In edit mode, you can find it in the Styling panel under Generic Properties.

In view mode, right-click on the widget, go to More Options > Copy Widget ID. For example, the widget ID could be chart_2.

Note:  Refer the SAC help documentation to programatically get the IDs of SAC stories ID and Widget IDs. 

https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/a4406994704e4af5a8559a640b496468/f0827b68d24548448060c... 

4.3 Optional Parameters: 

Enable and Disable the widget Interaction:  

You can disable the widget interaction for users by passing the below optional parameters. 

• enableInteraction: true/false - enable or disable the interaction of the widget
• enableMenu: true/false  - enable or disable the context menu of the widget 
• showHeader: true/false -  show or hide the header of the widget.
• showFooter: true/false -   show or hide the footer of the widget.

Note: By default, all these parameters are set it to true. 

5. Authentication and Security considerations: 

For secure communication, SAC requires authentication. Depending on your setup:

• Use SAML-based SSO if your users are already authenticated in the external application.

Ensure your SAC instance and the external application are configured to allow Cross-Origin Resource Sharing (CORS) for seamless data exchange.

6.  Step by Step integration of SAP Analytics Cloud charts into a Custom Portal: 

Imagine a scenario where a bank uses a customer portal to provide users with real-time insights into their spending patterns. By embedding SAC charts into the portal using the Widget API, the bank can:

• Display interactive dashboards tailored to each user’s transactions.
• Allow users to filter data by date or category directly from the portal.
• Automatically refresh the charts when new transactions occur.

This integration enhances the user experience and keeps customers engaged with actionable insights. 

1. Install Visual Studio Code - https://code.visualstudio.com/  

       2. Install the “Live Server” extension.

3. Open the sample html code in Visual studio code application!

4. Add SAC tenant details in the initialization displaywidget function.

5. Add the widget ID in the displaywidget function

6. Click the “Go Live” button to start the server and it will run the application in the browser.

7. Additionally, you can pass the filters and Variables:

  sap.sac.api.widget.renderWidget(
        containerId,
        tenant,
        storyId,
        widgetId,
        {
        filters: [{
          model: "sap.epm.Planned_Events_Sample:Planned_Events_Sample",
          values: [{
            dimension: "Date_5x2a25042z",
            value: ["026b7dcf2350c824559b8cc00612de","05aff8031d1c560fa0ea6a675cc894","53a4b48d6e946faa59c35643d775c9"],
            operation: 'in'
          }]
          },       
             {
            model:"sap.epm.Planned_Events_Sample:Planned_Events_Sample",
           values: [{
           dimension: "Event_672z323k1f",
           value: [""],
           operation: 'notIn'
          }]
        },
        {
            model:"sap.epm.Planned_Events_Sample:Planned_Events_Sample",
           values: [{
             dimension: "Date_5x2a25042z",
           value: ["026b7dcf2350c824559b8cc00612de"],
           operation: 'notIn'
          }]
        }
      ] 
      },
updatedOptions
      )
    };

8. Export a chart:   

Once the widget is successfully embedded into your application, the Widget API provides optional parameters that allow you to export a chart after it has been rendered. 

• format (optional) - A string specifying the export format. The default is "svg", which is currently the only supported format.
• options (optional) - You can use the options object to configure the export further. It includes:
• include - An object where you can choose to display the chart’s title, subtitle, and footer.
  • Each property (title, subtitle, footer) is a boolean.
  • Default: false
• size
  An object to set custom dimensions for the exported SVG.
  • Properties: height and width (both numbers)
  • Default: current container's dimensions

Example:

const options = {
  include: {
    title: true,
    subtitle: true,
    footer: true
  },
  size: {
    height: 300,
    width: 300
  }
}
await sap.sac.api.widget.export("widget1", "svg", options) 

  9. Troubleshooting Tips

• Chart not loading - Ensure the SAC tenant URL is correct and accessible from the web app.
• CORS errors - verify that the SAC instance allows CORS from your application domain.
• Authentication issues - Confirm the valid authentication or SSO setup is correctly configured.

  10. Further Reading & Resources

• Enabling Iframe Embedding
• SAP Widget API Documentation