How do I handle widget security and hosting?

The skill provides guidance on hosting options (including SAC-hosted files) and helps generate SHA256 integrity hashes required for production deployments.

Does it support the Optimized Story Experience?

Absolutely. This skill is updated to support the latest standards for both the Optimized Story Experience and the Analytics Designer.

Can I use libraries like D3.js or ECharts with this skill?

Yes, the skill includes specific implementation patterns for integrating, rendering, and properly disposing of third-party charting libraries within the SAC widget lifecycle.

What is an SAC Custom Widget?

An SAC Custom Widget is a Web Component that allows developers to extend SAP Analytics Cloud with custom charts, UI elements, or specialized logic that are not available out-of-the-box.

How does this skill help with data binding?

It provides standardized templates and code snippets to map SAC data model dimensions and measures to your widget's internal data structures using the dataBindings metadata.

SAP Analytics Cloud Custom Widgets

Name: SAP Analytics Cloud Custom Widgets
Author: secondsky

bysecondsky

•

Analytics & Monitoring

Builds, debugs, and optimizes production-ready custom visualizations and interactive components for SAP Analytics Cloud.

This skill empowers developers to extend SAP Analytics Cloud (SAC) by creating sophisticated custom widgets and visualizations using Web Components. It streamlines the entire development lifecycle, from architecting JSON metadata and implementing JavaScript lifecycle hooks like onCustomWidgetAfterUpdate to configuring complex data bindings and ensuring security via SHA256 integrity hashes. Whether you're integrating third-party libraries like D3.js and ECharts or troubleshooting CORS and data-loading issues, this skill provides the templates and domain-specific guidance required for the Optimized Story Experience and Analytics Designer.

Key Features

01Implementation of SAC-specific lifecycle functions and data binding feeds

026 GitHub stars

03Optimization patterns for the Optimized Story Experience and Analytics Designer

04Security validation including SHA256 integrity hash generation and CORS checks

05Scaffolding for JSON metadata and Web Component JavaScript structures

06Integration support for third-party libraries like ECharts, D3.js, and Chart.js

Use Cases

01Creating bespoke data visualizations not available in standard SAC chart types

02Troubleshooting and fixing widget loading, property sync, or data-binding errors

03Building interactive input forms or KPI cards for Analytics Designer applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/sap-skills sap-sac-custom-widget

For use in Claude.ai and ChatGPT

Download Skill