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.
Example
Take a look at this part of my Orders Detail View. There is a subtotal field which is just numeric input by default.
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!