Build a Custom Calculator Widget in Bonita UI Designer

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.
  • 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:
  • Click on the Save button.
  • We have successfully created our new widget.
  • 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.
  • 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.

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.
  • In the Template section after the end of <div ng-if=”environment”></div> tag, write the following HTML code:
  • 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.
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);};
  1. The getValue() function is defined to get the input value and will be displayed in the HTML input.
  2. The allClear() function is defined to clear the HTML input if there is any value stored.
  3. The getTotal() function is defined to evaluate the total using eval() function in it.
  4. The backspace() function is defined to remove the last digit from the stored value.
  • 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
  • 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.
  • Click on Save and Close.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



Bonitasoft helps innovative companies worldwide deliver better digital user experiences — for customers and employees — on the Bonita application platform.