• Learn
  • Blog
  • Pricing
  • About
  • Sign in

Adding more panels

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

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

The navigation bar

Adding another panel

In the simple app pictured above — which you may recall from the getting started guide — there is only one panel. The button with the left arrow is grayed out, as there is no previous panel 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 panel at that exact spot:

Adding another panel

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

The Next button

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

The Back button

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

Enabling choices

You can add any number of calculation panels reachable from one another using the technique described above. With a large number of panels, though, it is better to display a list of choices. In Calcapp, such a list is known as a list panel. Add a new list panel by clicking the Add list panel button when adding a new panel.

This is what a list panel looks like when your app is run:

A list panel in Calcapp Connect

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

A list panel in Calcapp Creator

When your app is run, the user taps an item to move to the corresponding panel. In Calcapp Creator, select a list panel option by clicking it and pressing the right arrow button . If you haven’t yet defined a panel corresponding to that item, you are given an opportunity to do so. If you like, you can add another list panel, 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 panel structure

Drag the symbol in the Panels sidebar to reorder panels:

Reorder panels using the Panels sidebar

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

The panel menu

Remove a panel by selecting Remove panel…. You are given the option of just removing the current panel or the current panel plus all the panels that follow. Select Cut panel… to move the panel to the clipboard and Copy panel… to copy the panel to the clipboard. As with removing panels, you are given the option of including just the current panel or the current panel plus all the panels that follow. Navigate to the spot where you want to insert the panels and select Paste panel.

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

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

Referencing other panels from formulas

When you type a name in a formula, such as Field1, you are referencing an item that is part of the same panel. To reference another panel, type the name of the panel followed by an exclamation point, before writing the name of the item. If a field that belongs to the panel WelcomePanel is named Field1, type WelcomePanel!Field1 to reference it from other panels. To reference the Visible property of this field, type WelcomePanel!Field1.Visible.

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

As you may recall, you can click items in the app designer when editing formulas to have their names inserted automatically in your formula. This also works when referencing items thare are part of other panels. Just click the back and forward navigation buttons when they are underlined to move to another panel while continuing to edit the same formula. Then, you can simply click the desired items to have their names inserted in your formulas – complete with the panel name and exclamation point. In this mode, there is a link to the left of the name box you can click to return to the original panel.

Referencing a field that belongs to another panel

Finding errors

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

An erroneous field

If you click the field with the purple bar to make it selected, text appears in red below the formula bar 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 shared.

If a panel with an erroneous field is associated with a list panel option, a purple bar is added to the item to help you find the erroneous panel. (This works even if the erroneous panel is buried many layers deep.) The arrows are colored pink if there is an erroneous panel in their direction, enabling you to simply follow the pink arrows to find the panels preventing your app from launching.

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

An indirect error

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 calculation panel, but the second number is only reachable through a list panel. Along the way, advanced techniques for showing fields and list panel options only if a condition evaluates to TRUE are shown:

Continue reading about working with dates »