Integrating Custom Widgets into Stories
Once a custom widget has been imported into the SAP Analytics Cloud environment, it is available for use by story authors. These widgets are designed to integrate into the story design experience, following the same interaction patterns as standard SAP components.
Story authors can find custom widgets in the Insert menu alongside standard charts, tables, and input controls. After placing a custom widget on a story canvas, you can move, resize, and style it just as you would with a built-in visualization. This consistency ensures that business users benefit from a unified experience, whether they are interacting with standard SAP components or specialized custom visualizations.
Configuring Properties and Data Bindings
The power of a custom widget lies in its ability to be tailored to specific business needs. After placing the widget on the page, the next step is to configure it via the Builder and Styling panels.
- Property Configuration: Custom widgets often expose specific properties defined by the developer (such as colors, thresholds, or toggle switches). These properties allow story authors to change the widget's behavior without writing code.
- Data Binding: To make the widget dynamic, you must connect it to an SAP Analytics Cloud data model. In the Builder Panel, you define "bindings." These bindings map dimensions and measures from your data model to the specific data requirements of the custom widget. For example, if you are using a custom gauge widget, you would bind a "Sales Revenue" measure to the widget's primary value input.
Interaction and Filtering
Custom widgets are not static images; they are fully interactive components. They can react to story-level and page-level filters, depending on their implementation. When a user selects a value in a standard input control or a filter bar, the custom widget updates its data display accordingly. Furthermore, developers can design custom widgets to act as filter source themselves, allowing a selection within the widget to filter other components on the page.
Comparing Custom Widgets to Built-in Charts
While SAP Analytics Cloud provides a robust library of built-in charts, custom widgets are used when specific visualization requirements exceed standard capabilities.
| Feature | Built-in Charts | Custom Widgets |
|---|---|---|
| Ease of Use | High; ready out-of-the-box. | Requires initial development and import. |
| Standardization | Follows SAP Fiori design guidelines strictly. | Can follow any design language or branding. |
| Data Binding | Standardized measure/dimension slots. | Flexible; slots are defined by the widget developer. |
| Extensibility | Based on the available chart types. | Highly flexible (3D models, specialized maps, etc.). |
When choosing between them, in most cases start with a built-in chart. Use a custom widget only when the business requirement demands a unique visualization logic or a specific third-party library that is not available natively.
In the following exercise, you will use a custom widget to bind it to a data model. In the final part you can compare it to a standard chart.
Summary
- Integration: Custom widgets are added, moved, and resized in a story exactly like standard SAP Analytics Cloud components.
- Data Driven: Use the Builder Panel to create data bindings that connect model dimensions and measures to the widget.
- Interactive Design: Custom widgets respond to filters and input controls, ensuring they remain synchronized with the rest of the story data.
- Strategic Usage: Choose custom widgets over built-in charts when you need specialized visualization capabilities that go beyond standard features.