Welcome to part 2 of our five-part Excel to Web App guide.
In this part, we want to add a simple calculation to our web app. In part 1, we learned how to create a form with fields for our end-users. Now it’s time to let the application do some of the work that Excel would typically do for us: calculate a field.
So, let’s learn how to add and perform calculations with Five!
This blog post is part 2 of a 5-part series on converting Excel spreadsheets to web apps. To view the other parts, follow the links here:
This beginner’s guide on converting an Excel spreadsheet to a web app does not require a background in coding. Only make sure to have Five installed. Sign up for a free download here!
When converting an Excel spreadsheet into a web app, calculations are critical. Let’s learn how to quickly calculate our Total field from our Excel to Web App sample application.
So far, the Total field is empty in our database. Let’s add a simple calculation that makes the total the result of a simple calculation. The total is equal to the multiplication of price and quantity. Makes sense?
To add a calculation to your web app, open Five, click on your application, and then on Manage.
You’re almost in the right place to add your calculation.
Next, click on Fields and then on Total, as shown here:
You can now see the details of your Total form field and add a calculation to it.
To add your calculation, click on the form field that says Default Value.
Paste the following line of code into the default value field:
= five.form.Inventories.Price * five.form.Inventories.Quantity
Here’s what your screen should look like now:
Save by clicking on the Tick marks on the right.
Now let’s run the application again and see what happens when we add a new product to our database.
Remember to run and preview your application, you just have to click on the Run button in the top right corner.
Now that we have added our calculation to the application, the Total value will automatically be calculated as the product of quantity and product. Of course, you can add any other calculation to your app and form fields: additions, subtractions, multiplications, divisions or any other calculation.
Try our Total calculation for yourself by adding a new product to your database.
Click the Plus icon and fill in the product’s details. Note how the Total field now automatically calculates the sum of product and quantity.
Using the default value on a field is just one way to add a calculation to Five. When using the default value, we use five.form to indicate that we are choosing an element based on this form. This is followed by the form name, in our case Inventories. Last, we add the field name, i.e. Product and Quantity.
For a more detailed guide on adding calculated fields using functions, check out our blog post here.
If you have more questions about calculations, visit our user community.
In the next step, we will show you how to create and apply a theme to your application to make your application look great!
Five lets you develop your application locally free of charge. Simply use our free download and build your application until it’s ready for your end-users.
To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.