Controlling the Visibility of a Pane Based on the Value of a Control

You can set the visibility of a pane to be determined by the value of a control on the form, for example, an optionlist control.

Sample Project

To view the sample for this task, import the advanced sample projects as described in Importing the Forms Advanced Samples. The sample form for the task described in this section is contained in the forms.samples.panes project.

The form (VerticalPaneVisibility.form) is at:

   forms.samples.panes/Forms/Visibility/

You can double-click the form’s filename (as well as those of other project resources) in the Project Explorer to open it in the editor. There, you can examine it and use it as a model for your own projects.

Procedure

  1. There are three vertical panes in the sample form with the names pane1, pane2 and pane3. Go to the General tab in the Properties view for each pane and clear the Visible check box.
  2. Add an optionlist control in another pane in your form.
  3. Go to the Properties tab in the Properties view for the optionlist control and add the following custom labels and values as choices:
    • Labels: Make Pane1 visible, Make Pane2 visible, Make Pane3 visible
    • Values: pane1, pane2, pane3
  4. While still in the Properties view for the optionlist, go to the Rules tab and create a rule for the Update event of the optionlist control.

    Add the following action script code for this rule.

          var selectedPane = context.newValue;
      if ( selectedPane == "pane1") {
        //Make the pane1 visible and other panes invisible.
        pane.pane1.setVisible(true);
        pane.pane2.setVisible(false);
        pane.pane3.setVisible(false);
      } else if ( selectedPane == "pane2") {
        //Make the pane2 visible and other panes invisible.
        pane.pane1.setVisible(false);
        pane.pane2.setVisible(true);
        pane.pane3.setVisible(false);
      } else if ( selectedPane == "pane3") {
        //Make the pane2 visible and other panes invisible.
        pane.pane1.setVisible(false);
        pane.pane2.setVisible(false);
        pane.pane3.setVisible(true);
      }
  5. When you load the form, all three of the panes are invisible. After selecting a value in the optionlist control, the related pane is made visible in the form. The other two panes remain invisible.