Adding more screens

Up until this point, you have been working with a single screen that performs calculations. It’s a good idea to keep your screens short and concise and put additional functionality in separate screens. Your apps can consist of any number of screens.

The key to enabling navigation to other screens in Calcapp Creator is the navigation bar:

Adding another screen

In the simple app pictured above — which you may recall from the getting started guide — there is only one screen. The button with the left arrow is grayed out, as there is no previous screen to move back to. The other button, with the right arrow , is enabled. If you press it, you are given the option of creating another screen at that exact spot:

When another screen can be reached from a form screen, a button titled Next appears in top right corner of the app, moving the user forward:

When the new screen is displayed, a button titled Back replaces the menu button , moving the user back to the previous screen:

The Screens sidebar in Calcapp Creator visualizes your screens and allows you to reorder them (by dragging the symbol). Activate it by selecting Screens from the menu in the sidebar:

Enabling choices

You can add any number of form screens reachable from one another using the technique described above. With a large number of screens, though, it is better to display a list of choices. In Calcapp, such a list is known as a list screen and the choices are known as navigators.

Add a new list screen by clicking the Add list screen button when adding a new screen. This is what a list screen looks like when your app is run:

This is what editing a list screen in Calcapp Creator looks like:

When your app is run, the user taps an item to move to the corresponding screen. In Calcapp Creator, select a list screen option by clicking it and pressing the right arrow button .

If you haven’t yet defined a screen corresponding to that item, you are given an opportunity to do so. If you like, you can add another list screen, enabling arbitrarily large apps.

Here’s a video showing how to create a menu with three options, the second of which contains another menu with two options:

Changing your screen structure

Drag the symbol in the Screens sidebar to reorder screens:

There are more options for changing your screen structure in the screen menu, which you reach by pressing the button next to the screen title:

Remove a screen by selecting Remove screen…. You are given the option of just removing the current screen or the current screen plus all the screens that follow.

Select Cut screen… to move the screen to the clipboard and Copy screen… to copy the screen to the clipboard. As with removing screens, you are given the option of including just the current screen or the current screen plus all the screens that follow. Navigate to the spot where you want to insert the screens and select Paste screen.

Cutting and pasting screens gives you more control than if you reorder them using the Screens sidebar. If you have a complex screen hierarchy, such as in the image above, and reordering your screens doesn’t give the desired result, try cutting and pasting them instead.

The Insert form screen, Insert list screen and Insert text screen menu items insert a screen, taking the place of the screen you’re currently viewing. (The original screen is placed after the inserted screen.)

Referencing other screens from formulas

When you type a name in a formula, such as Field1, you are referencing an item that is part of the same screen. To reference another screen, type the name of the screen followed by an exclamation point, before writing the name of the item.

If a field that belongs to the screen WelcomeScreen is named Field1, type WelcomeScreen!Field1WelcomeScreen!Field1 to reference it from other screens. To reference the Visible property of this field, type WelcomeScreen!Field1.VisibleWelcomeScreen!Field1,Visible.

To assign a name to a screen, select it and edit the name as you normally would. To select a screen, just click the toolbar with the screen title and the navigation buttons.

The easiest way to reference an item on another screen is to simply start typing its name or label. Autocomplete will find it, no matter what screen it’s on, and suggest the proper way to reference it.

Changing the next screen with a formula

Using the techniques above, a fixed hierarchy of screens can be created. To decide which screen to show the user using a formula, use the NextScreen property of form screens, text screens and list screen navigators.

To send the user to Screen1 if Field1 is valid, and to Screen2 otherwise, associate a formula such as this one with a NextScreen property:

To prevent users from moving forward to the next screen, use the NextScreenAvailable property of form screens and text screens.

Multiple screens and navigators can send the user to the same screen. To do so, select the same screen from all relevant NextScreen drop-downs in the inspector.

Using this technique, multiple list screen navigators can bring the user to the same screen. To determine what navigator was selected by the user, access the ActiveNavigator read-only property of the list screen from a formula.

This blog post contains an example that uses the techniques above to look up values using the XLOOKUP function.

Finding errors

When you design large apps with many screens, it’s easy for errors to creep in (such as formula errors). Apps with errors cannot be run or published. When a screen with an erroneous field is active in Calcapp Creator, a purple bar is added to the left of the field:

If you click the field with the purple bar to make it selected, text appears in red below the formula field or below the name box to explain what went wrong.

In the screen above, there is a circular dependency, meaning that the field tried to reference its own value as part of its formula. Removing ^Result from the formula would enable the app to be run and published.

If a screen with an erroneous field is associated with a list screen option, a purple bar is added to the navigator to help you find the erroneous screen. (This works even if the erroneous screen is buried many layers deep.)

The arrows are colored pink if there is an erroneous screen in their direction, enabling you to simply follow the pink arrows to find the screens preventing your app from launching.

In this example, a previous screen is erroneous and there is a screen reachable from the first option that is also erroneous:

Video demonstration

This video creates a variation of the simple adder we built in the getting started guide. The first number and the result are both part of the first form screen, but the second number is only reachable through a list screen. Along the way, advanced techniques for showing fields and list screen options only if a condition evaluates to TRUE are shown:

Continue reading about additional field types »