Build a Custom Calculator Widget in Bonita UI Designer

14 min readAug 11, 2021

The calculator widget performs simple arithmetic operations: addition, subtraction, multiplication, and division. In this article, I explain how to create a custom calculator widget in Bonita UI Designer (UID).

by Bishal Thapaliya, Bonita R&D Engineer & front end developer

A web widget is a component that can be used as a feature in a web page or application. In this article, I am going to explain how to create a custom calculator widget in Bonita UI Designer (UID).

The calculator widget performs simple arithmetic operations: addition, subtraction, multiplication, and division.

First I’ll explain how to create a calculator widget, change the appearance of the widget when it’s used on the whiteboard in Bonita UI Designer, and then how to add some CSS and Javascript to perform the arithmetic operations and make the calculator functional to the end users.

Define the appearance of a custom widget (production environment)

Step 1: Create the widget

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Custom widget.
Give a proper name to the widget (eg. Calculator).
Click on Create.

The custom widget editor window will be displayed. A custom widget is composed of six sections: Description, Template, Controller, Assets, Required angular modules, and Properties. We need to add some HTML, CSS, and Javascript to the Template, Controller, and Assets sections only, so we will work only on these sections. We will add a short description of the calculator widget in the Description section as well.

The default view of a widget editor window looks like shown in the image below.

Step 2: Remove the default values

Remove the default values from all the sections and save them. We will create our widget from scratch.
Now, our widget editor window looks like this:

Step 3: Set the description

In the description section, add an introduction to the widget and its behavior. The description will be shown when we hover over the widget in the custom widget list.

In the Description section, write the basic information about the widget. For example; “The calculator widget is useful to perform simple arithmetic operations.”

Step 4: Define the Template

In this step, we are going to add some HTML to display a calculator SVG image only when the “environment” variable is defined, i.e. when we are on the UID whiteboard.

In step 8 we will add some HTML to deal with how the widget should be rendered at runtime, i.e. when the page is actually displayed in an application.

In the template section, write the following HTML and CSS codes:

HTML

CSS

<style type="text/css">.calculator-container { display: flex; justify-content: center; align-items: center; }</style>

Note: The CSS codes must be written inside the<style></style> tag.

Click on the Save button.
We have successfully created our new widget.

Pro tip — Defining the widget icon (optional)

It is not mandatory, but useful if you want to give a real look and feel to the calculator widget icon when it appears on the list of a custom widget. Follow the steps below.

Open the “customCalculator.json” file located inside your Bonita workspace (eg. /workspace/My project/web_widgets/customCalculator/customCalculator.json).
Copy and paste the code below at the end of the object.

SVG icon for the widget

