Creating a Hierarchical List Using StyledList and Label

To create a hierarchical list using styledList and the label named child:

In the Design Structure Window of the desired file, locate the styledList node in which you wish to insert another styledList component.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the styledList component to the parent node of your choice.
The inner styledList node is inserted and highlighted in the Design Structure Window.
Expand the inner styledList node, and then expand the styledList Named Children node.
There are two named children elements: label and separator.
In the Component Palette, drag and drop the styledItem component from the Layout Components list to the label node.
The styledItem node is inserted and highlighted under the expanded label node in the Design Structure Window.
Right-click the new styledItem node and choose Insert inside styledItem | link.
The link node is inserted and highlighted under the expanded styledItem node. This is the first indexed child of the inner list.
In the Property Inspector, set the desired attributes for the new link component (first indexed child of the inner list), for example:
- text - Enter the text to display for the item.
- destination - Enter the URI for the item.
To add other indexed children to the inner list, do the following:
1. In the Design Structure Window, right-click the inner styledList node you created in step 2 and choose Insert inside styledList | styledItem.
2. Right-click the new styledItem node and choose Insert inside styledItem | link .
3. In the Property Inspector, set the desired attributes for the new link component, for example:
  - text - Enter the text to display for the item.
  - destination - Enter the URI for the item.
4. Repeat steps 7a to 7c to add the desired number of items for the inner list.
To set a style for the inner list, do the following:
1. In the Design Structure Window, select the inner styledList node you created in step 2.
2. In the Property Inspector, set the following attribute for the inner list:
  - listStyle - Specify the style. The available options are: disc (default), circle, square, decimal, lowerAlpha, upperAlpha, and none. Note that the letters used for lowerAlpha and upperAlpha are the 26 letters of the English language.
To set a selected item for the inner list, do the following:
1. In the Design Structure Window, select a styledItem node of the inner list.
2. In the Property Inspector, set the selected attribute to true.

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

Example (UIX XML)


...
<pageLayout>

...

<!-- StyledList embedded in a StyledList -->

  <styledList selectedIndex="2">
    <contents>
      <styledItem >
        <contents>
          <link text="Link 1 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledItem>
        <contents>
          <link text="Link 2 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledList listStyle="decimal">

        <!-- First indexed child of inner list -->

        <label>
          <styledItem>
            <contents>
              <link text="Link 3 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
        </label>

        <!-- Separator named child of inner list -->

        <separator>
          <spacer height="10"/>
        </separator>

        <!-- Other indexed children of inner list -->

        <contents>
          <styledItem>
            <contents>
              <link text="Link 3-1 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
          <styledItem>
            <contents>
              <link text="Link 3-2 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
        </contents>
      </styledList>
      <styledItem>
        <contents>
          <link text="Link 4 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
    </contents>
  </styledList>

...

<!-- REST OF PAGE LAYOUT -->

<pageLayout>
...