A Progress Bar Component with SAP Analytics Cloud Custom Widgets

[former_member401717]

Introduction

Since the Q4 2019 release, SAP Analytics Cloud (SAC) Analytics Designer allows users to create their own widgets (components). In this Blog Post, I present the Progress bar widget developed

A Custom widget is a separate component within SAC. SAC already provides you with a large variety of components with which you can design your dashboard. But what if these predefined components are not able to satisfy the scenario or requirement of your dashboard. This is where custom widgets in the Analytics Designer comes into picture. They can be tailored exactly to your requirements and thus implement the specific scenario or requirement.

These custom components are developed by front-end developers in JavaScript . In these custom widgets everything that is possible with JavaScript can be developed.
The actual custom widget must be stored on a separate server. To make this widget available in SAC, a JSON file is included in SAC. This file contains essentially all the information that describes this widget (metadata). This includes all descriptions for this widget within SAC as well as the storage location to the server and the interfaces used for programming in the Analytics Designer. I have hosted these web components , JS Files using Github pages

 

Progress Bar Custom Widget

This component is a ideal for beginners who want to start building custom widget because of its basic design and functionality

The below image shows the Progress bar component added in an SAC Analytic Designer

 

 

It basically consists of an Value driving the progress , A percentage showing the progress out of 100% which is calculated based on the Upper and Lower Limit values that are also given as inputs to the component

For Example , The amount Component was given a input of value 60 , a lower limit value 0 and an upper limit value 80 based on which the percentage is calculated using the formula

Percentage = (Value / (Upper limit - Lowe Limit )) *100

=60/(80-0) *100

= 75%

 

The Component also accepts additional inputs for a Heading having Information about the value like Actual in the above case and color of the component which is green in the above example.

All the above inputs are controlled using the method setvalue with parameters Value , Lower Limit , Upper Limit , Title , Color

 

Application - onInitialization Screen :

Result :

 

A getvalue method that returns the value set to the component.

The above component can also be enhanced further with styling and builder web components to bring on different styling options and data binding options.

 

Conclusion

 

The blog post walks you through the basic idea of the design and the functionality of the Progress Bar custom widget. The same component can also be turned into a radial progress bar by modifying the JS file calculating the progress using radian.

 

I found the below blog post very helpful for learning how to develop custom widgets in SAC

https://blogs.sap.com/2020/01/27/your-first-sap-analytics-cloud-custom-widget-introduction/