Interaktive Dashboards überall: Ihre Einführung in die SAP Analytics Cloud Widget API

Mit den Releases Fast Track 2025.08 (wöchentliche BI-Releases) und 2025 Q2 (Quarterly Release Cycle) ist die SAP Analytics Cloud Widget API nun allgemein verfügbar. Sie ermöglicht es Entwicklern SAC-Visualisierungen interaktiv in eigene Web- oder Desktop-Anwendungen (z. B. PowerPoint-Add-Ins) einzubetten und automatisiert zu exportieren.

Überblick über die Widget API

Die Widget API der SAP Analytics Cloud erlaubt es, SAC-Visualisierungen nahtlos in externe Web-Applikationen, Portale oder maßgeschneiderte Systeme einzubetten. So profitieren Sie von:

• Interaktiven Charts
  Binden Sie vollfunktionsfähige SAC-Diagramme direkt in Ihre Anwendung ein – Ihre Nutzer können filtern, zoomen und auf Datenpunkte klicken, ohne die Seite zu verlassen.
• Programmgesteuerter Steuerung
  Passen Sie Diagramme zur Laufzeit an: Aktualisieren Sie Daten, ändern Sie Filter oder passen Sie Größe und Layout per JavaScript an.
• Sichere Kommunikation
  Authentifizieren Sie Ihre Anwendung über SAML-SSO oder OAuth, und konfigurieren Sie CORS/CSP in Ihrer SAC-Instanz für eine geschützte Datenübertragung.
• Konsistente Nutzererfahrung
  Integrieren Sie Analysen direkt in Desktop- oder Web-Anwendungen – so bleibt der Kontext erhalten und Sie steigern die Akzeptanz Ihrer Reports.

Voraussetzungen

Bevor Sie loslegen, stellen Sie bitte Folgendes sicher:

1. Zugriffsrechte auf SAC
   Ein SAC-Benutzerkonto mit Leseberechtigung für die betreffenden Stories.
