In this blog we will be covering how to use Pericror’s new Field Calculator chrome extension. The extension can be downloaded here. We will be performing a calculation on our numerical fields and saving the result back into an input on the page.

For this example, I have a form for a new computer record with Raw Price, Tax Rate and Cost fields. I will be calculating the Cost of the computer using the Raw Price and Tax Rate.

calc_tut_1

To launch the chrome application, click on the calculator icon icon19 found near the right side of your url bar (top right part of your browser) .

calc_tut_2

The app will appear as a pop up box below the icon you have just clicked. Lets break down how each button works:

calc_tut_2_zoom

Operators are found on the first row:

  1. Addition
  2. Subtraction
  3. Multiplication
  4. Division
  5. Left Parenthesis (Used for nested expressions)
  6. Right Parenthesis (Used for nested expressions)
  7. Delete: Deletes the last entry in the calculator window
  8. Clear: Clears the calculator window
  9. Equals: Evaluates the expression in the calculator window
  10. Save: Allows you to save your calculation into one of the inputs on the page through its corresponding button. Will be inactive (grey) until the ‘Equals’ (I.) button is pressed. After pressing the save button, the generated buttons (not A.-J.) will appear green. Press one of the generated buttons to save the current calculation into the input field corresponding to the button pressed.

Buttons representing numerical inputs from the page will be dynamically generated, and as a result will vary in size and appearance depending on the labels of your fields. These buttons will appear either as:

  1. Inactive, grey in color and with the value (Empty) meaning the input does not currently have a value on the page.
  2. Active, light blue in color and with the value corresponding to the input field found on the page. Both Inactive (K.) and Active buttons appear in alphabetical order from left to right.

To calculate the cost of our computer, we want to know the price after tax. We can calculate this as Raw Price + ( Raw Price * Tax Rate ). To enter this into our calculator, we press the buttons corresponding to the expression we want to create.

calc_tut_3_zoom

We can then press the equals button equals  to calculate the cost.

calc_tut_4_zoom

We now want to save the value into our cost field, and can click the save buttonsave, which will turn all of our generated buttons (Cost, Raw Price, Tax Rate) green. We can then click any of the green buttons to save our calculated value into that field.

calc_tut_5_zoom

Clicking the Cost button saves our calculated cost (1034.55) into the Cost Field, and updates the button value on our calculator. The cost field will no longer be gray because the input now has a value on the page.

calc_tut_6_zoom

Clicking anywhere outside of the calculator window on the page will close the calculator. We can see that the field has been updated on the page.

calc_tut_7_zoom

This has been a tutorial of Pericror’s Input Calculator Chrome Extension.