"icon" : "<svg width='100' height='100' viewBox='0 0 256.000000 256.000000'><g transform='translate(0.000000,256.000000) scale(0.100000,-0.100000)' fill='#fff' stroke='none'><path d='M654 2305 c-67 -52 -64 -6 -64 -1038 0 -897 1 -934 20 -974 11 -25 33 -51 52 -63 32 -19 49 -20 658 -20 602 0 626 1 657 20 18 10 40 34 50 52 17 31 18 90 21 976 2 917 2 944 -17 987 -12 27 -33 52 -53 65 -32 19 -48 20 -663 20 l-630 0 -31 -25z m1226 -340 l0 -155 -557 0 -558 0 0 155 0 155 558 0 557 0 0 -155z m-895 -360 l0 -40 -120 0 -120 0 -3 28 c-7 56 -3 58 125 55 l118 -3 0 -40z m300 24 c4 -11 4 -32 1 -45 -7 -25 -7 -25 -124 -22 l-117 3 -3 28 c-7 55 -2 57 122 57 107 0 115 -1 121 -21z m300 -24 l0 -40 -120 0 -120 0 -3 28 c-7 56 -3 58 125 55 l118 -3 0 -40z m300 0 l0 -40 -109 -3 c-71 -2 -113 1 -122 9 -15 12 -19 60 -7 73 4 3 59 5 122 4 l116 -3 0 -40z m-936 -170 c36 -18 41 -31 41 -116 0 -61 -3 -73 -25 -94 -21 -22 -33 -25 -100 -25 -67 0 -79 3 -100 25 -21 21 -25 33 -25 89 0 74 13 109 44 124 32 16 133 14 165 -3z m920 -9 c18 -16 21 -31 21 -102 0 -111 -12 -124 -119 -124 -63 0 -78 3 -98 22 -20 19 -23 31 -23 103 0 111 17 126 132 122 48 -2 72 -8 87 -21z m-604 -11 c22 -21 25 -33 25 -93 0 -88 -20 -118 -84 -127 -60 -9 -123 3 -147 28 -29 32 -28 161 3 194 19 20 31 23 100 23 70 0 82 -3 103 -25z m304 -1 c17 -21 21 -41 21 -99 0 -64 -3 -74 -26 -96 -22 -21 -35 -24 -101 -24 -70 0 -76 2 -99 28 -20 24 -24 39 -24 98 0 61 3 73 25 94 22 22 33 25 104 25 74 0 81 -2 100 -26z m-626 -266 c38 -20 46 -40 47 -116 0 -64 -3 -76 -25 -97 -21 -22 -33 -25 -100 -25 -67 0 -79 3 -100 25 -21 21 -25 33 -25 89 0 74 13 109 44 124 29 15 133 15 159 0z m926 -12 c18 -16 21 -31 21 -103 0 -112 -10 -123 -118 -123 -108 0 -122 13 -122 116 0 117 18 136 132 131 48 -2 72 -8 87 -21z m-608 -5 c20 -16 24 -30 27 -93 4 -67 2 -77 -19 -101 -40 -46 -166 -50 -210 -6 -28 28 -28 155 2 193 19 24 26 26 99 26 61 0 83 -4 101 -19z m308 -7 c30 -38 30 -160 1 -192 -41 -44 -168 -43 -207 3 -19 22 -23 38 -23 96 0 61 3 73 25 94 22 22 33 25 104 25 74 0 81 -2 100 -26z m302 -283 c17 -21 19 -42 19 -248 l0 -224 -25 -24 c-21 -22 -33 -25 -98 -25 -59 0 -80 4 -98 19 -24 19 -24 22 -27 237 -3 230 1 262 41 283 12 6 55 10 96 8 63 -2 76 -6 92 -26z m-907 -2 c24 -19 26 -26 26 -104 0 -78 -2 -85 -26 -104 -38 -30 -150 -30 -188 0 -24 19 -26 26 -26 104 0 78 2 85 26 104 21 17 41 21 94 21 53 0 73 -4 94 -21z m301 -4 c21 -21 25 -33 25 -89 0 -36 -4 -76 -9 -89 -13 -35 -60 -50 -137 -45 -90 6 -104 23 -104 125 0 65 3 77 25 98 21 22 33 25 100 25 67 0 79 -3 100 -25z m301 4 c15 -17 19 -36 19 -101 0 -105 -14 -118 -123 -118 -64 0 -79 3 -99 22 -20 19 -23 31 -23 100 0 108 11 118 123 118 73 0 86 -3 103 -21z m-295 -298 c15 -18 19 -40 19 -96 0 -105 -13 -119 -118 -123 -76 -4 -82 -2 -106 22 -23 22 -26 33 -26 96 0 114 19 131 139 127 63 -2 76 -6 92 -26z m-306 -6 c22 -21 25 -33 25 -94 0 -38 -3 -77 -6 -86 -10 -26 -59 -45 -118 -45 -101 0 -126 27 -126 136 0 56 4 68 25 89 21 22 33 25 100 25 67 0 79 -3 100 -25z m601 4 c15 -17 19 -36 19 -101 0 -106 -13 -118 -126 -118 -108 0 -119 11 -119 120 0 110 11 120 123 120 73 0 86 -3 103 -21z'/></g></svg>"

Note: The SVG code generates a calculator icon for the widget. Be sure to add a comma (,) at the end of the previous line.

Save the file.

You have successfully changed the icon of the widget. Now, it’s time to use this custom widget inside an application page and check if the calculator widget has the correct icon and that it appears correctly when it is placed onto the whiteboard.