2. Tenant-URL, Story-ID & Widget-ID
   Die Basis-URL Ihrer SAC-Instanz (z. B. https://<Ihr-Tenant>.hana.ondemand.com/sap/fpa/ui), die Story-Kennung (aus der URL Ihrer Story) und die Widget-ID (im Story-Editor unter „Styling → Generic Properties“).
3. Grundkenntnisse in HTML/JavaScript
   Einfache Web-Entwicklungskompetenzen genügen, um das SDK einzubinden und per Code die Widgets zu rendern.

Beispielimplementierung: Zwei SAC-Widgets im Browser

Im folgenden Abschnitt zeigen wir anhand eines einfachen Beispiels, wie Sie zwei Charts aus einer SAC-Story in eine HTML-Seite einbetten. Sie lernen, wie sich die Widgets initial laden, per Button neu rendern und als SVG-Datei exportieren lassen:

• Live-Rendering beider Widgets
• Neu-Laden per Button
• SVG-Export per Button

Embedded-Link generieren

1. Story im SAC öffnen
Melden Sie sich in Ihrem SAC-Tenant an und öffnen Sie die gewünschte Story im Bearbeitungsmodus.

• Navigieren Sie zu dem Diagramm, das Sie einbetten möchten.
• Öffnen Sie im Bearbeitungsmodus das Styling-Panel → Generic Properties → ID

Webanwendung vorbereiten

Installieren Sie zum Beispiel eine Umgebung wie Visual Studio Code und erstellen Sie einen neuen Ordner, z. B. mit dem Namen sac-widget-demo. Legen Sie darin eine Datei mit dem Namen index.html an und fügen Sie den Beispielcode ein. Mit der Erweiterung „Live Server“ (einfach im Editor installieren) können Sie die Datei per Rechtsklick → Open with Live Server im Browser öffnen – Änderungen am Code werden sofort angezeigt.

Beispielhaftes HTML-Gerüst:

Kurzerklärungen zu den Abschnitten:

1. SDK einbinden
   Über das SAP-CDN binden Sie das sac-widget-embed.js-Skript ein, das alle Widget-Funktionen bereitstellt.
2. Container-Styling
   Mit einfachem CSS legen Sie Größe und Rahmen des <div> fest, in dem das Chart später gerendert wird.
3. Platzhalter im Body
   Ein leeres <div> mit ID chartContainer dient als Ziel für das Widget.
4. Initialisierung
   sap.sac.api.widget.setup({ language: "de" }); lädt die nötige SDK-Logik und stellt die Sprache auf Deutsch.
5. Parameter definieren:
   tenantUrl: Ihre SAC-Instanz
   storyId: Kennung der Story
   widgetId: ID des Charts innerhalb der Story
6. renderWidget
   Hier passiert das Einbetten: Sie übergeben Container-ID, Tenant, Story, Widget und optionales attributes-Objekt.
7. Optionale Attribute
   Ermöglichen Feineinstellungen für Interaktion, Menü-Anzeige, Header und Footer.

API-Grundlagen des SAC Widget API

Um mit dem SAP Analytics Cloud Widget API Diagramme in eigene Webanwendungen einzubetten, sind drei zentrale Bausteine relevant: Namespace, Funktionsaufruf und Parameter. Nachfolgend eine detaillierte Erläuterung:

• Namespace
  sap.sac.api.widget
  Dieser Namensraum stellt alle benötigten Methoden und Objekte bereit, um Widgets (Diagramme) aus SAC Storys zu initialisieren und darzustellen.
• Hauptfunktion
  sap.sac.api.widget.renderWidget(containerId, tenantUrl, storyId, widgetId, options)
  renderWidget ist der zentrale Aufruf, mit dem Sie ein einzelnes SAC-Widget in ein HTML-Element rendern.
• Pflicht-Parameter
  Diese vier Werte müssen Sie immer übergeben:
  • containerId
    Die ID des HTML-Containers (üblich ein <div>), in dem das Widget angezeigt wird.
    Beispiel: "chartContainer"
  • tenantUrl
    Die Basis-URL Ihres SAC-Tenants inklusive Pfad /sap/fpa/ui.
    Beispiel: "https://meineinstanz.eu10.hcs.cloud.sap/sap/fpa/ui"
  • storyId
    Die eindeutige Kennung der Story, aus der das Widget stammt. Sie finden Sie in der Story-URL („…/story2&/s2/STORY_ID/?…“).
    Beispiel: "9E6E33C9F909715E057AD29413669C08"
  • widgetId
    Die ID des einzelnen Diagramms innerhalb der Story, meist über „More Options > Copy Widget ID“ ermittelbar.
    Beispiel: "Chart_1"
  • Optionale Parameter

Mit dem options-Objekt steuern Sie das Verhalten und die Darstellung des Widgets. Alle Einstellungen sind standardmäßig true:

• enableInteraction
  Aktiviert oder deaktiviert sämtliche interaktiven Elemente (Filtern, Markieren).
• enableMenus
  Steuert die Verfügbarkeit weiterer Funktionen über das Kontextmenü.
• showHeader
  Blendet die Widget-Überschrift (Titel) sichtbar ein oder aus.
• showFooter
  Zeigt bzw. versteckt zusätzliche Informationen im unteren Bereich des Widgets.

Diagramm exportieren

Mit sap.sac.api.widget.export (containerId, "svg", options) erzeugen Sie aus Ihrem eingebetteten Chart eine SVG-Datei. Über options.include (Titel, Untertitel, Footer) und optional options.size (Breite, Höhe) steuern Sie Inhalt und Abmessungen. Das zurückgegebene SVG können Sie etwa per URL.createObjectURL in einem neuen Tab anzeigen oder als Datei herunterladen. So gewinnen Sie schnell skalierbare Vektorgrafiken für Präsentationen und Reports.

Dabei erzeugt der Aufruf von sap.sac.api.widget.export() das reine SVG-Dokument, das sich anschließend als Blob-URL in einem neuen Tab anzeigen lässt. Die folgende Abbildung macht den Prozess noch anschaulicher:

Authentifizierung & CORS

Damit eingebettete Widgets reibungslos funktionieren, muss Ihre Web-Applikation gegenüber der SAP Analytics Cloud (SAC) authentifiziert sein und in den Sicherheitseinstellungen der SAC-Instanz als vertrauenswürdige Quelle (Trusted Origin) hinterlegt werden:

• Single Sign-On/SAML
  Wenn Ihre Anwender bereits per SAML-SSO im Firmenportal angemeldet sind, können Sie diese Anmeldesession für SAC nutzen. So entfällt eine zusätzliche Login-Abfrage, und der Übergang bleibt für den Nutzer nahtlos.
• Cross-Origin Resource Sharing (CORS)
  Öffnen Sie in Ihrem SAC-Tenant unter Security → Content Security Policy (bzw. Trusted Origins) die Einstellungen und fügen Sie die Host-URL Ihrer Web-Anwendung hinzu (z. B. https://app.meinedomain.de). Nur so erlaubt der Browser, dass JavaScript-Anfragen aus Ihrem Client-Code erfolgreich an die SAC gesendet werden.

Mit diesen Schritten haben Sie Ihre SAC-Charts erfolgreich in eine Web-Seite integriert. Im Endergebnis sieht das fertige Beispiel so aus:

PowerPoint-Integration mit dem SAC Add-In

SAP stellt ein offizielles PowerPoint-Add-In bereit, das im Hintergrund die Widget API verwendet und Ihnen erlaubt, SAC-Charts direkt in Ihre Präsentationen einzubetten.

1. Installation
Öffnen Sie PowerPoint und navigieren Sie zu Einfügen → Add-Ins → Office Store.
Suchen Sie nach „SAP Analytics Cloud“ und klicken Sie auf Hinzufügen.

2. Einfügen einer Story in die Folie
Im nun geöffneten SAP Analytics Cloud-Panel wählen Sie Ihre gewünschte Story aus.

Markieren Sie das Chart-Widget, das Sie einbinden möchten, und klicken Sie auf Widget hinzufügen.

3. Aktualisierung & Vorteile
Das Chart wird als SVG-Grafik in Ihre Folie eingefügt.
Beim Öffnen der Präsentation oder per Klick auf Aktualisieren lädt das Add-In automatisch die aktuellen Daten aus der SAC nach.

Nutzen auf einen Blick

• Live-Daten in PowerPoint: Ihre Charts spiegeln stets den neuesten Stand wider.
• Native SVG-Einbettung: Scharfe Darstellung und flexible Größenanpassung direkt in der Folie.

Abschluss & Ausblick

Die SAP Analytics Cloud Widget API eröffnet vielfältige Einsatzmöglichkeiten, um Ihre analytischen Einblicke nahtlos in verschiedenste Anwendungen zu integrieren. Abschließend fassen wir die zentralen Vorteile zusammen und skizzieren typische Use-Cases:

Zusammenfassung der Vorteile

• Einfaches Einbetten: Mit wenigen Zeilen JavaScript lassen sich interaktive SAC-Charts in jede Web-Umgebung integrieren.
• Programmgesteuerte Steuerung: Filtern, Aktualisieren, Exportieren – alles lässt sich dynamisch aus Ihrer Anwendung heraus ansteuern.
• Sichere Anbindung: Über SSO/SAML und korrekt konfigurierte CORS-Einstellungen bleiben Ihre Daten stets geschützt.
• Nahtlose PowerPoint-Integration: Dank des offiziellen SAC Add-Ins befüllen Sie Ihre Präsentationen mit Live-Charts, die Sie per Klick aktualisieren.

Zusammenfassung der Vorteile

Beispiele für UseCases in der Zukunft:

Mit der Widget API schaffen Sie einen konsistenten, interaktiven Zugang zu Ihren SAC-Analysen – egal ob in Webportalen, CRM-Systemen oder Office-Dokumenten. Starten Sie noch heute Ihr nächstes Embedded-Analytics-Projekt und steigern Sie die Akzeptanz Ihrer Self-Service-Analytics innerhalb und außerhalb Ihres Unternehmens!

Erfahren Sie hier mehr über die SAP Analytics Cloud und Seamless Planning.