SAP Analytics Cloud: Custom Widgets im Analytics Designer entwickeln

With the Analytics Designer, it is possible to create analysis applications in the SAP Analytics Cloud (SAC). However, there are scenarios where the capabilities of the Analytics Designer are not enough. The solution is custom widgets, which offer an almost unlimited range of functions. In this blog post, you will learn how an Analytics Designer custom widget is structured and what advantages you benefit from.

SAC und Analytics Designer

Within the SAP Analytics Cloud, the Analytics Designer is a component for complex reporting applications. With the help of ready-made report elements, interactive applications can be designed and expanded with individual functions thanks to extensive scripting options. Compared to the classic on-premise report applications from SAP, the Analytics Designer is the successor to the SAP Lumira Designer. While not all of the functionalities from the Lumira Designer have yet been integrated into the SAC, SAP is clearly focusing the development on the Analytics Designer and preferably provides it with new features.

In the event that the previous functions of the Analytics Designer are not sufficient in an individual application, SAP also enables the Development of own custom widgetsthat can be integrated into the SAC. These enable the free development of your own logic and visualizations in JavaScript and are subject to only a few restrictions in terms of their possible range of functions. In the following, the basic structure of a custom widget for the Analytics Designer is shown as an example.

Structure of a custom widget in Analytics Designer

A custom widget for the SAP Analytics Cloud consists of the following four components:

metadata

The custom widget metadata is represented by a simple JSON file containing the basic properties and configuration parameters. Only this metadata file is uploaded to the SAC. The other three components are only linked in the file and must be hosted externally on a dedicated web server. For development purposes, external hosting can be implemented using a local web server or a Github repository with Github Pages, for example.

application logic

The actual logic of the custom widget is developed in JavaScript and stored in a single file. But he can Full functionality of JavaScript used so that the integration of external libraries or data queries on third-party systems is also possible.

Styling (optional)

Here the styling panel is implemented for configuration in analytics designer to do that Appearance of the components via the graphical interface of the Analytics Designer.

Builder (optional)

This is where the builder panel for configuration in Analytics Designer is implemented. The panel is relevant when a Data source connected to the custom widget shall be.

sample application

A custom widget is shown below as an example use case, which integrates a SAPUI5 control for displaying a calendar in the SAC. The already available SAPUI5 framework is used for this and addressed in the custom widget. While in principle any SAPUI5 controls can be integrated in this way, the SAPUI5 version currently used in the SAC must be checked beforehand. Otherwise, newer controls may not yet be compatible. The integration looks as follows within an Analytics Designer application:

On the one hand, the application logic contains the XML view of the components, which is translated into HTML at runtime. The basic structure can be adopted for various SAPUI5 controls from the Samples Library at ui5.sap.com and can look like this:

In addition to the XML view, a SAPUI5 control requires logic that is implemented within a JavaScript controller. In the case of this custom widget, the logic is implemented as follows in the form of a separate JavaScript method. The “handleCalendarSelect” method is used to test the selected date of the calendar in the console:

According to the methodology used, the SAPUI5 control shown can be exchanged as desired, resulting in a wide range of possible applications. Alternatively, other frameworks can be integrated in order to implement visualizations or purely technical custom widgets. The latter are not displayed in reports, but can, for example, read additional data from third-party systems or implement logic that is not available with the native options of Analytics Designer. Through the simple construction of custom widgets development effort is also reduced compared to previous solutions such as the SAP Lumira Designer. Missing functionalities of the Analytics Designer can be quickly implemented as a custom widget. If you have use cases for custom widgets in the SAP Analytics Cloud, please contact us!

Was this article helpful to you? Or do you have any questions? Write us a comment or give us a call.