Creating a SideBar Using Start

To create a sideBar:

In the Design Structure Window of the desired file, expand the pageLayout node to locate the start node.
If the pageLayout node is not visible, expand page | content | dataScope | document | body | form. The start node is under pageLayout Named Children in pageLayout.
In the Component Palette, select Navigation Components from the dropdown list, and then drag and drop the sideBar component from the list to the start node.
The sidebar node is inserted under the start node.
In the Design Structure Window, right-click the sideBar node and choose Insert inside sideBar | styledList.
The styledList node is inserted under sideBar.
In the Design Structure Window, right-click the styledList node and choose Insert inside styledList | styledItem.
The new styledItem node is inserted under styledList.
Right-click the new styledItem node and choose Insert inside styledItem | link.
The new link node is inserted and highlighted in the Structure Window. The Property Inspector displays the properties of the new component.
In the Property Inspector, set the following attributes for the new link component:
- text - Enter the text for the link.
- destination - Enter a URL. If you prefer, you can use # as a dead placeholder link.
- disabled - Click in the right column and select true if you want to render the item as disabled.
Repeat steps 4 to 6 to add additional items in the side bar.
Items are displayed in sequence vertically; the first item in the sequence is numbered 0, the second item is numbered 1, and so on.
To set a selected item in the side bar, do the following:
1. In the Design Structure Window, select the styledList node.
2. In the Property Inspector, set the selectedIndex attribute to the value of the item you want to be selected when the page is first displayed in a browser. Use the following values:
  - 0 - make the first item selected
  - 1 - make the second item selected
  - 2 - make the third item selected, and so on

Tip: The sideBar links can be databound dynamically. For complete information about data binding and how to use childData to add the links, refer to the ADF UIX Developer's Guide.

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

Example (UIX XML)


...
<pageLayout>
  
  <!-- Level 3 Navigation -->
  
  <start>
    <sideBar>
      <contents>
        <styledList selectedIndex="1">
          <contents>
            <styledItem>
              <contents>
                <link text="Beverages" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Canned Goods" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Meat and Poultry" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
          </contents>
        </styledList>
      </contents>
    </sideBar>
  </start>
  
  <!-- REST OF PAGE LAYOUT-->
  
</pageLayout>
...