Planifyit: Transforming SAC with Custom Widgets
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. At Planifyit, we strive to deliver such customized solutions, which not only address business requirements but also infuse a fresh sense of user engagement.
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!
By the way, we encourage you to follow us on [LinkedIn]. For every 100 new followers, we promise to create another widget for free! This widget will be developed through a democratic process – we will run a vote, and the most popular choice will be implemented. :)
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>
We also added a clickable hyperlink below the calculator that redirects users to our company's LinkedIn page, offering another layer of interaction.
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",
"vendor": "Planifyit",
"id": "calculatorwidget",
"version": "1.0.1",
"webcomponents": [
{
"kind": "main",
"tag": "calculator-widget",
"url": "https://planifyit.github.io/SAC_Calculator/CalculatorWidget.js"
}
],
You can view the full JSON code [here].
Connect with Planifyit
The widgets will be freely accessible on our Github page [Github](https://github.com/planifyit). 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:
At Planifyit, we believe in the power of such custom development to transform business applications, creating more interactive, user-friendly, and tailored solutions. 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.
For more information, don't hesitate to [contact us]. Let's make SAC more powerful together!
Comments