Feature: Eleven new button types

Eleven new types of buttons make your apps easier to use and more powerful. Buttons can run action formulas, change the active screen, copy text to the clipboard, show messages and more.

For the longest time, Calcapp has offered four different button types:

Today changes. We’re now introducing a whopping eleven new button types, which will make your apps easier to use and more powerful.

Here’s the full list:

  • Formula buttons run action formulas.
  • Alert buttons show messages.
  • Clipboard copy buttons copy text to the clipboard.
  • Go back and go forward buttons change the active screen.
  • Print screen buttons launch the user’s print dialog.
  • Compose email buttons launch the user’s email client.
  • Compose SMS buttons launch the user’s text message client.
  • Dial buttons launch the user’s dialer.
  • Open map buttons show maps using the user’s map app.
  • Browse buttons show a web page in the user’s web browser.

The new button types are not available in any of our legacy plans, meaning that you may need to upgrade to access them. Most new buttons types are available in our 2023 Business plans. All button types, including formula buttons, are available in our 2023 White Label plans. Everything is fully functional in Calcapp Creator’s preview sidebar, though, so you can get a feel for the new features, regardless of your plan.

Formula buttons

Formula buttons run so-called action formulas, which have access to 30 brand new action functions.

These are some of the things you can do with a formula button:

  • Send a report, but only if the entered data is valid. Otherwise, show the user an alert box.
  • Ask the user a series of questions, before sending a report incorporating the entered answers.
  • Send multiple reports, incorporating different information, to different email addresses.
  • Open a report on the user’s device, while also sending a message to the team’s internal Slack channel. (Integration with Slack, and other third-party services like Google Sheets, Excel and Salesforce require a third-party service like Zapier.)
  • Reset all fields, but only if the user first consents by pressing a button to that effect in a message box. Then, move the user back to the first screen, and ensure that previously-hidden text boxes are once more visible.

This action formula asks the user for their name and greets them once the name has been entered:

AWAIT(PROMPT("What's your name?"), BANNER("Hi " & Result & "!"))AWAIT(PROMPT("What's your name?"); BANNER("Hi " & Result & "!"))

Formula buttons can also be used to realize the oft-requested calculation buttons, that only perform calculations once the user presses a button.

Action formulas are a huge new addition to Calcapp. Refer to our dedicated blog post on the subject for more information.

Alert buttons

An alert button displays a message to your users, with a single button that dismisses the message:

Showing a message to your users

The title, body and button label of the message are all set through templates. That means that you can enter text strings as you normally would, but you can also enter formula fragments, enclosed within {{ and }} markers.

In other words, all information displayed in the alert box can be dynamic and take into account information entered by your users and calculated by your app.

For even more flexibility, consider using a formula button and the ALERT function. This formula asks the user a question and displays the result using an alert box:

AWAIT(PROMPT.NUMBER("Enter area:"), ALERT("The cost
is " & Result * 1500 & "."))
AWAIT(PROMPT.NUMBER("Enter area:"); ALERT("The cost
is " & Result * 1500 & "."))

Clipboard copy buttons

A clipboard copy button copies text to the user’s clipboard. The text to copy is entered using a template, which means that it can incorporate information from your app.

If you embed your app in a website, you need to change the HTML markup you use slightly, otherwise copying to the clipboard won’t work.

An embedded app runs in an iframe on the host page. You need to add allow="clipboard-write" to the list of attributes for the iframe element:

<iframe seamless
        src="https://connect.calcapp.net/?app=abc123"
        allow="clipboard-write">
</iframe>

For even more flexibility, consider using a formula button and the CLIPBOARDCOPY function. This formula asks the user a question, copies the result to the clipboard and shows a banner with the text Copied!:

AWAIT(PROMPT.NUMBER("Enter area:"), CLIPBOARDCOPY("The cost is " & Result * 1500 & "."); BANNER("Copied!"))AWAIT(PROMPT.NUMBER("Enter area:"); CLIPBOARDCOPY("The cost is " & Result * 1500 & ".");; BANNER("Copied!"))

Prior to this release, users had to press Next in the upper-right corner of an app to proceed to the next screen. We have seen many creative ways to direct your users’ attention to this button, including pictures with arrows.

Of course, having a button right where your fields are is often preferable. Now, it’s finally possible.

A go forward button that you don’t customize moves the user forward to the screen you have defined in Calcapp Creator (reachable using the button in the top-right corner of your app).

Similarly, a go back button that you don’t customize moves the user back one screen.

A go forward button can be customized to move the user forward to whatever screen you select in the inspector. To use conditional logic, associate a formula with the Target property that uses the IF function.

Here’s an example of such a formula:

IF(AND(Screen1.Items.Valid), DetailsScreen, ErrorScreen)IF(AND(Screen1,Items,Valid); DetailsScreen; ErrorScreen)

The formula above checks to see if all items of Screen1 are valid (another new feature). If so, the user is brought forward to DetailsScreen. Otherwise, ErrorScreen is shown.

You can also customize what screen to go back to using a go back button, with a screen you select in the inspector or through a formula. However, if you select a screen that the user has not previously visited, nothing will happen.

For even more flexibility, consider using a formula button and the GOFORWARD and GOBACK functions. This formula asks the user to confirm if they want to start over. If so, it resets all fields and brings the user back to the first screen:

AWAIT(CONFIRM("Start over?", Title: "Question"), RESET({ App }); GOBACK(StartScreen))AWAIT(CONFIRM("Start over?"; Title: "Question"); RESET({ App });; GOBACK(StartScreen))

(The formula above uses a named parameter, another new feature.)

Browsing the web, printing, composing an email and more

The remaining six button types open a link in the user’s web browser, dial a phone number for the user, compose an email or a text message (SMS), open a map at a certain location and offer to print the current screen.

Print screen buttons simply invoke the system print dialog, which typically not only supports printing the current screen, but can also convert it to a PDF file. While Calcapp can generate PDF files on its own, they are currently limited to text. If you don’t want to use a third-party service that can generate PDF files with images, asking the user to use the system print dialog may be a viable alternative.

Opening links from your app has been possible since 2017. However, buttons are often more attention-grabbing than simple text links. A new browse button makes that possible. Also, unlike plain links, browse buttons allow you to decide where the links open (for instance, in a named browser tab, or replacing your app).

An email compose button makes it possible for users to send an email using their standard email client (a native app or a web-based service, depending on your user’s preferences). You can pre-fill most fields, including the body and the recipients, and you can use templates to do so (meaning that you can easily mix pre-set text with information from your app).

The text message compose buttons and dial buttons typically only work on cell phones (though a desktop user with Skype installed can likely make use of a dial button). Again, you can pre-set most text message fields and the phone number of both buttons using templates.

Finally, open map buttons open a map using either a search query (which can be an address), or coordinates (latitude and longitude). The user’s installed map app is preferred. If all else fails, Google Maps is opened in the user’s web browser.

These features are also accessible through formula buttons. These are the relevant formula functions: PRINTSCREEN, BROWSE, COMPOSE.EMAIL, COMPOSE.SMS, DIAL and OPENMAP.

« Feature: Make buttons perform actions with action formulas Release: Our August, 2023 update is here »