Convert input into Calculator

I often use numeric fields for prices, taxes, etc. And often I use the Windows Calculator for side-calculations, for example, for converting from net to gross, from gross to net, for calculating VAT or for calculating discounts. With my new AppGini Calculator Component I am able to run side-calculations directly in my AppGini Detail View Form.

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGiniAppGini Helper LibraryPHPSQLJavascriptJQueryCSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.

Example

Take a look at this part of my Orders Detail View. There is a subtotal field which is just numeric input by default.

Now, using the following line of code I convert this into a calculator component:
new AppGini.Components.Calculator("subtotal");

Parameter subtotal is the name of the field.

After reloading the page there is a button now which will will open up a calculator modal dialog:

I can use numpad-like buttons or directly type (simple) mathematical expressions into to input field.

Clicking the OK button runs the calculation and applies the result to my input field in the form.

Screenrecording

In the following videos I am calculation a 15% discount. Therefore I need to convert gross to net (19% VAT), then apply 15% discount on the net price, then converting back net to gross (19% VAT). This is just an example.

Keyboard

Detail View / Input Field

CTRL + ENTER opens the dialog

Calculator / Input Field

ENTER evaluates the expression

CTRL + ENTER evaluates the expression, closes the dialog and puts the result into form's input field

See screenrecording of same calculation as before with pure keyboard control. Note, how fast and efficient users can work by using keyboard and keyboard shortcuts (CTRL+ENTER / ENTER) only.

Locales

In Germany we are using comma , as decimal separator. By using the following Javascript code there is automatic conversion between dot . and comma ,. Additionally, I am rounding final results to two digits before applying the result to the form. You may have noticed this rounding in the videos before.

new AppGini.Components.Calculator("subtotal", ",", 2);

Inline formula

Check out this video:

Small Devices

By the way: the Calculator modal dialog will also work on smartphones. I have calculated the size of the buttons for best fit.

Summary

For the moment I am quite satisfied with the component. It is flexible and easy to integrate.

There are more ideas in my mind for future extensions, for example adding custom buttons performing recurring calculations like "gross to net", "net to gross", "minus 10%" or whatever.

Request for comments (RFC)

I consider adding more components and offering them as Component Library. If you are interested, feel free to contact me and perhaps tell me what kind of component you'd like to see in such a library.

I hope you like it!

Do you like it?