Interactive dashboards everywhere: Your introduction to the SAP Analytics Cloud Widget API

With the releases Fast Track 2025.08 (weekly BI releases) and 2025 Q2 (Quarterly Release Cycle) is the SAP Analytics Cloud Widget API is now generally available. It enables developers to interactively embed SAC visualizations into their own web or desktop applications (e.g., PowerPoint add-ins) and export them automatically.

Overview of the Widget API

The Widget API SAP Analytics Cloud allows you to seamlessly embed SAC visualizations into external web applications, portals, or customized systems. This gives you the following benefits:

• Interactive charts
  Embed fully functional SAC charts directly into your application – your users can filter, zoom, and click on data points without leaving the page.
• Program-controlled control
  Customize charts at runtime: Update data, change filters, or adjust size and layout using JavaScript.
• Secure communication
  Authenticate your application using SAML SSO or OAuth and configure CORS/CSP in your SAC instance for secure data transfer.
• Consistent user experience
  Integrate analytics directly into desktop or web applications to preserve context and increase the acceptance of your reports.

Requirements

Before you begin, please ensure the following:

1. Access rights to SAC
   An SAC user account with read permission for the stories in question.
2. Tenant URL, Story ID & Widget ID
   The base URL of your SAC instance (e.g. https:// .hana.ondemand.com/sap/fpa/ui), the story identifier (from your story's URL), and the widget ID (in the story editor under "Styling → Generic Properties").
3. Basic knowledge of HTML/JavaScript
   Basic web development skills are sufficient to integrate the SDK and render the widgets using code.

Example implementation: Two SAC widgets in the browser

In the following section, we'll use a simple example to demonstrate how to embed two charts from a SAC story into an HTML page. You'll learn how to initially load the widgets, re-render them using a button, and export them as an SVG file:

• Live-Rendering of both widgets
• Reload via button
• SVG export via button

Generate embedded link

1. Open story in SAC
Log in to your SAC tenant and open the desired story in the edit mode.

• Navigate to the chart you want to embed.
• In edit mode, open the Styling panel → Generic Properties → ID

Preparing the web application

For example, install an environment such as Visual Studio Code and create a new folder, e.g., named sac-widget-demo. Create a file named index.html in it and paste the sample code. With the extension "Live Server" (simply install in the editor) you can right-click the file → Open with Live Server & Hosting Open in browser – changes to the code are displayed immediately.

Example HTML framework:

Brief explanations of the sections:

1. Integrate SDK
   You use the SAP CDN to embed the sac-widget-embed.js script, which provides all widget functions.
2. Container styling
   With simple CSS you can set the size and border of the in which the chart will later be rendered.
3. Placeholder in the body
   An empty with ID chartContainer serves as the target for the widget.
4. Initialization
   sap.sac.api.widget.setup({ language: "de" }); loads the necessary SDK logic and sets the language to German.
5. Define parameters:
   tenantUrl: Your SAC instance
   storyId: Story identifier
   widgetId: ID of the chart within the story
6. renderWidget
   This is where the embedding happens: you pass the container ID, tenant, story, widget, and optional attributes object.
7. Optional attributes
   Allows fine-tuning of interaction, menu display, header and footer.

API basics of the SAC Widget API

To embed charts in your own web applications using the SAP Analytics Cloud Widget API, three key building blocks are relevant: namespace, function call, and parameters. A detailed explanation follows:

• namespace
  sap.sac.api.widget
  This namespace provides all the methods and objects needed to initialize and display widgets (diagrams) from SAC stories.
• Main function
  sap.sac.api.widget.renderWidget(containerId, tenantUrl, storyId, widgetId, options)
  renderWidget is the central call that you use to render a single SAC widget into an HTML element.
• Mandatory parameters
  You must always pass these four values:
  • containerId
    The ID of the HTML container (usually a ) in which the widget is displayed.
    For example: "chartContainer"
  • tenantUrl
    The base URL of your SAC tenant including the path /sap/fpa/ui.
    For example: "https://meineinstanz.eu10.hcs.cloud.sap/sap/fpa/ui"
  • storyId
    The unique identifier of the story from which the widget originates. You can find it in the story URL (".../story2&/s2/STORY_ID/?...").
    For example: "9E6E33C9F909715E057AD29413669C08"
  • widgetId
    The ID of the individual chart within the story, usually found via “More Options > Copy Widget ID”.
    For example: "Chart_1"
  • Optional parameters

The options object controls the behavior and appearance of the widget. All settings are true by default:

• enableInteraction
  Enables or disables all interactive elements (filtering, marking).
• enableMenus
  Controls the availability of additional functions via the context menu.
• showHeader
  Shows or hides the widget heading (title).
• showFooter
  Shows or hides additional information at the bottom of the widget.

Export diagram

Use sap.sac.api.widget.export(containerId, "svg", options) to create an SVG file from your embedded chart. You can control the content and dimensions using options.include (title, subtitle, footer) and optionally options.size (width, height). You can display the returned SVG in a new tab using URL.createObjectURL or download it as a file. This allows you to quickly create scalable vector graphics for presentations and reports.

Calling sap.sac.api.widget.export() creates the pure SVG document, which can then be displayed as a blob URL in a new tab. The following figure illustrates the process even more clearly:

Authentication & CORS

For embedded widgets to function smoothly, your web application must be authenticated to SAP Analytics Cloud (SAC) and stored as a trusted source (Trusted Origin) in the security settings of the SAC instance:

• Single Sign-On/SAML
  If your users are already logged into the company portal via SAML SSO, you can use this login session for SAC. This eliminates the need for an additional login prompt, ensuring a seamless transition for the user.
• Cross-Origin Resource Sharing (CORS)
  In your SAC tenant, open Security → Content Security Policy (or. Trusted Origins) and add the host URL of your web application (e.g., https://app.meinedomain.de). This is the only way the browser will allow JavaScript requests from your client code to be successfully sent to the SAC.

With these steps, you have successfully integrated your SAC charts into a web page. The final result will look like this:

PowerPoint integration with the SAC Add-In

SAP provides an official PowerPoint add-in that uses the Widget API in the background and allows you to embed SAC charts directly into your presentations.

1. Installation
Open PowerPoint and navigate to Insert → Add-Ins → Office Store.
Search for “SAP Analytics Cloud” and click on Add.

2. Insert a story into the slide
In the now opened SAP Analytics Cloud Panel select your desired story.

Select the chart widget you want to include and click Add widget.

3. Updates & Benefits
The chart will be inserted into your slide as an SVG graphic.
When you open the presentation or click on Update The add-in automatically loads the current data from the SAC.

Benefits at a glance

• Live-Data in PowerPoint: Their charts always reflect the latest status.
• Native SVG embedding: Sharp display and flexible size adjustment directly in the slide.

Conclusion & outlook

The SAP Analytics Cloud Widget API opens up a wide range of possibilities for seamlessly integrating your analytical insights into a variety of applications. Finally, we summarize the key benefits and outline typical use cases:

Summary of benefits

• Easy embedding: With just a few lines of JavaScript, interactive SAC charts can be integrated into any web environment.
• Program-controlled control: Filtering, updating, exporting – everything can be controlled dynamically from your application.
• Secure connection: Your data is always protected through SSO/SAML and correctly configured CORS settings.
• Seamless PowerPoint integrationThanks to the official SAC add-in, you can fill your presentations with Live-Charts that you can update with a single click.

Summary of benefits

Examples of use cases in the future:

With the Widget API, you can create consistent, interactive access to your SAC analytics – whether in web portals, CRM systems, or Office documents. Start your next embedded analytics project today and increase the adoption of your self-service analytics within and outside your company!

Learn more about SAP Analytics Cloud and Seamless Planning here.