SAC Custom Widget Data Binding – Creating a CSV Download component

So far it has not been possible to assign a Custom Widget to a data source. For that reason, custom visualizations had to use a workaround to bind them to data models:

  1. adding a hidden table to the dashboard
  2. using the table's data source's script methods to retrieve the data

This is both inefficient for the developer of the Widget and it gives the feeling of lacking integration for the end users.

This changes with the new Data Binding feature, which was shipped by mid 2022: Custom Widgets now can also show a Builder Panel! So far this part of the Designer was only available for standard visualizations.

We had the honor to take part in a beta test of this function – and would like to share a sneak peak and our experience with the new function.

The Builder Panel

Just like for the standard Widgets, the Builder Panel for Custom Widgets allows for:

  • Linking of Models
  • Selecting Dimensions for the Feeds
  • Selecting Measures

Of course, the developer of a Custom Widget can also choose to provide a fully felxible Custom Data Binding on the Designer Panel, and generate the according Data Binding objects programmatically from it.

JSON and Javascript files

The new Data Binding is based on the existing JSON- and Javascript-files for Custom Widgets, with some enhancements:

  1. The JSON file gets a new property "dataBindings", which allows for the definition of "feeds".
  2. The Javascript file gets a new function "getDataBindings" and properties to store the datasource definition.
To use the Data Binding the Runtime View Optimization needs to be enabled in the Application settings. Otherwise, Custom Widgets with Data Binding will not be displayed.
Unfortunately, not all standard Widgets are currently available in Optimized Mode. A customer might be unable to switch to Optimized Mode because a standard Widget is still missing – which in that case would be a show stopper for using the Custom Widget.
However, as clearly SAP is investing heavily in an enhancing this feature, we do not think that this show stopper will still be there when the Data Binding is publicly released.

Example: Creating a CSV Downloader Widget

During beta test, we have created a small CSV Download Widget, which – in contrast to our biExport Widget - runs solely on the end user's client.

Also we have made the source code publicly available on our Github site!

Feel free to check out how we utilized the new Data Binding. But please note that of course all the functions are subject to change!

Lessons learnt

We can make this short: We love the new possibility to bind to data directly. This is an important enhancement for SAC development!

Bastian Buchholz
Author: Bastian Buchholz
Creation date: 11.11.2022
Category: Feature Overview
back to overview