sac-hello-world-widget

SAC Hello World Custom Widget (POC)

Minimal custom widget for SAP Analytics Cloud, following the Custom Widget Developer Guide structure: a widget.json manifest plus a web-component JS file.

Files

• widget.json — manifest: name, properties (width, height, text), one exposed scripting method (setText), and a reference to the hosted main.js.
• main.js — defines the <com-porticobenefits-helloworld> custom element (a shadow-DOM <div> that renders the text property, default “Hello World”).
• icon.svg — small icon shown in the SAC widget panel.

1. Host main.js and icon.svg

This repo is hosted at github.com/bboehm1986/sac-hello-world-widget and served via GitHub Pages at:

• https://bboehm1986.github.io/sac-hello-world-widget/main.js
• https://bboehm1986.github.io/sac-hello-world-widget/icon.svg

widget.json already points at these URLs. GitHub Pages serves everything over HTTPS with permissive CORS by default, so no extra config is needed for SAC to fetch these files.

If GitHub Pages isn’t enabled yet for this repo: go to Settings > Pages, under “Build and deployment” set Source: Deploy from a branch, branch main, folder / (root), then Save. It takes a minute or two to go live the first time — check the URL above returns the file (not a 404) before registering the widget in SAC.

2. Register the widget in SAC

1. In SAC, go to System > Custom Widgets.
2. Click Add Custom Widget (+).
3. Upload widget.json.
4. Give it a name (e.g. “Hello World POC”) and save.

3. Use it

1. Open (or create) a Story or Analytic Application.
2. Open the widget panel and find your custom widget under Custom Widgets.
3. Drag it onto the canvas — it should render “Hello World” immediately.
4. Optional: in the widget’s Styling panel, change the text property to confirm live property updates work.
5. Optional (Analytic Applications only): call Widget_1.setText("...") from a script to confirm the exposed method works.

Next steps beyond the POC

• Add real properties/events (e.g. an onClick event) once the basic render loop is confirmed.
• Move from a single inline <style> template to a build step (bundler) if the widget grows.
• Consider signing/hosting via a proper CI pipeline instead of manual upload once this moves past POC.