Calculate values
In this tutorial we will create an app where users can enter a gross value and the VAT rate and get the included tax amount.
The resulting simple app plays nicely on desktop and mobile devices.
Topics
- Create user facing forms and hidden forms
- Entering JavaScript to perform calculations
- Displaying formatted text to the user
Prerequisites
- You already know how to use the Ultradox Editor
Goal
- Create a form to calculate the VAT included in a gross amount
Instructions
Adding a Form
Create a new form by dragging a Form building block from the User Interaction category in the sidebar into the canvas.
Create number input fields
Create two Number fields that we will use to enter the gross amount and the VAT rate.
The first field will collect the gross amount. Enter the user prompt Amount and Enter the amount including VAT as help text.
Enter the value 0 as Minimum and 0.01 as the Step.
This will ensure that the user enters a positive number limited to 2 digits after the comma.
Make sure to mark the field as required.
The second Number fields will be used to enter the VAT rate.
Enter VAT rate as prompt and Enter the VAT rate as help text and set the variable name to vatRate.
Set the minimum, maximum and a step to ensure a valid tax rate and it a required field.
Click on Apply to close the editor.
Double check that you enter vatRate as variable name with a capital R. By default Ultradox will suggest variable names with lowercase letters, so you'll manually have to adjust the name.
After clicking on Apply the form will show up in the Ultradox editor.
Open and close the building block by clicking on the form type icon in the upper-left corner. Resize the form by using the drag handle at the bottom in the middle of the building block.
You can open the form editor at any time by clicking on the bold part in the title of the building block that shows the name of the form.
Configure submit button
Click on the user interaction icon in the toolbar of the Form building block, clear the default Title and Description and enter the button Calculate.
This will replace the default Next button to show Calculate instead.
Calculate values
In the next step, we will calculate the VAT based on the values provided in the form fields. We will use the Enter values building block to perform the calculation.
Drag and drop an Enter values building block from the Core category right after the first building block.
This building block works just the Form building block, but it does not stop the flow and wait for user input. Instead it will just load the entered values.
Add a Number building block to your form and enter the user prompt VAT and the help text Included VAT and give it the name vat.
We will use this form field to perform the actual computation.
Click on Apply to close the editor.
After clicking on Apply the form will show up in the Ultradox editor.
Instead of entering a fixed value we want to perform a calculation using the values that we've collected in the first user facing form.
On the right hand side of the VAT field you will find a button that indicates the field type.
Click on this icon twice to change it to a JS (JavaScript) input field with a green background.
Enter ( ${amount} / (100 + ${vatRate}) ) * ${vatRate} in the field and save the settings.
When Ultradox executes this building block the JavaScript code will be executed and the result will be stored in the vat variable.
This variable can then be used in the subsequent blocks.
Display result
Finally, add a Stop building block from the Control flow section to show the calculated amount to the user.
Click on the user interaction icon in the title of the building block to enter the Title and Description in the configuration dialog.
You can use Markdown in the description field to create nicely formatted output.
The description for the user is:
The VAT included in the entered amount of ${amount} is **${vat;number(.00)}**
Using ** at the beginning and end of the variable ${umsatzsteuer;number(.00)} will display the value in bold.
The app is complete!
The improved app is complete and should look like this:
|
|||
|
|||
|
|||
Configure App
Enable your automation as an app to turn your automation into a user facing app that will be immediately available on the web.
Click on the App settings icon in the main toolbar of the Ultradox editor to open the settings dialog.
Check the box to enable the app.
Select a color scheme and background image and click OK to save the settings.
Click the Run app icon next to the App settings icon to open the app in a new browser tab. Share the app by sharing the URL of the new tab.
What you have learned
- Adding user facing forms to your app
- Performing calculations using JavaScript expressions
- Showing formatted output to your users
Learn more
To continue learning about Ultradox, take a look at the following resources:
Quickstarts
Create contract | Calculate values | Request files | Contact form
Questions and Feedback
If you have any comments on this page, feel free to add suggestions right to the Google document that we are using to create this site.
If you are not yet member of the Ultradox community on Google+, please join now to get updates from our end or to provide feedback, bug reports or discuss with other users.
Last Updated: 8/31/18