Inserting a Switcher

To insert a switcher component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a switcher component.
In the Component Palette, select Miscellaneous Components from the dropdown list, and then drag and drop the switcher component to the parent node of your choice.
The switcher node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the switcher component:
- childName - Enter a case element name. This is required. At rendering time, this value is compared to the name attribute of each of the case elements. If the value matches the name of a case, the content of that case will be rendered.
- defaultCase - Enter the name of the case child element that should be rendered if the childName attribute does not match any other case element names. Note: The default child element will take precedence over the defaultCase attribute if both are specified.
To define a case child element for the switcher (required), do the following:
1. In the Design Structure Window, right-click the switcher node and choose Insert inside switcher | case.
  The case node is inserted and highlighted under the expanded parent node.
2. In the Property Inspector, change the default case name to the desired name. A name is required.
3. In the Design Structure Window, right-click the case node and choose Insert inside case to insert one child element whose content will be rendered If the childName attribute value matches the case name.
4. Repeat steps 4a to 4c to add the desired number of case elements.
To define a default child element for the switcher (optional), do the following:
1. In the Code Editor, insert the <default> element as a named child of the <switcher> element.
2. Specify the default content to render.

Note: To use data binding, see Data Binding a Component Attribute.

Examples (UIX XML)


...
<switcher childName="${ui:defaulting(userData.person, 'default')}">
  <case name="default">
    You have not picked anyone
  </case>
  <case name="Roger">
    You have picked Roger
  </case>
  <case name="Peter">
    You have picked Peter
  </case>
</switcher>
...
<switcher childName="${userData.person}"
          defaultCase="defCase">
  <case name="defCase">
    You have not picked anyone
  </case>
  <case name="Roger">
    You have picked Roger
  </case>
  <case name="Peter">
    You have picked Peter
  </case>
</switcher>
...
<switcher childName="${userData.person}">
  <default>
    You have not picked anyone
  </default>
  <case name="Roger">
    You have picked Roger
  </case>
  <case name="Peter">
    You have picked Peter
  </case>
</switcher>
...