Transforming SAC with Custom Widgets (Part 1)

[planifyit01]

In the ever-evolving world of business applications, tailoring solutions to meet unique business needs is the new norm. Custom functionality, in combination with appealing visuals, enhances user interaction and overall experience.

The calculator widget we recently developed for SAP Analytics Cloud (SAC) is simple but an excellent example . This blog post will take you on a step-by-step journey of the development process of a custom widget. Let’s dive right in!

Introduction

The calculator widget was designed as a custom HTML element. We incorporated a clean and intuitive interface, basic arithmetic functions, and some custom features, including the ability to calculate percentages.

The Custom Element

We used the native Web Component API to define our calculator as a custom HTML element. This allows the widget to be used just like any standard HTML tag.

The Widget Structure

We designed the calculator layout with a blend of HTML, CSS, and JavaScript. The HTML defines the structure of the calculator, including the display screen and buttons for various operations. We used CSS to style the calculator and JavaScript for implementing the functionality of the calculator operations.

<div class="buttons">

<button>%</button>

<button class="reset">C</button>

<button><</button>

<button>/</button>

<!-- more buttons -->

</div>

You can view the full JavaScript code [here].

Styling

In terms of aesthetics, we alternated button colors based on their function. For instance, we used orange for number keys and deep blue for operation keys. The "=" key, used to calculate the result, was colored green and was designed to be twice as wide as other keys for easy identification. Basically the styling matches our company's colour scheme 😉

.buttons > button:not(.special-color):nth-child(4n+1),

.buttons > button:not(.special-color):nth-child(4n+4) {

background-color: orange;

}





.buttons > button:not(.special-color):nth-child(4n+2),

.buttons > button:not(.special-color):nth-child(4n+3) {

background-color: #5F6A9D;

}





.buttons > button.double-width.special-color {

background-color: green;

grid-column: span 2;

}

Furthermore, the inclusion of a Base64 encoded image as a banner at the top of the calculator adds a nice visual touch. Base64 images are a great way to include small images directly in your code rather than hosting them externally, which can improve loading times and ensure the image always loads correctly.

           

        .image-container {

        width: 100%;

        height: 100px;

    background:url('data:image/png;base64,iV') no-repeat center center;

    background-size: cover;

    }

Overall, through the use of CSS, we ensured that the calculator is visually pleasing and user-friendly, which we believe is essential to enhancing user interaction.

 

Functionality

The main operations of the calculator - addition, subtraction, multiplication, and division - are handled by the JavaScript code. We also added functionality for a percentage calculation, which is slightly more complex. When the "%" button is clicked, the entered number is divided by 100, and the result is displayed instantly.

switch(value) {

case '+':

case '-':

case '*':

case '/':

this._operation += ` ${value} `;

break;

case '=':

// calculation logic

break;

case '%':

this._operation = (parseFloat(this._operation) / 100).toString();

this._display.value = this._operation;

break;

// more cases

}

Integration with SAC

We created a JSON file for the widget to ensure smooth integration with SAC. The JSON file contains crucial configuration details, such as properties, methods, and events of the widget, and facilitates seamless interaction within the SAC environment.

............

"name": "calculatorwidget",

"description": "Simple Calculator Widget",

"newInstancePrefix": "calculatorwidget",

"id": "calculatorwidget",

"version": "1.0.1",

"webcomponents": [

{

"kind": "main",

"tag": "calculator-widget",

"url": i.e. github

}

],

You can view the full JSON code [here].

Downloading the widget

The widgets will be freely accessible on our Github page [Github]. We believe in open-source development and the power of community collaboration.

Just download the JSON file and upload it in your SAC tenant under Custom Widgets as follows:

Please note, the calculator widget presented in this blog post is merely an example. Our aim is not just to introduce a calculator but to illustrate how we can enhance SAC with custom functionality.

This is the first part of the blog series related to SAC, keep an eye on what is coming next!