Changing a component/section's visibility

Creating or configuring forms > Configuring the <components> element > Setting component rules > Changing a component/section's visibility

6.1.18.1 Changing a component/section's visibility

When you create component rules, you must set a requirement and a response (see Setting component rules). Once you configure the desired requirement, use the following instructions to configure the <response> element to change a component or section's visibility.

To change a component's or section's visibility

Within the <response> element, place the <component> element. Specify which component's or section's visibility will change using the id attribute.

<component id="ip-address" />

Specify the new visibility of the component using the <display> child element. <display> is either true (visible) or false (invisible).

Component visibility example

<component-rule>
  <requirement comparison="equals">
    <first>
      <component id="script-chooser" />
    </first>
    <second>Write New</second>
  </requirement>
  <response>
    <component id="upload-script">
      <display>false</display>
    </component>
    <component id="write-script">
      <display>true</display>
    </component>
  </response>
</component-rule>

The "upload-script" component is made invisible when a value of "Write New" is set.

Section visibility example

<component-rule>
  <requirement comparison="equals">
    <first>
      <component id="script-chooser" />
    </first>
    <second>Write New</second>
  </requirement>
  <response>
    <component id="scriptsection">
      <display>true</display>
    </component>
  </response>
</component-rule>

"scriptsection" is only visible if the value of the "script-chooser" component is true.