Popup panels

What you'll be learning:

  • How to organize the controls in your form and save space on the user's device screen by using popup panels

You have successfully asked your fictional truck driver user to check four parts of his or her truck, and report back on their condition using the form. Trucks, however, have many more parts, all with potential problems - if you include a segmented control for each of them, you quickly run out of screen real estate even on a large-screen mobile phone. Even with ten or so segmented controls, the user has to scroll, and the form looks crowded.

This is not what you want your users to see

Figure 46. This is not what you want your users to see


The mobile form language offers the popup panel as an alternative to overcrowding the form - it includes a link that opens in a new screen when the user taps the panel. Each popup panel you include in a form effectively gives you another screen to fit your form content on.

This is the same content organized into neat popup panels

Figure 47. This is the same content organized into neat popup panels


  1. Open vehicleInspection.form.xml from the previous section. Wrap the four segmented controls in the form inside the following popup control

    <Form>
        <Control
            type="panel"
            name="root">
    ...
            <Control
                type="panel"
                name="popupFront"
                navigation="popup"
                label="Front of Vehicle">
            <!-- Put your segmented controls here. -->
            </Control>
    ...
        </Control>
    </Form>

    Study notes: a popup panel in the mobile form language requires the navigation="popup" attribute. This makes sure that instead of displaying its contents inline, the panel will render with a link that points to its child controls. When the user taps the link, the form displays the contents of the popup panel on a new screen.

    The navigation attribute applies to panel-type controls only, and has one other possible value: inline.

  2. Publish the form, and enjoy your very own popup panel on your phone. Nice job.

    The first four segmented controls have collapsed into a neat link panel...

    Figure 48. The first four segmented controls have collapsed into a neat link panel...


    ...which opens up to reveal the segmented controls inside when you tap the link

    Figure 49. ...which opens up to reveal the segmented controls inside when you tap the link


  3. Let's take this a step further: check out the screenshots of the finished form with not one, but three popup forms and their contents. Below the Front of Vehicle popup, add the

    • Rear of Vehicle popup panel with the Security of Load, Indicators, and Tires segmented controls

    • and the Engine popup with the Valves, Spark plugs, Fan, and Carburetor segmented controls

    The code and screenshot of the Engine popup is included for reference, but it's much less work to download the form from the link below.

    ...
    <Control type="panel" name="popupEngine" navigation="popup" label="Engine">
        <Control
            type="label"
            name="engineLabel"
            text="Engine"/>
        <Control
            type="combobox"
            name="valves"
            choice="button"
            label="Valves"
            reference="SELECT 'Yes' UNION ALL SELECT 'No'">
            <Validators>
                <Validator
                    type="RequiredValidator"
                    verifyat="submit"
                    changeindicator="both"
                    message="Please indicate if the listed part is in order."/>
            </Validators>
        </Control>
        <Control
            type="combobox"
            name="spark_plug"
            choice="button"
            label="Spark plugs"
            reference="SELECT 'Yes' UNION ALL SELECT 'No'">
            <Validators>
                <Validator
                    type="RequiredValidator"
                    verifyat="submit"
                    changeindicator="both"
                    message="Please indicate if the listed part is in order."/>
            </Validators>
        </Control>
        <Control
            type="combobox"
            name="fan"
            choice="button"
            label="Fan"
            reference="SELECT 'Yes' UNION ALL SELECT 'No'">
            <Validators>
                <Validator
                    type="RequiredValidator"
                    verifyat="submit"
                    changeindicator="both"
                    message="Please indicate if the listed part is in order."/>
            </Validators>
        </Control>
        <Control
            type="combobox"
            name="carburetor"
            choice="button"
            label="Carburetor"
            reference="SELECT 'Yes' UNION ALL SELECT 'No'">
            <Validators>
                <Validator
                    type="RequiredValidator"
                    verifyat="submit"
                    changeindicator="both"
                    message="Please indicate if the listed part is in order."/>
            </Validators>
        </Control>
    </Control>
    ...
    The segmented controls inside the Engine popup

    Figure 50. The segmented controls inside the Engine popup


    Very soon, you'll be able to generate all of these controls, or as many as you like, from a single form template: you'll only have to include a single popup panel with one segmented control inside. Such is the power of data binding.

  4. Save the form and see what it looks like on your phone. You must be real proud of yourself, and with good reason. You are doing great, but the best part is still to come.