1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Community
Follow

 Mark Your Calendars 

 Like
Mark Your Calendars with these Here’s what you need to know to prepare.
Important Dates. SAP Community is
moving in January 2024!  RSS Feed

Ask a Question Write a Blog Post Login

Technical Articles

Ferry Djaja
December 6, 2019 | 17 minute read

Build a Custom Widget in SAP

Analytics Cloud, Analytics Application
 62  52  45,491

In this tutorial, we will build a simple custom widget in SAP Analytics Cloud, Analytics
Application to show the gauge chart as shown below.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 1/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 2/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

A custom widgets are implemented as Web Components. The Web Components are
made of HTML, CSS and JavaScript.

Custom Widgets
Custom widget consists of the following files:

Custom Widget JSON

The custom widget JSON file specifies the custom widget properties like id,
version, name, description and so on.
Web Component JavaScript
A custom widget is composed of one or more Web Components.
Each Web Component is implemented in a Web Component JavaScript file, which
defines and registers a custom element and implements the custom element’s
JavaScript API. It has the lifecyles: constructor(),
onCustomWidgetBeforeUpdate(), onCustomWidgetAfterUpdate(),
connectedCallback().
Web Component JavaScript of Styling Panel (optional)
The Styling Panel of a custom widget is an area in analytics designer where you
can set property values of the custom widget at design time. It is implemented as
a Web Component.
Web Component JavaScript of Builder Panel (optional)
The Builder Panel of a custom widget is an area in analytics designer where you
can set property values of the custom widget at design time. It is implemented as
a Web Component.
Icon file
Any icon file image in 16×16 pixels.

Prerequisites

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 3/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

You need a web server that hosts the resources of the custom widget files
(JavaScript files, CSS files, images, and so on). Assume that your web server address
is :

https://example.demo/customwidgets

Create a Custom Widget

The Gauge Box custom widget consist of three Web Components: the actual Gauge
Box, the Styling Panel and the Builder Panel of the Gauge Box and it consist the
following files:

box.json
Custom Widget JSON of Gauge Box.
box.js
Web Component JavaScript file of the Gauge Box.
box_sps.js
Web Component JavaScript file of the Styling Panel of the Gauge Box.
box_bps.js
Web Component JavaScript file of the Builder Panel of the Gauge Box.
icon.png
Icon of the Gauge Box in any 16×16 pixel icon.

1. Custom Widget JSON of Gauge Box (box.json)

The Gauge Box custom widget has the unique ID, version, and the name, which is
displayed in the analytics designer, Styling Panel.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 4/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

The Gauge Box custom widget is composed of the following three Web Components:

The first Web Component is the actual Gauge Box as indicated by the kind of “main”.
The second Web Component is the Styling Panel of the Gauge Box as indicated by
the kind of “styling”. The third Web Component is the Builder Panel of the Gauge Box
as indicated by the kind of “builder”.

Moving on, these are the properties of the Gauge Box custom widget: value, info,
color, width and height.

The property value represents the value in percentage of the Gauge Box. The
property info represents the title of the Gauge Box. The property color represents the
color of the Gauge Box. And the properties width and height represent the initial
width and height of the custom widget.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 5/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

And then the script methods of the Gauge Box are defined:

The function setValue takes three parameters, newValue, newInfo and newColor. The
body property contains the script code which sets the passed all the parameters to
the respective Gauge Box’s properties.

Function getValue takes no parameter and returns the percentage value of the Gauge
Box.

Finally, an onClick event is defined:

Note that the event has no parameters.

2. Web Components JavaScript (box.js)

This section shows the Web Component JavaScript of the Gauge Box (box.js).

