/sap-sac-custom-widget

name: sap-sac-custom-widget
description: "SAP Analytics Cloud (SAC) Custom Widget development. Use when building custom visualizations, extending SAC with Web Components, or creating Widget Add-Ons. Covers JSON metadata, JavaScript Web Components, lifecycle functions, data binding with feeds, styling/builder panels, property/event/method definitions, third-party library integration, hosting, security, performance, and debugging. Includes Widget Add-On feature (QRC Q4 2023+) and templates for widgets, charts, and KPI cards."

license: GPL-3.0
metadata:
  maintainer: "Eduard Jiglau"
  maintainer_email: "hello@sap-ai-skills.com"
  website: "https://sap-ai-skills.com"
  version: "2.4.1"
  last_verified: 2026-06-12
  sac_version: "2026.8"
  errors_prevented: 40+
  official_docs:
    - "https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/0ac8c6754ff84605a4372468d002f2bf/75311f67527c41638ceb89af9cd8af3e.html"
    - "https://help.sap.com/doc/c813a28922b54e50bd2a307b099787dc/release/en-US/CustomWidgetDevGuide_en.pdf"
  samples_repo: "https://github.com/SAP-samples/analytics-cloud-datasphere-community-content/tree/main/SAC_Custom_Widgets"
  keywords: [sap analytics cloud, sac custom widget, web component sac, json metadata widget, widget lifecycle functions, onCustomWidgetBeforeUpdate, onCustomWidgetAfterUpdate, onCustomWidgetResize, onCustomWidgetDestroy, sac data binding, dataBindings feeds, styling panel widget, builder panel widget, sac echarts integration, sac d3js integration, third party library sac, widget hosting sac, integrity hash widget, sha256 integrity, widget security cors, sac widget debugging, sac analytics designer widget, optimized story experience widget, sac widget api, widget add-on, sac script api widget, shadow dom web component, sac tooltip customization, plot area addon, sac resource zip upload, root relative widget url, resource file upload, builder focus collapse state, self contained component js, resource zip artifact naming, chat download artifacts]
allowed-tools:
  - Read
  - Bash
  - WebFetch

SAP Analytics Cloud Custom Widget Development

Related Skills

• **sap-sac-scripting**: Use when custom widgets interact with SAC scripting, widgets, or story/application APIs
• **sap-sac-planning**: Use when widgets participate in planning workflows or planning table interactions
• **sapui5**: Use for Web Component/UI5 frontend implementation patterns and browser-side quality
• **sap-dependency-security**: Use when adding third-party charting or build dependencies to widget projects

Table of Contents

• [Overview](#overview)
• [AI-Assisted Generation](#ai-assisted-generation)
• [Widget Discovery and Evidence Intake](#widget-discovery-and-evidence-intake)
• [Local Custom Widget Builder](#local-custom-widget-builder)
• [SAP Sample Widget Lessons](#sap-sample-widget-lessons)
• [Browser Design Runtime](#browser-design-runtime)
• [CSS and Styling Compliance](#css-and-styling-compliance)
• [SAC Import and Packaging](#sac-import-and-packaging)
• [Plugin Components](#plugin-components)
• [Quick Start](#quick-start)
• [Community Sample Widgets](#community-sample-widgets)
• [Key Concepts](#key-concepts)
• [Common Errors & Solutions](#common-errors--solutions)
• [Bundled Resources](#bundled-resources)

Overview

This skill enables development of custom widgets for SAP Analytics Cloud (SAC). Custom widgets are Web Components that extend SAC stories and applications with custom visualizations, interactive elements, and specialized functionality.

When to Use This Skill

**Use this skill when**:

• Building custom visualizations not available in standard SAC
• Generating prompt-driven widget ideas, branded widget packages, or composite-ready widget designs
• Integrating third-party charting libraries (ECharts, D3.js, Chart.js)
• Creating interactive input components for SAC applications
• Implementing specialized data displays or KPI widgets
• Extending Analytics Designer applications with custom functionality
• Troubleshooting custom widget loading or data binding issues

**Requirements**:

• SAC tenant with Optimized Story Experience or Analytics Designer
• JavaScript/Web Components knowledge
• External hosting (GitHub Pages, AWS S3, Azure) OR SAC-hosted resources (QRC Q2 2023+)

---

AI-Assisted Generation

For prompt-driven widget creation, first classify the widget role and data-source mode, then suggest 2-3 role-aware options before generating the selected complete package. Keep AI-generated code SAC-compatible, preserve data-binding order when used, and validate/repair before import. See **`references/ai-assisted-composite-generation.md`** for output contracts, RAG context patterns, brand styling, and composite caveats.

---

Widget Discovery and Evidence Intake

Before generating a table, chart, KPI, menu, sidebar, filter, or hybrid control, select both its widget role and data-source mode. Request dimensions, measures/key figures, dates, versions, filters, and feed order only for SAC-bound widgets. For pure UI controls, collect interaction, navigation, state, method/event, accessibility, and responsive-layout requirements instead. Accept user-provided screenshots, PDFs, images, brand guides, and sanitized data as evidence, but confirm technical IDs, feed mappings, asset rights, and licenses before code generation. See **`references/widget-discovery-intake.md`** for the Widget Brief, evidence boundaries, and hosted-tool safeguards.

---

Local Custom Widget Builder

For enterprise or locked-down local environments, offer **`templates/local-builder/`** as the standard no-install scaffold builder. It runs as static HTML/CSS/vanilla JavaScript, avoids public CDNs and external packages, and exports SAC upload artifacts as two separate downloads: `widget.json` and a Resource-ZIP containing only root-level component JavaScript files. Use Node's `server.mjs` fallback when direct `file://` use is blocked. When a user explicitly permits public-web use for a non-sensi