Add a calculator to your mobile application

Written by Brenda Wokoma on Friday 8 March 2024

For designers looking to enhance their applications, a calculator is the solution of choice. It enables them to hold users' attention with dynamic, personalized content.

The GoodBarber extension store already offers a number of tools, including a body mass index calculator and a currency converter . For those who wish to go further, we suggest you (re)discover Appizy, a solution for transforming Excel sheets into powerful calculators for your mobile applications.

History of the Appizy project

The world's first low-code tool is over 40 years old

Low-code and no-code tools have exploded in recent years. But we forget that the world's most low-code and intuitive design tool has been around since the mid-80s: Excel. It's impossible to count the diversity and uses of the spreadsheet. It's everywhere in our businesses, organizations and associations.

Appizy sees Excel users as seasoned business software designers. Its aim is to provide a bridge between office automation and the web. By adding GoodBarber to the equation, we've taken the next step in bridging the gap between office automation and native mobile applications.

Calculator design

First spreadsheet version of our mortgage calculator

We already presented the Appizy solution on the GoodBarber blog in 2020. We're back again this year, as new features are available. We're going to share them with you through the creation of a home loan calculator.

First design
First, we design the tool in 2 parts. On one side, the input data: acquisition cost, interest rate, etc. On the other, the monthly payment and loan details.

Faithful results, but unsuitable for mobile use

Once converted into an application by Appizy, the cells on the left can be edited, and those on the right are updated as and when required. However, it's clear that the resulting interface works on a large screen, but not on a mobile, with vertical scrolling.

Mobile optimization
Appizy's Layout Builder considers each tab of our basic spreadsheet as an independent section. It's then possible to organize the tabs into different columns whose display adapts to the size of the application.

We start by separating the contents of our application into 3 tabs (or 3 sections): one for data entry, a second for the summary and a final one for calculation details. Then, using the Layout Builder, we create a 2-column layout: on the left the input tab, on the right the other two tabs. The result now adapts to all screen formats.

Integration with GoodBarber

To integrate the calculator into a GoodBarber application, we choose a Custom Code section in the Extensions Store. This extension gives access to a dedicated text editor, specially designed for adding code.

Once the extension is installed, we have two options for inserting the calculator:

In embed mode, quick and easy: we retrieve the link to the Appizy-hosted application and insert it into the editor.
With code: we download the application code and re-upload it into the editor. The calculator then operates independently of a server, in offline mode.

All that remains is to save the code and open the preview. And that's it!

To conclude

With Appizy, adding a calculator to your GoodBarber application becomes extremely simple. Once you know how to create the tool in a spreadsheet, it's just a few clicks away from your mobile app.

In this example, we've gone through the main steps involved in designing and integrating a loan calculator. But applications aren't limited to real estate. Are you a sports coach ? Create a personalized sports program simulator. Teachers? Develop fun, educational tools that your students can use on their mobiles and tablets. Don't hesitate to visit the Appizy website to discover our achievements and download spreadsheets to get your own tools off the ground.