sap-sac-custom-widget

Validates SAC custom widget JSON metadata and JavaScript structure for correctness and best practices

Analyzes SAC custom widget code for performance issues, security concerns, and best practice violations

Interactively generates SAC custom widget scaffold with widget.json and widget.js files based on user requirements

Use this agent when the user reports "widget won't load", "custom widget not appearing", "CORS error in widget", "data not binding", "widget not rendering", "integrity check failed", "propertiesChanged not firing", or needs help troubleshooting SAP Analytics Cloud custom widget issues. Examples: <example> Context: User's custom widget is not loading in SAC user: "My custom widget shows 'The system couldn't load the custom widget' error" assistant: "I'll use the widget-debugger agent to systematically diagnose this loading issue. Common causes include incorrect URLs, CORS configuration, or JavaScript errors." <commentary> Widget loading failures require systematic debugging of multiple potential causes. </commentary> </example> <example> Context: User's widget loads but data is not displaying user: "My widget loads but I'm not seeing any data from the model" assistant: "Let me use the widget-debugger agent to troubleshoot your data binding. We'll check the dataBindings configuration, feed setup, and how you're accessing the ResultSet." <commentary> Data binding issues require checking both JSON configuration and JavaScript implementation. </commentary> </example> <example> Context: User sees CORS errors in browser console user: "I'm getting CORS errors when trying to load my widget from GitHub Pages" assistant: "I'll use the widget-debugger agent to diagnose the CORS issue. We'll verify the hosting configuration and Access-Control-Allow-Origin headers." <commentary> CORS issues are common with externally hosted widgets and require specific debugging steps. </commentary> </example>

Use this agent when the user asks to "design a custom widget", "plan widget architecture", "structure my SAC widget", "widget metadata design", "configure widget.json", "choose widget components", or needs guidance on SAP Analytics Cloud custom widget architecture and design decisions. Examples: <example> Context: User wants to create a new custom widget and needs architecture guidance user: "I need to build a custom Sankey chart widget for SAC. How should I structure it?" assistant: "I'll use the widget-architect agent to help design your Sankey chart widget architecture, including the JSON metadata structure, component organization, and data binding strategy." <commentary> The user needs architectural guidance for a new widget, which is the primary purpose of this agent. </commentary> </example> <example> Context: User is unsure about widget component structure user: "Should I use a styling panel or builder panel for my widget configuration?" assistant: "Let me use the widget-architect agent to analyze your widget's requirements and recommend the appropriate panel structure. Styling panels are for runtime customization while builder panels are for design-time configuration." <commentary> Component selection decisions require architectural understanding of SAC widget patterns. </commentary> </example> <example> Context: User needs to design data binding for their widget user: "How do I set up data binding feeds for a multi-dimensional chart?" assistant: "I'll use the widget-architect agent to design your data binding architecture, including feed configuration for dimensions and measures in your widget.json." <commentary> Data binding architecture is a key design decision for data-driven widgets. </commentary> </example>

Use this agent when the user asks to "write widget code", "implement lifecycle functions", "create widget JavaScript", "add data binding code", "widget event handling", "integrate ECharts/D3.js", "widget property definitions", or needs help writing SAP Analytics Cloud custom widget JavaScript code. Examples: <example> Context: User needs to implement widget lifecycle functions user: "How do I implement the lifecycle functions for my custom widget?" assistant: "I'll use the widget-api-assistant agent to help you implement the SAC widget lifecycle functions: onCustomWidgetBeforeUpdate, onCustomWidgetAfterUpdate, onCustomWidgetResize, and onCustomWidgetDestroy." <commentary> Lifecycle function implementation is core widget development that this agent specializes in. </commentary> </example> <example> Context: User wants to integrate ECharts into their widget user: "Can you help me create an ECharts bar chart widget with data binding?" assistant: "Let me use the widget-api-assistant agent to help you integrate ECharts with SAC data binding. I'll provide the complete implementation including chart initialization, data transformation, and resize handling." <commentary> Third-party library integration with SAC data binding requires specific patterns this agent provides. </commentary> </example> <example> Context: User needs to add custom events to their widget user: "How do I fire a custom event when a user clicks on my widget?" assistant: "I'll use the widget-api-assistant agent to implement custom event handling. We'll define the event in widget.json and dispatch it from your JavaScript code." <commentary> Event definition and dispatch requires coordinated changes to JSON and JavaScript. </commentary> </example>

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.

2 hooks across 2 events