(function() {
let template = document.createElement("template");
template.innerHTML = `
<style>
:host {
border-radius: 10px;
border-width: 2px;
border-color: black;

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 6/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

border-style: solid;
display: block;
}

body {
background: #fff;
}

.metric {
padding: 10%;
}

.metric svg {
max-width: 100%;
}

.metric path {
stroke-width: 75;
stroke: #ecf0f1;
fill: none;
}

.metric text {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, san
}

.metric.participation path.data-arc {
stroke: #27ae60;
}

.metric.participation text {
fill: #27ae60;
}
</style>

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="metric participation" data-ratio=".95">
<svg viewBox="0 0 1000 500">
<path d="M 950 500 A 450 450 0 0 0 50 500"></path>
<text class='percentage' text-anchor="middle" alig
<text class='title' text-anchor="middle" alignment
</svg>
</div>
</div>

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 7/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

</div>
</div>
`;

class Box extends HTMLElement {

constructor() {
super();
let shadowRoot = this.attachShadow({mode: "open"});
shadowRoot.appendChild(template.content.cloneNode(true));

this.$style = shadowRoot.querySelector('style');
this.$svg = shadowRoot.querySelector('svg');

this.addEventListener("click", event => {

var event = new Event("onClick");
this.dispatchEvent(event);
});

this._props = {};
}

render(val, info, color) {

var val1 = val * 0.01;
var x = this.svg_circle_arc_path(500, 500, 450, -90, val1
var rounded = Math.round( val * 10 ) / 10;

if(rounded >=0 && rounded <=100) {

this.$style.innerHTML = ':host {border-radius: 10px;bo
this.$svg.innerHTML = '<path d="M 950 500 A 450 450 0
}
}

polar_to_cartesian(cx, cy, radius, angle) {

var radians;
radians = (angle - 90) * Math.PI / 180.0;
return [Math.round((cx + radius * Math.cos(radians)) * 100
}

svg_circle_arc_path(x, y, radius, start_angle, end_angle) {

var end_xy, start_xy;
start_xy = this.polar_to_cartesian(x, y, radius, end_angle
end_xy = this.polar_to_cartesian(x, y, radius, start_angle
return "M " + start_xy[0] + " " + start_xy[1] + " A " + ra
};

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 8/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

onCustomWidgetBeforeUpdate(changedProperties) {
this._props = { ...this._props, ...changedProperties };
}

onCustomWidgetAfterUpdate(changedProperties) {
if ("value" in changedProperties) {
this.$value = changedProperties["value"];
}

if ("info" in changedProperties) {
this.$info = changedProperties["info"];
}

if ("color" in changedProperties) {
this.$color = changedProperties["color"];
}

this.render(this.$value, this.$info, this.$color);

}
}
customElements.define("com-demo-gauge", Box);
})();

2.1 Template Object

The following code creates a template HTML element:

The template element represents the gauge chart.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 9/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

2.2 JavaSript API of the Custom Element

Constructor
The first function in the JavaScript API is the constructor.

The super() function is called, then the shadow DOM root element is created. The
copy of the template element is added as a child element to the shadow DOM root
element. An element style and svg is selected by using querySelector where
shadowRoot is a reference to the document fragment. Finally, an event listener is
attached to the custom element, listening for click events. Lastly, to make
managing the properties of the Web Component easier, an empty _props object is
initialized.
Handling Custom Widget Updates
In the onCustomWidgetBeforeUpdate() function, the properties in the
changedProperties are merged with the properties of the _props object. The
_props contains the state of all Gauge Box properties before the Gauge Box is
updated.

In the onCustomWidgetAfterUpdate() function, the properties in the passed

changedProperties object is used to directly set the gauge value, info(text
information) and color of Gauge Box.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 10/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

And finally call the render() function to update the chart.

3. Web Components JavaScript of the Styling Panel (box_sps.js)

The Styling Panel lets you change the background color of the Gauge chart in
analytics designer.

This following code shows the Web Component JavaScript of the Styling Panel
(box_sps.js).

(function() {
let template = document.createElement("template");
template.innerHTML = `
<form id="form">
<fieldset>
<legend>Color Properties</legend>
<table>
<tr>
<td>Color</td>
<td><input id="sps_color" type="text" size="40
</tr>
</table>
<input type="submit" style="display:none;">
</fieldset>
</form>
`;

class BoxSps extends HTMLElement {

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 11/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

constructor() {
super();
this._shadowRoot = this.attachShadow({mode: "open"});
this._shadowRoot.appendChild(template.content.cloneNode(tr
this._shadowRoot.getElementById("form").addEventListener("
}

_submit(e) {
e.preventDefault();
this.dispatchEvent(new CustomEvent("propertiesChanged", {
detail: {
properties: {
color: this.color
}
}
}));
}

set color(newColor) {
this._shadowRoot.getElementById("sps_color").value = newCo
}

get color() {
return this._shadowRoot.getElementById("sps_color").value;
}
}

customElements.define("com-demo-box-sps", BoxSps);

The Web Component JavaScript defines a new custom element com-demo-box-sps.

The JavaScript API of the new custom element is implemented in the BoxSps class
which extends the JavaScript API of the HTMLElement class.

3.1 Template Object

The following code creates a template HTML element:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 12/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

This template HTML element is a template for the shadow DOM HTML element that
represents the HTML DOM of the Styling Panel of the Gauge Box.

3.2 JavaSript API of the Custom Element

Constructor
The first function in the JavaScript API is the constructor.

The super() function is called, then the shadow DOM root element is created. The
copy of the template element is added as a child element to the shadow DOM root
element.
Finally, an event listener is attached to form, listening for submit events. If one
such event occurs, the event handler function _submit() is called. Calling bind()
and passing this to _submit() ensures that in _submit() the keyword this
references the custom element.The submit() function is implemented as follows:

The _submit() function calls function preventDefault() on the passed event object,
which prevents submitting the form to the server.
Then, a custom event propertiesChanged is created, indicates a change of
properties to the Custom Widget SDK framework. This custom event contains a
JSON payload which is the color property of the custom widget.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 13/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Getters and Setters Property

The following code shows the implementation of color setter and getter functions.

The color setter function places a text representation of the new color into the
input field of the Gauge Box’s Styling Panel.
The color getter function returns the text of the input field (color value) of the
Gauge Box’s Styling Panel.

4. Web Components JavaScript of the Builder Panel (box_bps.js)

This Builder Panel lets you change the text color of the Gauge Box in analytics
designer.

The code is very similar to the Web Components JavaScript of the Styling Panel. The
following code shows the Web Component JavaScript of the Builder Panel
(box_bps.js).

(function() {
let template = document.createElement("template");
template.innerHTML = `
<form id="form">
<fieldset>
<legend>Color Properties</legend>
<table>
<tr>
<td>Color</td>
<td><input id="bps_color" type="text" size="10
</tr>
</table>
<input type="submit" style="display:none;">
</fieldset>
</form>
<style>
:host {
display: block;

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 14/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

padding: 1em 1em 1em 1em;

}
</style>
`;

class BoxBps extends HTMLElement {

constructor() {
super();
this._shadowRoot = this.attachShadow({mode: "open"});
this._shadowRoot.appendChild(template.content.cloneNode(tr
this._shadowRoot.getElementById("form").addEventListener("
}

_submit(e) {
e.preventDefault();
this.dispatchEvent(new CustomEvent("propertiesChanged", {
detail: {
properties: {
color: this.color
}
}
}));
}

set color(newColor) {
this._shadowRoot.getElementById("bps_color").value = newCo
}

get color() {
return this._shadowRoot.getElementById("bps_color").value;
}
}

customElements.define("com-demo-box-bps", BoxBps);
})();

The Web Component JavaScript defines a new custom element com-demo-box-bps.

The JavaScript API of the new custom element is implemented in the BoxSps class
which extends the JavaScript API of the HTMLElement class.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 15/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

4.1 Template Object

The following code creates a template HTML element:

This template HTML element is a template for the shadow DOM HTML element that
represents the HTML DOM of the Builder Panel of the Gauge Box.

4.2 JavaSript API of the Custom Element

Constructor
The first function in the JavaScript API is the constructor.

The super() function is called, then the shadow DOM root element is created. The
copy of the template element is added as a child element to the shadow DOM root
element.
Finally, an event listener is attached to form, listening for submit events. If one
such event occurs, the event handler function _submit() is called. Calling bind()

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 16/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

and passing this to _submit() ensures that in _submit() the keyword this
references the custom element.The submit() function is implemented as follows:

The _submit() function calls function preventDefault() on the passed event object,
which prevents submitting the form to the server.
Then, a custom event propertiesChanged is created, indicates a change of
properties to the Custom Widget SDK framework. This custom event contains a
JSON payload which is the color property of the custom widget.
Getters and Setters Property
The following code shows the implementation of color setter and getter functions.

The color setter function places a text representation of the new color into the
input field of the Gauge Box’s Builder Panel.
The color getter function returns the text of the input field (color value) of the
Gauge Box’s Builder Panel.

Construct All Files Together

Once we have created all the required files, we need to organize in the following
structure:

Create a folder called customwidgets and put box.json into that folder.

Create another folder box inside customwidgets folder and put the rest of the files
inside box folder.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 17/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Upload all files to the web server.

Adding the Custom Widget to Analytics Designer

In the Analytics Designer, navigate to Main Menu > Browse > Custom Widgets. If
you don’t see this option, check your security roles.

Click the Create toolbar icon.

In the Upload File dialog, click the Select File button.

Select the custom widget JSON file box.json.

Create a new analytic application. The custom widget is listed in the widget list of
the dropdown menu of the Add menu.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 18/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Using the Custom Widget in Analytics Designer

Once you have added the Gauge custom widget, you can see the following functions.

The below code illustrates who to define the parameters for the setValue function.
And how to call the getValue function.

ScriptVariable_1 = ScriptVariable_1 + 1;
ScriptVariable_2 = ScriptVariable_2 - 1;

//Set value
Gauge_1.setValue(ScriptVariable_1, "Plus Gauge 1", "#e74c3c");
Gauge_2.setValue(ScriptVariable_2, "Plus Gauge 2", "#3498db");

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 19/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

//Get percentage value

console.log(Gauge_1.getValue());

See it in action:

SAP Analytics Cloud Custom Widgets

Here is another demo of Google Gauge widget:

Chill the Lion:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 20/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Integration between amCharts and SAC:

Another integration with amChart and SAC:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 21/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 22/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Highcharts 3D Cylinder:

Google Map widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 23/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

YouTube Player widget:

Multiple Instances of Google Gauges widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 24/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Another version of Google Map widget:

Singapore map widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 25/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Clock widget:

Geo Chart widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 26/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Rotate Globe widget:

Another Rotate Globe widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 27/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Liquid Fill Gauge widget:

QR code generator widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 28/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Word Cloud widget:

Solid Gauge widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 29/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Amchart Gauge widget:

Heat map widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 30/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Compass widget:

Text widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 31/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Linear Gauge widget:

Three.js custom widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 32/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

3D object widget (with mouse controls):

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 33/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

3D scatter widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 34/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Bubble chart widget:

Barcode generator widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 35/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Pie Chart widget:

Day & Night World Map widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 36/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

amCharts Serpentine timeline:

Column with Rotated Series from amCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 37/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Stadium track chart from amCharts:

Radar Timeline chart from amCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 38/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Dragging Pie Slices from amCharts:

Pictorial Chart from amCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 39/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Radial Bar Chart with Highcharts:

Surface Chart with Anychart:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 40/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Seat Map Chart with Anychart:

Connector Map with Anychart:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 41/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Gauge with FusionCharts:

Cylinder Fill Chart with FusionCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 42/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Gantt Chart with FusionCharts:

Map chart with FusionCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 43/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Gauges with FusionCharts:

Google Poly:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 44/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Org chart with FusionCharts:

Radar (Spider) custom widget with FusionCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 45/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

A quick demo video to control the SAP Analytics Cloud Custom Widget with web
Bluetooth and micro:bit. User presses the button A and B on micro:bit to fill in and
out the cylinder gauge.

Control two Google Gauges widgets with two micro:bits and Web Bluetooth:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 46/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Grouped Location Chart with ZoomCharts:

Another custom widget with ZoomCharts:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 47/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Google Translate Custom Widget:

Currency conversion custom widget with Google Finance:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 48/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Display stock price information from Google Sheets function

“=GOOGLEFINANCE(“NYSE:BABA”,“price”,TODAY()–180,TODAY())”

Currency exchange trends:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 49/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Object detection with TensorFlow JS:

Tracking Coronavirus COVID-19 with Here:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 50/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Novel Coronavirus (COVID-19) Infection Map:

3D map with wrld3d.com:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 51/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Real-time temperature monitoring with WhatsApp notification:

SAPUI5 Date Picker Custom Widgets:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 52/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAPUI5 KPI Tile Custom Widget:

SAP ChatBot Custom Widget with SAP Conversational AI:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 53/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAPUI5 sap.suite.ui.commons.networkgraph.Graph:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 54/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAC Visual Tree Mapper:

SAC Widget to Send and Receive Messages with RabbitMQ:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 55/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAC Widget to Send and Receive Messages with Kafka:

Generic Tile Custom Widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 56/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Launch Zoom Meeting from Analytic App:

Custom Chat Bot Widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 57/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Covid-19 Widget:

Real Time Notification Custom Widget:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 58/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Zoom Meeting:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 59/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Sankey Diagram:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 60/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Bar Race Chart:

More Tutorials Related to SAC Custom Widget

Adding LED Display as an Threshold Indicator in SAP Analytics Cloud
Display Stock Price with SAP Analytics Cloud Custom Widget and Google Sheets

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 61/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAP Analytics Cloud Barcode Scanner Custom Widget

Add and Use SAPUI5 Elements in SAP Analytics Cloud Custom Widget
How to Build a Chatbot for SAP Analytics Cloud with SAP Conversational AI
Execute Stored Procedure from SAP Analytics Cloud with NodeJS App
SAP Analytics Cloud REST API Custom Widget
SAP Analytics Cloud Custom Widget REST API with OAuth 2.0 and SAP HANA XSA
SAP Analytics Cloud MultiInput Custom Widget
Excel File Upload From SAP Analytics Cloud Analytic Application
Populate Master Data in SAC Planning Model from an Excel File Upload with
Analytic Application
Protect SAP Analytics Cloud Analytic Application Code from Illegal Copy
Network Graph Visualization in SAP Analytics Cloud Analytic App
Build SAP Analytics Cloud QR Code Generator Custom Widget
SAP Analytics Cloud Custom Widget to Send and Receive Messages with
RabbitMQ
SAP Analytics Cloud Custom Widget to Send and Receive Messages with Kafka
Create Generic Tiles in SAP Analytics Cloud Analytic App
Displaying a PDF File in SAP Analytics Cloud, Analytic App with Custom Widget
Add Zoom Meeting Custom Widget in SAP Analytics Cloud, Analytic Application
Build a Chat Bot Interface Custom Widget in SAP Analytics Cloud
SAP Analytics Cloud Real Time Notification List Custom Widget
SAP Analytics Cloud Zoom Meeting Custom Widget
SAP Analytics Cloud, Analytics Application Slideshow Controller
Interface SAP Analytics Cloud Google Gauge Custom Widget with RGB LED
Control SAP Analytics Cloud, Analytics Designer App Remotely with Mobile Phone
Build SAP Analytics Cloud QR Code Generator Custom Widget

Reference
SAP Analytics Cloud Custom Widget Developer Guide

SAC Custom Widget Facebook Page

Alert Moderator

Assigned Tags

SAP Analytics Cloud

SAP Analytics Cloud, analytics designer

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 62/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

SAPUI5

AmCharts

AnyCharts

Chat Bot

Custom Widgets

View more... 

Similar Blog Posts 

Sneak Peek into SAP Analytics Cloud release for Q2 2021
By Orla Cullen Apr 20, 2021

SAP Analytics Cloud - Widget Analysis

By Thomas Fery Jul 29, 2022

Analyse your data live with SAP Analytics Cloud on SAP BW on HANA & SAP BW/4HANA (Part 1) [Updated March
2023]
By Adem Baykal Jan 08, 2020

Related Questions 
Is it possible to convert a story to an analytic application in SAC
By Sebastian Schmoll Nov 20, 2020

Table widget - missing features and empty roadmap

By Dominik Zehentner Nov 17, 2023

Corporate Analytcs Cloud with SAP Marketing Cloud - Integration

By Papa K Mar 02, 2020

62 Comments

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 63/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

You must be Logged on to comment or reply to a post.

Praveen singh
December 6, 2019 at 7:09 am

Hi Ferry, Is there a way to include additional javascript libraries into our custom widget json so that I can make
use of them in my component javascript file. It was mentioned in SDK docs that we can include javascript
libraries but the way to include those are not mentioned. Thanks in advance

Like 0 | Share

Ferry Djaja | Blog Post Author

December 9, 2019 at 4:04 am

hi Praveen,

You may check this SO: https://stackoverflow.com/questions/50698021/using-external-js-libraries-

in-a-web-component. I updated my blog with the demo of Google Gauge.

Cheers,

Ferry

Like 1 | Share

Functional Support
January 13, 2020 at 12:40 pm

hi Ferry,

All your Demos look super cool. The Google Gauge demo is exactly what am looking for. I
would be grateful if you can share some further information on how the google library could
be integrated into the custom widget web component. Did you skip the shadow dom
completely? Also, did you try experimenting with Polymer? What build tools do you use?

Any pointers would be appreciated.

Thanks in advance!

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 64/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Ramu

Like 0 | Share

Ferry Djaja | Blog Post Author

January 13, 2020 at 11:09 pm

hi Ramu,

I am using pure JS and no other libraries. The reason is the loading is faster and the
size is very small. Yes I am using shadow DOM.

https://www.sapanalytics.cloud/product_updates/developer-future/

Cheers,
Ferry

Like 0 | Share

M. Bruins
December 6, 2019 at 1:42 pm

Hi Ferry,

is there any information on how to bind or get data from a model in stead of only feeding data to the custom
widget with scripting functions?

Like 0 | Share

Carlos Suarez
December 9, 2019 at 6:17 pm

I believe data binding is not possible yet.

It is indeed in the planned innovations for 2020 if I recall correctly. I believe David Stocker mentioned
this during his custom widget hands on session in teched 19.

Like 0 | Share

Ferry Djaja | Blog Post Author

January 15, 2020 at 6:06 am

https://www.sapanalytics.cloud/product_updates/developer-future/

Like 0 | Share

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 65/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Armando Santos
December 18, 2019 at 9:57 am

Hello Ferry

Great stuff what you are sharing. Thanks a million!!!

I am trying myself to create my first widget (based on your "com.demo.gauge") but I am struggling with an
issue.

I've uploaded the files:

box.json

box\box.js

box\box_bps.js

box\box_sps.js

box\icon.png

into: https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box/

but after I upload the custom widget in SAC and add this widget into a new Analytic Application then I get the
below error:

"Something went wrong. The system couldn't load the custom widget 'com.demo.gauge_1.x' (kind: 'main')
for this reason: The system took too long to define the custom widget.'

Can I ask your help? Can you please tell me what I am doing wrong?

Regards

Armando Santos

[email protected]

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 66/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Content of my json file is:

{
"id": "com.demo.gauge",
"version": "1.0.0",
"name": "Demo Gauge",
"description": "A gauge demo",
"newInstancePrefix": "Gauge",
"icon": "https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box/icon.p
"vendor": "Demo",
"eula": "EULA",
"license": "1.0",
"webcomponents": [
{
"kind": "main",
"tag": "com-demo-gauge",
"url": "https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box
"integrity": "",
"ignoreIntegrity": true
},
{
"kind": "styling",
"tag": "com-demo-gauge-sps",
"url": "https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box
"integrity": "",
"ignoreIntegrity": true
},
{
"kind": "builder",
"tag": "com-demo-box-bps",
"url": "https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box
"integrity": "",
"ignoreIntegrity": true
}
],
"properties": {
"value": {
"type": "number",
"description": "Gauge value",
"default": "0"
},
"info": {
"type": "string",
"description": "Gauge info",
"default": ""
},
https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 67/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

"color": {
"type": "string",
"description": "Text Color info",
"default": "#3498db"
},
"width": {
"type": "integer",
"default": 100
},
"height": {
"type": "integer",
"default": 100
}
},
"methods": {
"setValue": {
"description": "Sets the Gauge value.",
"parameters": [
{
"name": "newValue",
"type": "number",
"description": "Gauge value"
},
{
"name": "newInfo",
"type": "string",
"description": "Gauge info"
},
{
"name": "newColor",
"type": "string",
"description": "Text Color info"
}
],
"body": "this.value = newValue; this.info = newInfo; this.color = newColor;"
},
"getValue": {
"returnType": "number",
"description": "Returns the Gauge value.",
"body": "return this.value;"
}
},
"events": {
"onClick": {
"description": "Called when the user clicks the Box."
}

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 68/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

}
}

Like 0 | Share

Ferry Djaja | Blog Post Author

December 18, 2019 at 12:46 pm

hi Armando,

Can you please check and ensure that SAC can access this URL:

https://try.gogs.io/armando.j.a.santos/SAPCustomWidget/src/master/box/box.js

Maybe you can try to host the codes in Git and see.

Cheers,

Ferry

Like 0 | Share

Armando Santos
December 18, 2019 at 4:16 pm

Hello Ferry

I have also tried with GitHub:

https://github.com/armando-j-a-santos/SAPCustomWidget2/blob/master/coloredbox.json

And it give me exactly the same error message mentioned earlier.

Kindly assist me.

Regards

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 69/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Armando Santos

Like 0 | Share

Armando Santos
December 18, 2019 at 4:33 pm

Hello Ferry

Let me add into this issue, the fact that all JS files and JSON files are accessible in GitHub without
authentication (public files).
My guess is that something - some kind of configuration, is missing is SAC side. Do I need some extra step in
SAC settings?

Kindly help me.

Armando Santos

Like 0 | Share

Ferry Djaja | Blog Post Author

December 19, 2019 at 3:56 am

hi Armando,

Can you ignore that error message and click "Run Analytics Application" and check if you can see the
chart ?

Cheers,

Ferry

Like 0 | Share

Armando Santos
December 19, 2019 at 8:23 am

Good morning Ferry

If I run the analytics app then na blank page appears and the error also appears - please see
attached image.

Maybe there is something wrong on the scripting code (JS and JSON files). Do you want me to
send you a copy of my code?
https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 70/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

On the other hand, I still believe there is something missing in SAC settings that I am not
aware. Can you please advice?

Kind regards

Armando Santos

Like 0 | Share

Ferry Djaja | Blog Post Author

December 19, 2019 at 9:17 am

Hi Armando,

The code is in Git in this blog. Can you do F12 and see what's the error details ?

Cheers,
Ferry

Like 0 | Share

Armando Santos
December 19, 2019 at 9:31 am

Sure. Here it is.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 71/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Any suggestion dear Ferry?

Constructor issue? (please have a look in Git code)

Regards

Armando Santos

Like 0 | Share

Ferry Djaja | Blog Post Author

December 19, 2019 at 10:07 am

It looks like in coloredbox_builder.js your there is no customElements.define.

Like 0 | Share

Armando Santos
December 19, 2019 at 10:38 am

Thanks Ferry.

You are right. I was missing the customElements.define in the builder file -
THANKS!, but even after ignoring the error and if I run the application it still
throws the same error (F12 is showing the same errors as in previous post).

Any suggestion is more than welcome dear Ferry?

Regards

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 72/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Armando Santos

Like 0 | Share

Hau Ngo
December 19, 2019 at 7:52 pm

Thanks for the guide, Ferry Djaja ! ?

I was experiencing the same issue that Armando Santos had described.

However, I ran the application and looked at the console log as you suggested and discovered it was an SSL
issue: https://d.pr/i/egX16s

After applying a free SSL certificate to my domain, updating the URL in the JSON file, and uploading the new
JSON file to my SAP Analytics Cloud tenant ... I am able to use the custom widget for the gauge chart type ?
https://cloud.summerlinanalytics.com/2Nurjl10

I hope this helps anyone else who is trying to use the custom widgets!

Like 0 | Share

Armando Santos
December 20, 2019 at 8:07 am

Thanks Hau for your valuable help.

In your case the error seems to be easier to understand and to fix as well:
"but requested an insecure script 'http://summerlinanalytics.com/customwidgets/gauge/box.js". This
request has been blocked; the content must be served over HTTPS."

We can clearly see this is an SSL issue.

But in my example - within JSON file - I am using and HTTPS WEB server:
"https://github.com/armando-j-a-santos/SAPCustomWidget2/blob/master/coloredbox.js"
And after deleting the Widget in SAC, upload the new JSON file to my tenant and use it in SAC application I still
get the same issue.

Any suggestion is more than welcome dear Hau/Ferry.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 73/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Regards
Armando Santos

Like 0 | Share

Armando Santos
December 20, 2019 at 9:14 am

I don't know if it helps or not but in my test application in SAC onInitialization() I have the below code:

var ScriptVariable_1 = 10;

//Set value
Gauge_1.setValue(ScriptVariable_1, "Plus Gauge 1", "#e74c3c");

//Get percentage value

console.log(Gauge_1.getValue());

And I can see the Gauge_1 widget icon (please see attached image), so it means the icon.PNG file is being read
from my Web Server GitHub (HTTPS). However I still get the same errors messages as shown in previous
posts.

Any suggestion is more than welcome dear Hau/Ferry.

Regards
Armando Santos

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 74/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Like 0 | Share

Armando Santos
December 20, 2019 at 1:34 pm

@FERRY: One more try from my side! I have just used your JS files (from github) within my JSON file:

"id": "com.demo.gauge",
"version": "1.0.0",
"name": "Demo Gauge",
"description": "A gauge demo",
"newInstancePrefix": "Gauge",
"icon": "https://github.com/ferrygun/SAPCustomWidget/blob/master/box/icon.png",
"vendor": "Demo",
"eula": "EULA",
"license": "1.0",
"webcomponents": [
{
"kind": "main",
"tag": "com-demo-gauge",
"url": "https://github.com/ferrygun/SAPCustomWidget/blob/master/box/box.js",
"integrity": "",
"ignoreIntegrity": true
},
{
https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 75/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

"kind": "styling",
"tag": "com-demo-gauge-sps",
"url": "https://github.com/ferrygun/SAPCustomWidget/blob/master/box/box_sps.j
"integrity": "",
"ignoreIntegrity": true
},
{
"kind": "builder",
"tag": "com-demo-box-bps",
"url": "https://github.com/ferrygun/SAPCustomWidget/blob/master/box/box_bps.j
"integrity": "",
"ignoreIntegrity": true
}
],
...

And after deleting the widget in SAC, upload the new JSON file to my tenant and use it in a SAC application I
still get the same the error (the same as mention earlier in the beginning of my post):

Please advice.

Thanks in advance.

Regards

Armando Santos

Like 0 | Share

Charlie Lin
December 24, 2019 at 7:37 am
https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 76/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Hello Armando,

I was running the same error with you. And i fixed the issue by changing the GitHub settings. See the
pic below.

Then you will be able to visit the json file by using the URL. If you don't change the setting, the page will
be like 3rd pic.

https://shineshow.github.io/SAC/box/box.js

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 77/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Like 2 | Share

Armando Santos
December 26, 2019 at 9:43 am

Bingo!!!

Thanks a million Charlie for your valuable tip.

This was the setting that I needed. I thought it was something in SAC side but in fact it was in
github side.

One more time thanks Charlie.

Regards
Armando Santos

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 78/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Like 0 | Share

Sebastian Preusser
December 30, 2019 at 11:04 am

Hey all,

I am facing a different errror:

In my case the styling is the issue.

My JSON looks like this:

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 79/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

"id": "com.demo.gauge",
"version": "2.0.0",
"name": "Demo GaugeV2",
"description": "Demo",
"newInstancePrefix": "Gauge",
"icon": "https://sebastian684.github.io/SAPCustomWidget/box/icon.png",
"vendor": "Demo",
"eula": "EULA",
"license": "1.0",
"webcomponents": [
{
"kind": "main",
"tag": "com-demo-gauge",
"url": "https://sebastian684.github.io/SAPCustomWidget/box/box.js",
"integrity": "",
"ignoreIntegrity": true
},
{
"kind": "styling",
"tag": "com-demo-gauge-sps",
"url": "https://sebastian684.github.io/SAPCustomWidget/box/box_sps.js",
"integrity": "",
"ignoreIntegrity": true
},
{
"kind": "builder",
"tag": "com-demo-box-bps",
"url": "https://sebastian684.github.io/SAPCustomWidget/box/box_bps.js",
"integrity": "",
"ignoreIntegrity": true
}
],

Any ideas?

Thanks,

Sebastian

Like 0 | Share

Functional Support
January 13, 2020 at 4:45 pm

hi Sebastian,
https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 80/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

You have used the tag "com-demo-gauge-sps" in the JSON file, however in the box_sps.js has the tag
defined as "com-demo-box-sps". that is why the error.

Like 0 | Share

Andrew Barlow
August 18, 2021 at 2:37 pm

Hi Sebastian,

Looking at the styles js file (box_sps.js) if you compare it with the builder js file (box_bps.js) it has
some brackets missing from the end.

I was experiencing the same issue but by adding })(); to the end of the styles js file (box_sps.js) all
works for me now without any error.

Like 0 | Share

qingqing ji
January 7, 2020 at 6:43 am

Hello,Ferry.

Can you share souce file for the demo Google Gauge?

Thanks.

Like 0 | Share

Ferry Djaja | Blog Post Author

January 15, 2020 at 6:18 am

Hi Ji,

I am afraid not able to share the code in this blog. Please ping me if you are interested.

Regards,
Ferry

Like 0 | Share

Carolina Lasso Arce

March 23, 2020 at 6:33 pm

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 81/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Hello Ferry

Can you share it with me?

Thank.

Like 0 | Share

Semih Baysal
January 7, 2020 at 10:20 am

Hi Ferry,

How to add Data Source to custom widget

Thanks.

Like 0 | Share

Ferry Djaja | Blog Post Author

January 15, 2020 at 6:17 am

Hi Semih,

I think that is not possible yet. Please check this:

https://www.sapanalytics.cloud/product_updates/developer-future/

Regards,
Ferry

Like 0 | Share

Arijit Das
January 14, 2020 at 9:45 am

Can anyone please explain the meaning of the following code snippet:

onCustomWidgetBeforeUpdate(changedProperties) {
this._props = { ...this._props, ...changedProperties };

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 82/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

It gives syntax error in the JS editor.

Thanks

Arijit

Like 0 | Share

Ferry Djaja | Blog Post Author

January 15, 2020 at 6:15 am

Hi Arijit,

From the Help documentation

Regards,

Ferry

Like 0 | Share

Arijit Das
January 21, 2020 at 4:30 am

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 83/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Hi Ferry,

Can we use webcomponents built with polymer framework to create custom widget in SAC? If yes, could you
please share one simple example?

Or, can we use third party js libraries like JQuery / D3 to create the custom widget? How to include those
libraries and how to manipulate DOM elements inside shadow root using Jquery/D3?

Thanks,

Arijit

Like 0 | Share

Ferry Djaja | Blog Post Author

January 21, 2020 at 9:50 am

Hi Arijit

Yes you can blend it with the existing JavaScript libraries. Most of the examples I built, I am basing on
the existing libraries and not building it from the scratch.

Maybe I will post another blog on how to create a simple WebComponents and blend it with the
external JS libraries like Amcharts.com once I have time. To put in this write up alone, it will be very
long and messy.

Ping me if you are interested to know more details.

Cheers,
Ferry

Like 0 | Share

Arijit Das
January 21, 2020 at 12:41 pm

Thanks Ferry for the hint. Now I am able to use third party JS libraries for the custom widget.

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 84/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs
Like 0 | Share

Ferry Djaja | Blog Post Author

January 22, 2020 at 2:03 am

welcome. I am just posted the use of external lib amCharts with the widget in SAC. Here is a quick
video: https://youtu.be/CenR8D75nk8

Like 0 | Share

VR Sunkara
February 7, 2020 at 1:20 am

Hey Ferry,

All your demos look amazing. We are really struggling with building custom JS widgets using
3rd party libraries. I would greatly appreciate if you can give some pointers for the below
questions:

1. How did you manage to import external libraries into the web component? Any code
snippets or tutorial links would help.
2. In most of your demos, you were able to consume data from SAC model. Could you
please give some hints on how to bind data into a custom widget? As per the SAP
documentation, the input data types of the methods and parameters support only 1
dimensional arrays, how can we pass table like data into the custom widget?

Any simple code snippets which shows the above concepts will really help with our POC. Am
looking forward for your blog on Amcharts integrations.

Thanks in advance!

Venkat

Like 0 | Share

Sungyoul Baik
February 20, 2020 at 12:35 am

Dear Ferry,

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 85/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

The tutorial works perfect for me. Thank you a lot. I also like the examples you made!

I'm trying you implement 3rd part chart library on the custom widget just like you did, but I have no clue how to
embed the chart libraries into the custom widget files. I know you are about to write a blog about it but can you
share a sample code please?

Many thanks.

Like 0 | Share

Ferry Djaja | Blog Post Author

February 27, 2020 at 12:26 pm

Hi Sungyoul,

You may try this to load the external lib:

const script = document.createElement('script');

script.type = 'text/javascript';
script.src = src;
script.addEventListener("load", callback);
shadowRoot.appendChild(script);

Cheers,

Ferry

Like 1 | Share

Sevim Eraslan
March 3, 2020 at 4:01 pm

Hi Ferry,

I also wanted to test your files in SAP Analytics Cloud. The following error message occu

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 86/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Do you know what this means?

Best regards
Sevim

Like 0 | Share

Oguz Kose
March 6, 2020 at 7:54 am

I changed the box.json file. There is value block in properties area.

"properties": {
"value": {
"type": "integer",
"description": "Gauge value",
"default": 0
},

Its looking like that now. You can try this method.

Like 1 | Share

Fabio Sist
April 20, 2020 at 7:52 am

Hi Ferry,

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 87/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

is there a way to modify the Gauge box properties inside the box.js? Let's say I'd like to change the color
property based on the value of the gauge, is it possible to do it on widget side (box.js) instead of managing it on
Analytic Designer side?

Note that I'd like to change the propery in the way that the getter method will give me the new value modified
in the box.js.

Fabio

Like 0 | Share

Aleksey Salinin
May 19, 2020 at 8:40 am

Ferry Djaja firstly, thanks a lot!

have u any instructions or step-by-step on how to embed m.components in App with CW? For example,
DateTime.Picker or KPI.Tiles (like in your youtube videos)?

Like 0 | Share

Ferry Djaja | Blog Post Author

May 20, 2020 at 3:28 am

hi Aleksey Salinin

Stay tuned!!, I will publish how-to tutorial some time!!

Regards,
Ferry Djaja

Like 2 | Share

Huimin Li
July 21, 2020 at 2:46 pm

Thank you so much Ferry, all the blogs you posted about custom widget on SAC is so helpful!!

Like 0 | Share

Ferry Djaja | Blog Post Author

June 2, 2020 at 2:46 am

Hi Aleksey Salinin

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 88/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

You can check my new blog here on how to use SAPUI5 elements in SAP Analytics Cloud Custom
WIdget.

https://blogs.sap.com/2020/06/02/add-and-use-sapui5-elements-in-sap-analytics-cloud-custom-
widget

Regards,

Ferry Djaja

Like 1 | Share

Surya Dharma
June 10, 2020 at 6:36 am

Halo Ferry Djaja terima kasih untuk postingnya!

Do you have customise trend indicator arrow tutorial for analytics design, maybe? that will show the arrow
trend if the value below 3% (or absolute number) the arrow will be red, more than 3% will green and in
between will show a deep yellow colour with a horizontal arrow shape. Thanks in advance for any advice!

Regards,

Surya Dharma

Like 0 | Share

Ferry Djaja | Blog Post Author

June 10, 2020 at 11:48 am

Hi UserName Placeholder for UXP-4318 UserName Placeholder for UXP-4318

Terima kasih.

If using custom widget, we can define all those parameters in the styling or builder panel. I think is
easy to achieve it. I don't have that tutorial yet at this moment. I will find some time to write it.

Regards,

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 89/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Ferry Djaja

Like 0 | Share

Surya Dharma
June 12, 2020 at 6:54 am

Halo Ferry Djaja,

That would be great, Ferry! really appreciate if you can share the techniques. But maybe I
describe it clear what I want to achieve.

So I'm goint to build a dashboard and might be use the structure as template structure. I need
to build this in analytics designer mode (not story). The source is queries with live-connection.
This dashboard have 40+ (numeric chart) KPI's. Build with 6 Panel. On initial the first three
panels appears and switch to another panel with radiobutton (this is done). Each Panel
contain four KPI's. On init the indicator should read each KPI value and show correspondent
arrow trend indicator (this is still homework). Later on I will build dropdown for year, month,
week, etc filter.

How I've done so far. I added three different gif images (green, red, yellow) on each KPI's. So,
here are 40+ KPI's multiply by three. It's a lot small images placed by the KPI side-by-side. I
have two global variable, one to control image, and the other one to control the value. I created
global script for expected condition (>3%, below and in between). Still the result not really
working as my expectation.

I don't find another solution so far, like using "Form" (circle shape) and controll the colour
pallete through script (like ".setColor function). Well the setColor function is not available and
furthermore there is only "onClick" event with "shape" instead of something like
"onResultChanged".

Appreciate a lot if you can share or have any method to create less-complex trend arrow
indicator. Terima kasih!

Regards,

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 90/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Surya Dharma

Like 0 | Share

Ferry Djaja | Blog Post Author

August 20, 2020 at 6:06 am

Hi Surya,

if you could share your code, I will try to figure it out.

Regards,

Ferry Djaja

Like 0 | Share

Roopa Puranik
September 24, 2020 at 9:39 pm

Hi Ferry,

I was researching and came across your article. I am trying to see if I can create a custom widget to reset story
in SAC and use the rest button widget in the dashboard. Is that doable. If so, what is the code and if you can
provide details on how to accomplish this, that would be great? Our users hate the reset icon that is available
on the toolbar and its not very visible. They all have been asking for the reset button to be added to the
dashboard on all tabs. We have a big demo coming u next week and want to impress our execs, so any help
would be greatly appreciated.

Thank you

Roopa

P.S. I have an idea submitted for this in the idea place already to highlight the reset button and call it reset.

Like 0 | Share

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 91/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs
Ferry Djaja | Blog Post Author
September 25, 2020 at 12:51 am

hi Roopa,

Can you let me know what is the reset function in SAC story ?

Regards,
Ferry

Like 0 | Share

Roopa Puranik
September 25, 2020 at 2:43 pm

Hi Ferry,

To Reset all the filters on the story or on the tab where the widget is added. Same as the Reset
button on the toolbar in SAC stories.

This will be a life saver until SAP enhances the current reset icon.

Thank you so much!

Roopa

P.S. The story is not built using Analytics Designer.

Like 0 | Share

Ferry Djaja | Blog Post Author

September 28, 2020 at 8:31 am

hi Roopa,

I am not sure if there is any API for reset function in SAC Analytic Application. If there
is, we can create a widget for that purpose.

Regards,

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 92/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Ferry

Like 0 | Share

Roopa Puranik
September 28, 2020 at 6:28 pm

Okay Thank you. I don't know a whole lot about JAVA scripting but was hoping
we could accomplish this by creating a custom widget and use it in SAC
stories.

Like 0 | Share

Martino Rivaplata
February 20, 2021 at 12:19 am

Hi Ferry,

I have an SAC analytic application in which I have a button on it. I would like for the button onClick event to
trigger refreshing the https:// URL page of the Analytic Application. When you have the chance if you have any
ideas please let me know. Attached is an screenshot of the analytic application. Please let me know any
questions. Thank You!

Like 0 | Share

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 93/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Roopa Puranik
March 19, 2021 at 7:42 pm

Hello Ferry,

Do you know if it's possible to setup a story page with carousel style page (slider/slideshow) using application
designer? Can you please share some insights on this.

Thank you

Roopa

Like 0 | Share

Maxime Gillet
July 19, 2021 at 9:24 am

Hello ,

Thanks for the blog it is great!

Is there a secure way to handle credentials? I mean if the button is doing an http request on a protected url,
how should it be done?

Thanks

Like 0 | Share

Francesco Allocca
November 23, 2021 at 12:53 pm

Hi Ferry,

If we would modify the chart to have a range between -100% to 100%? And not 0% to 100%.

How can we modify the code?

We were tryng but doesn't work

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 94/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Thanks

Francesco

Like 0 | Share

Lilu Zhang
September 21, 2022 at 9:18 pm

Hi Ferry,

Thanks for the knowledge sharing through this great blog! I have a client, they have a scenario will be benefit
from the custom widget DatePicker. It works great, it's just seems we do not have a method to clear the
selection to make the widget back to it's initial state which with the recommendation of the format. Is there a
way to set the DatePicker widget to it's initial state through the Analytics Designer or there a way to enhance
the custom widget to add a clear method?

We tried to define a Date type variable and pass it to widget through setDateVal() method, however, we cannot
pass a null value into it.

Appreciate if you can provide your thoughts on it!

Best Regards & Thanks,

Lilu.

Like 0 | Share

Alfonso Moreno
December 16, 2022 at 4:50 pm

Hi Ferry

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 95/96
1/3/24, 8:02 PM Build a Custom Widget in SAP Analytics Cloud, Analytics Application | SAP Blogs

Thanks for sharing.

Do you happen to have a video on how to start creating widgets in sac?

I want to create the barcode, however I am not a developer, because when I want to load the json or js files I
have no idea if I am doing it correctly or not.

Thanks in advance for any help and advice you could give me.

Regards!!!!

Like 0 | Share

Find us on

Privacy Terms of Use

Legal Disclosure Copyright

Trademark Cookie Preferences

Newsletter Support

https://blogs.sap.com/2019/12/06/build-a-custom-widget-in-sap-analytics-cloud-analytics-application/ 96/96