Announcing Custom Widgets Data Binding in SAP Analytics Cloud - Analytics Designer

[marouferchichi]

What's new with Custom Widgets

You might have heard about Custom Widgets in Analytics designer, and the strength of this capability, and the ability that gives to users to go beyond the narratives and build their specific user interface elements.

I'm so glad to annonce the new Custom Widgets improvement: Custom Widgets Data Binding

Before presenting this new improvement, let me first introduce you Custom Widgets, and why would you need them and the way to use them?

Custom Widgets: Overview

The SAP Analytics Cloud Custom Widget framework lets you extend the predefined set of widgets provided by analytics designer with your own custom widgets. It's a very useful capability, for example, if you need a specific user interface element, a particular visualisation of data, or a certain functionality in your analytic application that is not provided by the predefined set of widgets.

Custom widgets seamlessly integrate into SAP Analytics Cloud, analytics designer. Like any other predefined widget, they show up in the widget palette and work like any other widgets; except that they were built by customers or partners, instead of by SAP developers.

A custom widget provides the following capabilities:

• 
  

  It is listed in the widget menu list from where you can add it to the canvas.

  
  


• 
  

  It can be moved and resized on the canvas.

  
  


• 
  

  It appears in the widget outline.

  
  


• 
  

  It can contribute script methods to the analytics designer script language.

  
  


• 
  

  It can provide areas in analytics designer where you can set property values of the custom widget at design time (Styling Panel and Builder Panel).

  
  


• 
  

  And the highly required feature: it can be linked to a data source like any standard widget via the Builder Panel (where you can set Dimensions and Measures).

  
  

You may have already seen custom widgets in demos. If you are interested to discover more Demo, I will invite you to watch the below demo video, which show the strength of Custom widgets in extending the visualization:

• A date picker, which is filtering the days on which you are looking for parking spot for your Bike.


• 3D presentation of the selected parking on which you can have a full overview of all the free spots, and also selecting the free spots on the selected date.

How to build a Custom Widget ?

Building a Custom Widget is very simple. Custom Widgets are simply a set of files; the most basic ones consists of JavaScript and metadata file:

• The metadata file has a .JSON filename; It defines everything that SAC needs to know about a widget; how it is identified, its properties, events, methods, and where the web component implementation can be found. This file is required.


• The web component it's a JavaScript file; containing the implementation of the web component in the application canvas.This file is required and needs to be visible to the end user, as their browser will be told to fetch it when this widget is shown within an application. The widget developers edit, host, and update their widgets on their own cycle. The JavaScript can be hosted on their favorite cloud hosting service and the customer only needs to install the metadata file to enable the widget. This allows for easy management and updating of widgets. You can read the developer’s handbook here for more details.

How users can upload and consume Custom Widget ?

After creating the required files and hosting the web component, users can now enable custom widget on their Sap Analytics Cloud tenant by simply uploading the JSON file. That’s it. The widget will be enabled and will show up in your palette.

Custom Widgets new feature: Data Binding

Design Time Level:

The highly required feature Data Binding, it's now available. In order to use this new Custom Widget capability, users must enable the Optimized View Mode within Analytics Designer:

After you save your application and enabling the Optimized View Mode, now you can add your Custom Widget to the canvas, and bind it via the Builder panel like any standard widget:



With this direct widget data binding, users won't need anymore to use hidden tables that pulls the data, then send the whole result set to the Custom Widget using the API getResultSet. You need simply to open the builder panel, link your data model, and set your dimension and measure.

Custom Widget Files Level:

• 
  

  JSON File

  
  

In order to benefit from the new feature, and give Custom Widgets data access, users must add the new called property "dataBindings" into the JSON file.

The keys of the dataBindings property represent the arbitrary name of the dataBinding, and contains a "feeds" property which is an array of objects that define a "feed". Currently this is limited to defining one dataBinding object. Defining multiples will not yield any error but only the first one will be used.

You can choose an arbitrary "id" and "description" and choose from "dimension" or "mainStructureMember"(also known as measure) as "type". The type defines what you can add into the according feed.

A default builder panel will be accessible in the design time if you define a dataBinding like the example below in the Json file:

    "dataBindings": {

      "myDataBinding": {

        "feeds": [

          {

            "id": "dimensions",

            "description": "Dimensions",

            "type": "dimension"

          },

          {

            "id": "measures",

            "description": "Measures",

            "type": "mainStructureMember"

          }

        ]

      }

    }

note:”myDataBinding” is the name of the data binding object, which you can change.

• Web Component File

In the web component, you can use the data bindings that you've defined in the custom widget JSON file to access data and call the supported APIs.

Accessing Data: Now you can access the data by the name of dataBindings that you’ve defined in the custom widget JSON file: "myDataBinding"as shown in the example above.

//"myDataBinding" in dataBindings of JSON file

this.myDataBinding

You can write scripts for result set traversal like this:

// Traverse result set

this.myDataBinding.data.forEach(row => {

  // Parse row

})

Calling DataBinding APIs: You can use the function getDataBinding, which will return dataBinding object that has all the data driven apis the custom widget can execute:

const dataBinding = this.dataBindings.getDataBinding('myDataBinding')

await dataBinding.addDimensionToFeed("dimensions", dimensionId)

The example above uses feed related APIs to add a dimension.

To find a list of APIs that can be called by DataBinding object, refer to Analytics Designer API Reference. Search for DataBinding there.

Next Step !

In the coming weeks, I’ll be writing another blog on how you can create your first Custom Widget using the new capability data binding, along with some tips and tricks. You can also read the official custom widget documentation here.

Future Direction

With this release of Custom Widget Data Binding, you can now leverage your visualisation by following simple steps, an easy work for the application designer and a big step to improve the productivity.

Stay tuned for important enhancements planned in the future !