/widget-generate

name: widget-generate
description: Interactively generates SAC custom widget scaffold with widget.json and widget.js files based on user requirements
allowed-tools:
  - Read
  - AskUserQuestion
argument-hint: [widget-name]

Shell Snippet Notes

• Prefer OS-specific snippets when commands differ. Bash snippets assume Linux/macOS, WSL2, or Git Bash; Windows-native snippets should use PowerShell or cmd-compatible commands.
• Install the command-specific tooling shown near each snippet before running it.
• Confirm before running commands that delete files, change ownership, deploy, or modify remote systems.

Output Contract

Return role-aware suggestions, the Widget Brief, planned widget structure, SAP sample lesson fit, file snippets or files to create/change, local-builder/design-runtime inclusion notes, security/accessibility notes, and confirmation points before writes. Default to snippets/plans; generate files only when the user explicitly requests generation and confirms a target directory.

SAC Custom Widget Generator Command

Interactively create a complete SAP Analytics Cloud custom widget scaffold including widget.json metadata, widget.js Web Component implementation, optional builder/styling panels, the local builder scaffold, and the browser design runtime. For prompt-driven requests, use a two-stage flow: suggest 2-3 creative options first, then generate the selected package.

Usage

/widget-generate
/widget-generate my-chart-widget
/widget-generate --quick

Interactive Mode (Default)

When invoked without `--quick`, ask the user these questions:

Required Questions

1. **Widget Name**

• Display name for SAC (e.g., "My Custom Chart")
• Will generate manifest ID, tag, class, widget folder name, and `newInstancePrefix` from this

2. **Widget ID**

• Reverse domain notation (e.g., "com.company.mychart")
• Default: Generate from widget name

3. **Widget Role**

• Options: Table/chart/KPI, UI control/navigation (menu, sidebar, filter), Hybrid, Widget Add-on, Build-based integration
• Use `references/widget-discovery-intake.md` to select the correct route before asking about data or implementation details
• Consult `references/sap-sample-widget-lessons.md` for the nearest SAP sample family and caveats

4. **Data-Source Mode**

• Options: SAC-bound, Property/config-supplied, No data
• Ask for dimensions, measures/key figures, dates, versions, filters, and feed order only for SAC-bound widgets
• For No data widgets, use the minimal manifest/property/event pattern and omit `dataBindings` unless the runtime consumes SAC model data

5. **Business Goal and Interaction Intent**

• For a table/chart/KPI: decision or insight, aggregation/formatting rules, and empty/error state
• For a menu, sidebar, or filter: item hierarchy, labels/icons, active/disabled states, commands, navigation/filter actions, permissions, keyboard behavior, and mobile layout
• For a hybrid: define the interaction contract first, then request only the model state it displays or controls

6. **Evidence and Data Contract**

• Invite user-provided screenshots, PDFs, images, brand guides, sanitized CSV/schema, and model/story evidence
• Confirm technical IDs, feed mappings, asset rights, licenses, and navigation destinations before code generation
• For SAC-bound widgets, request semantic field roles, aggregation/formatting, expected data volume, and exact feed order
• For property/config-supplied or No data widgets, request property defaults, validation, and authoring behavior instead of dimensions or key figures

7. **Components**

• "Which components do you need?"
• Options: Main only, Main + Styling Panel, Main + Builder Panel, All three

8. **Local Builder**

• "Include the local SAC widget builder scaffold?"
• Default: Yes for local or enterprise environments
• Copy `templates/local-builder/` into generated packages when the user wants a no-install browser builder for metadata, properties, feeds, methods, events, and SAC artifact export
• Mention that the local builder includes generic sample-informed pattern hints but does not copy SAP sample code or assets

Optional Questions

9. **Third-Party Library**

• "Will you integrate a charting library?"
• Options: ECharts, D3.js, Chart.js, None

10. **Brand and Visual Direction**

• Brand logo/icon URLs, colors, style preference, or user-provided screenshots/PDFs/images
• Use visual evidence to inform layout, hierarchy, and design tokens; do not treat it as proof of asset rights or technical metadata
• Use brand assets only when rights, source, and SAC accessibility are confirmed
• If provided, map icon URL to manifest `icon` and logo URL to a `brandLogoUrl` property

11. **Optional Hosted Exploration**

• Offer [Custom Widget Builder](https://www.custom-widgets.de/custom-widget-builder) or [live demo](https://www.custom-widgets.de/demo) only when the user permits public-web use for a desktop, non-sensitive visual prototype
• Keep `templates/local-builder/` as the enterprise-safe default
• Never send confidential screenshots, PDFs, tenant details, code, data, credentials, or internal assets to hosted tools
• Treat downloaded packages as untrusted external artifacts and validate them locally before SAC import

12. **Deployment and Reuse Target**

• SAC-hosted files, external HTTPS host, or widget server
• SAC ZIP resource upload, if the tenant flow requires uploading a ZIP after `widget.json`
• Confirm this before deciding whether CSS/HTML can be separate resource files or must be embedded in JavaScript templates
• Ask whether the widget should be reusable inside an SAC composite

13. **Initial Properties**

• "What properties should be configurable?"
• Default: title (string), color (Color)

Quick Mode (--quick)

Generate minimal widget with defaults:

• Main component only
• No data binding
• Basic title property
• No third-party