As of the QRC Q2 release of SAP Analytics cloud, Custom Widgets are now available with the Unified Story, for that I’m so glad to share with you this new Custom Widget Hands-on Guide, which describe in details the different steps of building a Custom Widget from scratch, how to upload it, and use it within your Story. Let’s go for it  🚀

The Custom Widget Hands-on Guide it consists of 9 chapters. You will start your journey by developing a basic Web Component file, which is one of the main Custom Widget’s technology files.

Afterwards, you will learn how to create your first basic Custom Widget which is composed of:

• A Web Component file (JavaScript file): where you define the functionality, behaviour and style of your Custom widget.
• A Metadata file (JSON file): 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 acts as a bridge between the web component and SAC.

As next, you will edit your Web Component file by integrating the Custom Widget’s lifecycle functions, such as:

• onCustomWidgetResize
• onCustomWidgetBeforeUpdate
• onCustomWidgetAfterUpdate
• onCustomWidgetDestroy

and by integrating the Web Component as a Custom Widget into SAP Analytics Cloud, the SAC framework calls those functions on the execution of the Web Component when the stage of the Custom Widget changes, for example: properties, width, height …

In order to link your Custom Widget to different SAP Analytics Cloud data model, you will learn within this chapter how to add the data binding mechanism, which enables Custom Widgets to easily access and manipulate data.

Next step, you will learn how to render bound data from an open source third party library called Apache ECharts. You will load the library, then parsing the dimensions, measures and data from the data binding results and then convert the parsed results into an ECharts option.

Later on, you will add properties and functions to your Custom Widget for better interactions with the other widgets of your story and also for easier script-driven control.

Afterwards, you will learn how to add events to your Custom Widget so you can insert scripts in the lifecycle to achieve corresponding functionality, in addition you will be able to expose the scripting capability and evoke the script editor in the design time.

At this level of the guide, you will add custom data types to your Custom Widget, allowing user to interact easily with the data via scripting in the design time.

Last and not least, in this final chapter you will know how to add a styling panel for your Custom Widget so that users can set different properties values when editing the story, for example: you can set new style (colors, fonts, shapes …) of your Custom Widget. The Styling Panel is also implemented as a Web Component.

As an optional chapter you will be asked to calculate the integrity of your Custom Widget. It’s defined in the JSON file and it’s a hash of the JavaScript file. It is used to verify that the JavaScript file has not been tampered with. During the development of custom widgets, we can use ignoreIntegrity: true to ignore this validation. However, it is recommended that this validation be turned on in the production environment to ensure that JavaScript files are loaded correctly.

With that I gave you an overview of the different content chapters of the Custom Widget Hands-on Guide, which you can find here. You can download as well the Profile Steps Folders that contains the solution files for every chapter from this GitHub repository.

Before you Start

• Use a code editor for this Hands-on like: Visual Studio Code.
• Code needs to be formatted EXACTLY as in the screenshots and pay attention to the
• With this Hands-on you will be requested to create different Stories in SAP Analytics Cloud, please ensure to save them always in the same folder location.
• Ensure to SAVE your JSON and JavaScript files after every final step of changing the code, to avoid running into errors because of unsaved files.
• You can find here the profile Steps folders for each Chapter (from 0 to 9). Every folder contains the source code solution of every Chapter of the Hand-on Guide. I recommend that you download the folder for an easy copy/paste of the different part of code. You will be requested to copy code from these solution folders during the different Chapters.

More blogs to check out 👇

• How to use Linked Analysis with Custom Widget
• Hosting and Uploading Custom Widgets Resource Files into SAP Analytics Cloud
• Custom Widget Samples GitHub Repository