Step 6: Check the widget

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Application page.
Give a name to the page (eg. CalculatorPage).
Click on Create.

The CalculatorPage editor window will open.
In the page editor window, click on the custom widgets tab on the left.
The Calculator widget appears in the list and has a calculator image as an icon that we added in the previous step (pro tip).
Drag and drop the calculator widget onto the whiteboard.

Output The widget on the whiteboard will be as shown below:

We have completed the definition of the calculator widget, and now we are going to make the widget functional to the end users.

Make the widget functional to end users

Step 7: Edit the widget

Click and select the calculator widget on the whiteboard.
Click on the “…” button next to the widget name on the right.
Click on Edit.

The widget editor window will now be opened.

Step 8: Define the Template

In the Template section after the end of <div ng-if=”environment”></div> tag, write the following HTML code:

HTML

Note: In the HTML code above, ng-if=”!environment” detects that the widget is displayed to the user within a web page at runtime.

Step 9: Add assets

The Assets section is defined to import the resources such as image, CSS, and JS file(s) required for the widget. For the calculator widget, we need only a CSS file.

Create a CSS file somewhere on your computer (e.g., D:\calculator-widget.css) and write the following CSS codes into it:

CSS

Save the CSS file and close it.
Now go to the Calculator widget editor window in the Bonita UI Designer and click on the Add button in the Assets section and upload the CSS file we created previously.

Note: Some CSS properties such as height, width, background-color, position, etc. can be defined as you wish.

As we have added a CSS file as an asset, now the Assets section looks like the image below:

Step 10: The Controller

The Controller section is dedicated to implementing the javascript required to make the widget functional.

In the Controller section, write the following javascript code:

Javascript ` { function ($scope) { this.getValue = function(value) { document.calculate.inputValue.value += value; };

this.allClear = function() {  var value = '';  document.calculate.inputValue.value = value;};this.getTotal = function() {  var value = calculate.inputValue.value;  if(!document.calculate.inputValue.value) {    document.calculate.inputValue.value = '';  } else {   document.calculate.inputValue.value = eval(value);  }};this.backspace = function(){  var result = document.calculate.inputValue;  result.value = result.value.slice(0, result.value.length -1);};

} `

Note: All the javascript code needs to be wrapped inside the function ($scope){} method that augments the AngularJS scope and exposes functions that we can use in the template.

In the code above, we have created four different functions to make the calculator functional.

The getValue() function is defined to get the input value and will be displayed in the HTML input.
The allClear() function is defined to clear the HTML input if there is any value stored.
The getTotal() function is defined to evaluate the total using eval() function in it.
The backspace() function is defined to remove the last digit from the stored value.

Now the controller section will look like the image below:

Click on the Save button to save all the modifications applied to the widget.

Step 11: Use the widget in an application page

Go back to the Bonita UI Designer home page.
Click on CalculatorPage (the page we created previously).
Clean the page if there is already a widget on it.
Drag and drop a Title widget onto the whiteboard and set the properties:
Text = Custom Calculator Widget
Title level = Level 2
Alignment = Center

Step 12: Set the width

Drag and drop a container widget below the title widget and set the property Width = 4.

Step 13: Edit widget properties

Now, click on the custom widgets tab on the left.
We can see that the Calculator widget appears in the list.
Drag and drop the Calculator widget next to the container widget and set the properties:
Width = 4
CSS classes = calculator-container

In the CSS section of the Assets panel, click on the pencil icon right to the style.css to edit.

The style.css file will open.
Add the following CSS at the bottom of style.css file.

.calculator-container { display: flex; justify-content: center; align-items: center; }

Click on Save and Close.

Now, save the page and click on Preview to see the result.

Output

After finishing all the steps mentioned above correctly, the final output will be displayed as shown below:

Additionally, using this example we can implement some other custom widgets like a keyboard, or a PIN pad, etc. I would love to know what other kinds of custom widgets you would like to implement with Bonita UI Designer.

Please share your own tips and examples!

This article was originally published in the Bonita Community blog.

Build a Custom Calculator Widget in Bonita UI Designer

Define the appearance of a custom widget (production environment)

Make the widget functional to end users

Written by Bonitasoft