BloX Calculator With What If Editing

[intapiuser]

Download BloX Template or Dashboard

This BloX template demonstrates how you can leverage the input fields to create a simple calculator that can be used for what-if scenarios.

By default, the input fields are populated by the values in the value panel.

The field amounts can be edited by the user by entering new values to see how the outcomes change with the new values.

Technical Overview

This BloX template utilizes a BloX text field script in the output object and a widget script.

The BloX text field script runs the arithmetic on the default values and an event handler in the widget scripts updates the figure when new values are passed.

Widget Script:

widget.on('ready', ()=>{
   $('.inputs', element).on('change', function(){
      
      // Get field values
      let firstValue = parseFloat($('#f1', element).attr('value'));
      let secondValue = parseFloat($('#f2', element).attr('value'));
      let thirdValue = parseFloat($('#f3', element).attr('value'));
      
      // Do arithmatic
      let outputValue = firstValue + secondValue + thirdValue;

      // Round and set values of the output text field
      let roundedOutputValue = outputValue.toFixed(2);
      $('#output').text(roundedOutputValue);
   })
})

Javascript Math reference: https://www.w3schools.com/jsref/jsref_obj_math.asp

Enjoy!