skilld
All skills
secondsky avatar

/sap-sac-custom-widget

@4d87d99
by Eddiesecondsky/sap-skills456 stars
120

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/secondsky/sap-skills/sap-sac-custom-widget

This session only. Nothing lands on disk.

README.md

≈2.3k tokens on demand. Your agent reads this file only when SKILL.md points to it.

SAP SAC Custom Widget Plugin

Portable, documentation-audited plugin content for developing custom widgets in SAP Analytics Cloud (SAC). Claude agents, slash commands, and validation hooks are optional activation helpers; in Codex, OpenCode, and similar harnesses, use them as main-thread guidance and manual validators.

Capability Index

Capability Status
Commands 3: /widget-generate, /widget-lint, /widget-validate
Agents 3: widget-api-assistant, widget-architect, widget-debugger
Hooks Yes: hooks/hooks.json
MCP No
LSP No
Source Freshness last_verified: 2026-06-12; hook/agent safety boundaries documented here and in validation.
Verification npm run validate; live SAC upload/runtime checks pending.

Plugin Components

Agents

Agent Purpose Trigger Examples
widget-architect Design widget structure, metadata, and integration patterns "design custom widget", "plan widget architecture", "widget metadata design"
widget-debugger Troubleshoot loading, data binding, CORS, and runtime issues "widget won't load", "CORS error", "data not binding", "debug widget"
widget-api-assistant Write JavaScript widget code, lifecycle functions, API integrations "write widget code", "implement lifecycle functions", "widget events"

Commands

Command Usage Description
/widget-validate /widget-validate [file] Validate widget.json schema and widget.js structure
/widget-generate /widget-generate Interactively generate widget scaffold with JSON, JS, local builder, sample-informed hints, and browser design runtime
/widget-lint /widget-lint [file] Performance, security, and best practices analysis

Templates

Docs-audited scaffolds in templates/ directory:

Template Description
basic-widget.js Minimal Web Component with all lifecycle functions
data-bound-chart.js ECharts widget with SAC data binding
styling-panel.js Runtime customization panel
builder-panel.js Design-time configuration panel
local-builder/ No-install local scaffold builder and SAC two-file artifact exporter
design-runtime/ No-build browser preview, scenario switching, design controls, and agent iteration export
widget.json-minimal Bare-minimum metadata
widget.json-complete Full-featured metadata with all options

Validation Hooks

Claude activation hooks for quality checks on Write/Edit/MultiEdit operations; outside Claude, run the validators manually before committing widget files:

  • widget.json: Required fields, tag naming, property types, data binding config
  • widget.js: Lifecycle functions, Shadow DOM, propertiesChanged dispatch
  • Performance: Resize debouncing, chart disposal, XSS prevention
  • CSS/Styling: Shadow DOM scope, story-theme boundary, and SAC ZIP packaging caveats
  • Context Reminders: Template suggestions, command recommendations

Keywords for Discovery

Primary Keywords: SAP Analytics Cloud, SAC, custom widget, custom widget development, SAC widget, Analytics Designer widget, Optimized Story Experience widget

Technical Keywords: Web Component SAC, JavaScript widget, JSON metadata, widget.json, widget lifecycle, onCustomWidgetBeforeUpdate, onCustomWidgetAfterUpdate, onCustomWidgetResize, onCustomWidgetDestroy, connectedCallback, Shadow DOM widget

Data Keywords: SAC data binding, widget data binding, dataBindings feeds, getDataBinding, getResultSet, getResultMember, ResultSet, dimension feed, measure feed, mainStructureMember

UI Keywords: styling panel, builder panel, design time panel, widget properties, propertiesChanged event, dispatchEvent, CustomEvent

CSS Keywords: Shadow DOM CSS, SAP theme variables, SAC story theme CSS, CSS compliance, custom widget styling, ZIP resource upload

Integration Keywords: ECharts SAC, D3.js SAC, Chart.js SAC, third party library SAC, Apache ECharts widget

