Many of our clients create apps for their product catalog. A straight-forward way of modeling this in an app is to use a list screen, containing all products, and then have form screens associated with every list screen navigator, holding the product calculations.
For the client project we’re currently working on, our client wanted a different approach. Having the users of the app go back and forth between individual form screens and the list screen containing all products would be too slow. Instead, our client wanted the users of the app to be asked which products they intended to use, and then have the app present screens for those exact products, and only those products.
Here’s an app demonstrating this technique:
The first screen is a form screen, not a list screen. It has one switch field for every product. The user is required to toggle at least one of these switch fields to its “on” position. Once that is done, the user may proceed to the next screen by pressing Next in the upper-right corner or by pressing the Proceed button.
To determine if the user has selected at least one product, a named value, HasSelection, uses this formula:
The Enabled property of the Proceed button and the NextScreenAvailable property of the form screen both reference HasSelection.
To understand how the formula above works, refer to our last tip, which covers this topic in detail.
(If you’re on a Starter plan or an old plan, you may not have access to named values. Here, you can simply use an invisible switch field instead of a named value.)
When users proceed to the next screen, they are presented with calculations related to the first product they selected. When proceeding from that screen, they are presented with calculations related to the second product they selected, and so on.
To make this work, formulas are associated with the NextScreen property of all relevant screens, which determines which screen is shown when the user moves forward.
Here is the NextScreen formula of the first screen:
The idea here is that the screen that follows the first screen is either the screen for the first product, Product A, or a screen that follows it, depending on what products have been toggled on the first screen.
ThisOrFollowingScreen
is a named value, belonging to the ProductA screen, with
this formula:
It’s a big formula, but it’s quite easy and repetitive. If
Product A has been toggled to its “on” position on the first
screen, the named value returns the ProductA screen.
Otherwise, if Product B has been toggled to its “on”
position, the named value returns the ProductB screen, and so
on.
The NextScreen
property of the ProductB screen uses
this formula:
The ThisOrFollowingScreen
named value of ProductB uses this
formula:
It is identical to the formula of the ThisOrFollowingScreen
named value of the ProductA screen, but
does not include ProductA.
(Again, these examples use named values, which are not available in Starter plans. You can get these examples running by replacing the references to named values in formulas with the formulas of the named values. It’s not as convenient, but it works.)
And that’s all there’s to it. Only the screens that are relevant to the user are presented, and there is no need to go back to a list screen to select different products.
As a bonus, the last screen holds a tally of the costs of all the
selected products. Every screen has a Cost field. To
calculate the sum, this formula is used:
The SUM formula function is provided ten parameters, one for every product. Each parameter is such that it returns the cost of a product if the corresponding switch field has been switched to its “on” position on the first screen, and zero otherwise.
In effect, the sum total of all products that have been switched on is returned.