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. <\/p>\n\n\n\n
So, let’s learn how to add and perform calculations with Five!<\/p>\n\n\n\n
\n\n\n\n
\r\n Ready to Convert Your Spreadsheet to a Web App?\r\n <\/h3>\r\n
\r\n Transform your Excel files into powerful, secure web applications without the coding headache. Our experts will convert your spreadsheet with:\r\n <\/p>\r\n \r\n
\r\n Free consultation & fixed-price quote\r\n <\/p>\r\n<\/div>\n\n\n\n
\n\n\n\n
Convert Your Spreadsheet Into a Beautiful Web App: Follow Our 5-Part Guide<\/h4>\n\n\n\n
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:<\/p>\n\n\n\n
- \n
- Step 1: Excel to Web App – Creating a Database and Forms<\/a><\/li>\n\n\n\n
- Step 3: Excel to Web App – Adding a Theme<\/a><\/li>\n\n\n\n
- Step 4: Excel to Web App – Adding Logins to Your App<\/a><\/li>\n\n\n\n
- Step 5: Excel to Web App – Creating Charts and Dashboards<\/a><\/li>\n<\/ul>\n\n\n\n
\n\n\n\nCalculating a Field in Five<\/h2>\n\n\n\n
When converting an Excel spreadsheet into a web app, calculations<\/strong> are critical. Let’s learn how to quickly calculate our Total <\/strong>field from our Excel to Web App<\/em> sample application.<\/p>\n\n\n\n
So far, the Total <\/strong>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?<\/p>\n\n\n\n
Let’s go!<\/p>\n\n\n\n
\n\n\n\nAdding a Calculation to Your Application<\/h3>\n\n\n\n
1. To add a calculation to your web app, open Five, click on your application, and then on Manage<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1024x646.png\")
<\/figure>\n\n\n\n
\n\n\n\n2. Next, click on Visual > Forms.<\/strong>
3. Select your Inventories<\/strong> form so that you see its details on the right.
4. Click on Pages.<\/strong>
5. Next, click on General<\/strong> as shown in the image below:<\/p>\n\n\n\n![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Forms-Pages-General-1024x656.png\")
<\/figure>\n\n\n\n
\n\n\n\nYou’re almost in the right place to add your calculation. <\/p>\n\n\n\n
5. Next, click on Fields<\/strong> and then on Total,<\/strong> as shown here:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Forms-Pages-General-Fields-Total-1024x652.png\")
<\/figure>\n\n\n\n
\n\n\n\nYou can now see the details of your Total <\/strong>form field and add a calculation to it.<\/p>\n\n\n\n
To add your calculation, click on the form field that says Default Value.<\/strong> <\/p>\n\n\n\n
Paste the following line of code into the default value field:<\/p>\n\n\n\n
= five.form.Inventories.Price * five.form.Inventories.Quantity<\/code><\/pre>\n\n\n\nHere’s what your screen should look like now:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Adding-a-Formula-in-Default-Value-1024x648.png\")
<\/figure>\n\n\n\n
\n\n\n\nSave by clicking on the Tick <\/strong>marks on the right.<\/p>\n\n\n\n
\n\n\n\nTesting Your Calculation<\/h3>\n\n\n\n
Now let’s run the application again and see what happens when we add a new product to our database. <\/p>\n\n\n\n
Remember to run and preview your application, you just have to click on the Run<\/strong> button in the top right corner.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24.png\")
<\/figure>\n\n\n\n
\n\n\n\nNow that we have added our calculation to the application, the Total <\/strong>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.<\/p>\n\n\n\n
Try our Total calculation for yourself by adding a new product to your database. <\/p>\n\n\n\n
Click the Plus <\/strong>icon and fill in the product’s details. Note how the Total<\/strong> field now automatically calculates the sum of product and quantity. <\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Calculated-Field-1024x651.png\")
<\/figure>\n\n\n\n
\n\n\n\nUnderstanding Calculations in Five<\/h2>\n\n\n\n
Using the default value on a field is just one <\/em>way to add a calculation to Five. When using the default value, we use <\/em>five.form<\/strong> to indicate that we are choosing an element based on this form. This is followed by the form name, in our case Inventories<\/strong>. Last, we add the field name, i.e. Product<\/strong> and Quantity.<\/strong><\/p>\n\n\n\n
There are other ways to add calculations to your application: from using SQL to JavaScript functions tied to events. Remember that when using the default value for calculating fields, the correct syntax is five.form.[form_name].[field_name].<\/p>\n\n\n\n
For a more detailed guide on calculated fields using functions, check out our blog post here<\/a>. <\/p>\n\n\n\n
If you have more questions about calculations, visit our user community<\/a>.<\/p>\n\n\n\n
\n\n\n\nNext Step: Make Your Application Look Good<\/h2>\n\n\n\n
In the next step, we will show you how to create and apply a theme to your application<\/a> to make your application look great!<\/p>\n\n\n\n
\n\n\n\nFinding Help in Five<\/h2>\n\n\n\n
In case you get stuck during the development process, we’re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n
- \n
- Five’s User Community:<\/strong> Visit https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n
- Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
Five’s In-App Help<\/h3>\n\n\n\n
Last, find useful tips for your application development by clicking on Five’s in-app help <\/strong>available in the top right corner or on almost any field.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png\")
<\/figure>\n\n\n\n
\n\n\n\n\nGet Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\n\n - Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
- Step 3: Excel to Web App – Adding a Theme<\/a><\/li>\n\n\n\n