Hosting Keywords: SAC hosted widget, GitHub Pages widget, AWS S3 widget, Azure widget hosting, widget hosting, external hosting

Security Keywords: integrity hash, SHA256 integrity, widget security, CORS SAC, ignoreIntegrity, subresource integrity

Troubleshooting Keywords: widget loading error, couldn't load custom widget, integrity check failed, widget debugging, console.log widget, DevTools widget

Sample Widgets Keywords: SAC community widgets, custom widget samples, ECharts widget samples, ready-to-use SAC widgets, Funnel Chart widget, Sankey Chart widget, KPI Ring widget, Gantt Chart SAC

Use Cases

This skill should be used when:

  • Creating custom visualizations for SAP Analytics Cloud
  • Previewing generated custom widgets in a non-SAP browser design runtime before SAC import
  • Generating widget scaffolds locally with no public CDN, no npm install, and no remote builder service
  • Choosing sample-informed starting points for data-bound charts, KPI/gauge widgets, hierarchy/flow charts, input utilities, add-ons, or build-based apps
  • Building interactive components for SAC stories
  • Integrating third-party charting libraries (ECharts, D3.js, Chart.js)
  • Implementing custom input controls for Analytics Designer
  • Developing data-bound widgets with custom data visualization
  • Adding styling panels for user customization
  • Troubleshooting custom widget loading or data binding issues
  • Migrating widgets between SAC tenants
  • Setting up widget hosting infrastructure

Requirements

  • SAP Analytics Cloud tenant with:
    • Optimized Story Experience, OR
    • Analytics Designer
  • JavaScript/Web Components knowledge
  • Hosting solution (SAC-hosted, GitHub Pages, or web server)

Features

  • Complete JSON metadata schema reference
  • Lifecycle function documentation and patterns
  • Data binding configuration and usage
  • Styling and builder panel implementation
  • CSS and styling compliance guidance for Shadow DOM, story-theme boundaries, and SAC ZIP resource packages
  • Local custom widget builder for metadata, properties, feeds, methods, events, and SAC two-file export
  • SAP sample-widget lessons for generation defaults, Data Binding/OVM caveats, Resource-ZIP path rules, panel separation, add-on routing, and build-based app boundaries
  • Browser design runtime for local preview, multi-widget comparison, design-token tuning, and agent iteration export
  • Multiple hosting options (SAC-hosted, GitHub, external)
  • Security best practices (integrity hash, CORS)
  • Common error solutions and debugging techniques
  • 8 ready-to-use widget templates
  • ECharts integration guide
  • Widget Add-On feature (QRC Q4 2023+)
  • Performance optimization guidelines
  • Custom types and script API types

Version Information

Property Value
Plugin Version 2.2.2
Skill Version 2.1.0
SAC Version 2026.8
Last Verified 2026-06-12
Token Savings ~75%
Errors Prevented 25+
Agents 3
Commands 3
Templates 8

Official Documentation

Sample Repositories

Use references/sap-sample-widget-lessons.md before generation when the requested widget resembles these samples. The reference covers all 17 sample folders and keeps the samples as lessons, not copied template code.

Community Resources

License

GPL-3.0

Maintainer: Eduard Jiglau | hello@sap-ai-skills.com | sap-ai-skills.com | Repository

Source: SKILL.md on GitHub

Third-party checks

1 alert16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides a comprehensive environment and templates for developing SAP Analytics Cloud (SAC) Custom Widgets. It promotes robust security best practices, including subresource integrity (SRI), XSS prevention via input sanitization, and proper Shadow DOM encapsulation. It includes local tools for scaffold generation and iteration that operate on the user's machine without requiring external packages or services.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    3/16 files flagged

  • ZeroLeaks5mo

    2 findings · Score: 80/100

Provenance

Signed by skilld at 4d87d99. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated last month

Capability

What it can do
Reads files Runs commands Network
All 3 allowed tools
ReadBashWebFetch
Other metadata
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"
  ]
}

README badge

README badge for secondsky/sap-skills/sap-sac-custom-widget