Show TOC

Procedure documentationCreate a Toggled View Locate this document in the navigation structure

 

You can use a toggle button to enable the user to switch between views within a UI component. The toggle button label changes in order to display the component not currently visible.

Procedure

  1. After creating your model on the Design board, switch to the Layout board and select the UI component (form, table or chart) that will contain the toggle button. You can create a separate form just for this purpose (see the "Example" following).

  2. Right-click the component and click the Configure button from the task-panel toolbar.

  3. At the bottom of the task panel, click the Add (plus) button. The New UI Control dialog box is displayed.

  4. From the Select control type list, choose Toggle Button and in the Field name field, enter an appropriate name for the button. (The Data type should be Text in most cases.)

  5. Click OK. The button is displayed in the layout.

  6. Right-click the new button and choose Properties from the context menu. The Control Properties dialog box is displayed. Note that in the General tab, the Default value of the button is true. You can change this, and also use this Boolean value to define the formula for hiding other fields.

  7. To give the toggle button two names, according to the visibility of other components, click the Display tab and in the Label field, create a conditional formula describing when each label should be applied. (See Define a Dynamic Expression).

  8. Click the other fields or views that are to be toggled in conjunction with the toggle button:

    • If you are toggling a field, define its visibility by creating a formula for the Condition in the Hidden field of the General tab in the Control Properties dialog box.

    • If you are toggling a view, enter the formula in the Visibility condition field of the Configure Element task panel.

Example

This example is based on the BanksB model created in Adding a Data Service for Choosing Banks. It adds a toggle button in order to enable the runtime user to switch between different views of bank information.

  1. Import the BanksB model or create it from scratch.

  2. On the Design board, drag a Form View icon from the Compose Model task panel to create a free-standing form called Bank Information. Place it between the Bank Address and Bank Details forms, as follows:

    Bank Information form (Bank Information form)

  3. Click the Layout tab and double-click the Bank Information form to open the Configure Element task panel.

  4. Create and define the toggle button as follows:

    1. Create the button as described in steps 3 to 5 of the previous "Procedure".

    2. Right-click the new button and open the Control Properties dialog box.

    3. In the Default value field of the General tab, enter true.

    4. Click the Formula button to the right of the Label field of the Display tab. The Dynamic Label (Expression Editor) dialog box is displayed.

    5. Expand the Conditional Functions node and double-click the IF option to display an If formula in the text box.

    6. Use the formula in conjunction with the Data Fields node to enter the following formula:

      IF(@@==true,'Bank Details','Bank Address')

      This formula indicates that when the toggle button (@@) is true, the button label is Bank Details; when it is false, the label is Bank Address.

    7. Click Check to ensure that the formula is valid and then click OK.

    8. On the layout, expand the width of the button to compensate for its size and check that the layout is appropriate. It should look something like the following:

      Layout board (Layout board)

  5. Program the visibility of the forms to be toggled: When the Bank Details button label is displayed, the Bank Address form should be visible and vice-versa. Therefore:

    1. Double-click the edge of the Bank Address form and in the Visibility condition field in the Configure Element task panel, click fx and Enter formula. The Hiding Condition (Expression Editor) is displayed.

    2. Expand the Data Fields node and then the Bank Information node and double-click Toggle. The toggle control ID is displayed in the text box.

    3. Create the following formula: #ID[ACA92P]@Toggle=='true'

    4. Repeat steps a through c for the Bank Details form, entering the following formula: #ID[ACA92P]@Toggle=='false'

  6. Check that the layout is appropriate and deploy. The runtime results should be similar to the following:

    This graphic is explained in the accompanying text.

    Runtime Toggled View