A Comprehensive Guide for Custom Widget in SAP Analytics Cloud

With the QRC Q2 release of SAP Analytics Cloud, you can now use Custom Widgets in the Unified Story. This blog will walk you through creating a Custom Widget from the ground up, providing detailed steps on building, uploading, and using your Custom Widget within your story. Let’s dive in and get started!

But first, let’s recap…

SAP Analytics Cloud (SAC) is a comprehensive cloud platform provided by SAP that integrates business intelligence, planning, and predictive analytics in a single solution. It empowers organizations to make data-driven decisions by enabling users to visualize, analyze, and share insights across the enterprise.

SAP Analytics Cloud planning offers a range of features, including data connectivity, data visualization, collaborative planning, augmented analytics, and predictive capabilities. Users can connect to various data sources, create interactive dashboards, perform ad-hoc analysis, and collaborate in real-time, fostering a data-driven culture within the organization.

Background

SAC Planning, Analytics Designer is a flexible data visualization tool allowing users to create interactive dashboards from various data sources. It uses HTML markup, JavaScript code, and CSS styles to build custom visualizations. To meet user demands for new components, SAP Analytics Cloud planning introduced the Analytics Designer Custom Widget Software Development Kit (SDK).

This SDK allows developers to create third-party components called custom widgets. These widgets, developed by partners and customers, can be added to analytic applications along with the standard set of widgets.

The applications containing these custom widgets can be stored and accessed in custom Analytics Cloud. Third-party developers can also submit their custom widgets for certification in SAP Analytics Cloud, Analytics Designer.

A custom widget consists of the following files

Now, the SAC Custom Widget Hands-on Guide is divided into 9 chapters. Your journey begins with creating a fundamental Web Component file, a key technology file for Custom Widgets.

The Web Component file (JavaScript) is where you specify how your Custom widget should behave, what functions it should have, and how it should look.

On the other hand, the Metadata file (JSON) serves as a guide for the system (like SAC) by providing essential information about the widget. It includes details like how the widget is named, its features, events, methods, and where the system can find the implementation details in the Web Component file. Essentially, this file acts as a connector between the Web Component and the system.

Next, you’ll modify your Web Component file by incorporating essential Custom Widget lifecycle functions, including:

• onCustomWidgetResize: This function handles resizing of the Custom Widget.
• onCustomWidgetBeforeUpdate: It manages actions that occur before the Custom Widget updates.
• onCustomWidgetAfterUpdate: This function deals with tasks after the Custom Widget has been updated.
• onCustomWidgetDestroy: Handles the process when the Custom Widget is being destroyed or removed.

When you incorporate the Web Component as a SAC Custom Widget, the SAC framework automatically triggers specific functions in your Web Component at different stages. For instance, when there are changes in properties, width, height, or other aspects of the Custom Widget, the framework calls corresponding functions to handle those changes. This ensures that your Custom Widget behaves as intended and responds appropriately to modifications within the SAP Analytics Cloud environment.

In this section, you’ll discover how to connect your Custom Widget to various SAP Analytics Cloud data models. This involves learning how to incorporate a data binding mechanism, allowing Custom Widgets to effortlessly interact with and control data.

In the next steps of building your SAP Analytics Cloud Custom Widget, you’ll explore rendering bound data using the Apache ECharts third-party library. This involves loading the library, parsing dimensions, measures, and data from the bound results, and converting them into an ECharts option.

Later, you’ll enhance your Custom Widget by adding properties and functions. This not only improves interactions with other widgets in your story but also facilitates script-driven control.

Following that, you’ll dive into incorporating events into your Custom Widget. This enables you to insert scripts at various lifecycle stages, achieving specific functionalities. Additionally, you’ll learn to expose scripting capabilities and invoke the script editor during design time.

This process ensures your SAC Custom Widget is not only visually appealing but also highly interactive and script-ready, enhancing its utility in the custom Analytics Cloud environment.

In the final chapter, you’ll discover how to enhance your SAC Custom Widget by adding a Styling Panel. This feature allows users to customize various properties, such as colors, fonts, and shapes, while editing the story. The Styling Panel is implemented as a Web Component, making it intuitive for users to personalize the appearance of your Custom Widget.

As an optional step, you’ll be guided on calculating the integrity of your Custom Widget. This involves creating a hash in the JSON file based on the JavaScript file, ensuring that the JavaScript file hasn’t been altered. During development, you can use “ignoreIntegrity: true” to skip this check, but it’s advisable to enable this validation in the production environment for security.

Additionally, you’ll continue learning how to add events to your SAC Custom Widget, allowing you to insert scripts into the widget’s lifecycle for specific functionalities. This includes exposing scripting capabilities and accessing the script editor during design time, enhancing the overall versatility of your SAC Custom Widget.

Here’s hoping this blog has provided a comprehensive overview of Custom Widget Development in SAP Analytics Cloud. From understanding the essential files like the Web Component and Metadata files to integrating data binding mechanisms and rendering data from third-party libraries like Apache ECharts, you’ve gained insights into creating powerful and customizable widgets.