Show TOC

Anchor BarLocate this document in the navigation structure

The AnchorBar control contains buttons that ease navigation and scrolling within sections and/or subsections of an ObjectPageLayout control.

Anchor Bar Responsiveness
The SAPUI5 control that is used for rendering the Anchor Bar is the sap.uxap.AnchorBar control, which extends sap.m.Toolbar. The control that is used for rendering the navigation buttons is sap.m.Button. When items in the Anchor Bar are clicked, the page scrolls down to the corresponding sap.uxap.ObjectPageSectionBase. When the application scrolls, the Anchor Bar remains at the top of the screen.
Note

In some applications or in some rendering modes of applications, it may not be desirable or necessary to display the Anchor Bar. In these cases, the Anchor Bar can be hidden using the setShowAnchorBar(boolean) function.

Rules for Displaying Sections and Subsections
The following rules are applied to display the contents of the ObjectPageLayout correctly. Each rule is applied to the output of the preceding rule.
  1. If the subsection content is empty, do not display this subsection.

  2. If the section content is empty, do not display this section.

  3. If a section without a title contains only one subsection with a title, the section will get the title of the subsection ( SectionTitle = SubsectionTitle and SubsectionTitle=NULL)

  4. If the ObjectPageLayout contains only one section, no Anchor Bar will be displayed.

  5. If there are more than one section, the first section will not have a title.

Custom Anchor Bar Buttons

By default, you don’t need to specify anything for a sap.uxap.ObjectPageSectionBase to have its button included in the Anchor Bar. At runtime, the ObjectPageLayout control will create a button which has the same text as the corresponding section title. However, you may want to use your own control for rendering the Anchor Bar button instead of the default sap.m.Button. You can specify the custom control at sap.uxap.ObjectPageSectionBase level, as shown here:

<ObjectPageSection>
    <customAnchorBarButton>
        <m:Button text="Employee Info"/>
    </customAnchorBarButton>
</ObjectPageSection>

The scrolling is handled automatically, so you don't need to add anything to enable this feature. However, if you want to handle the press event differently, then you can add an event handler to the button and can also optionally customie the button.

<ObjectPageSection>
    <customAnchorBarButton>
        <m:Button text="Employee Info" press="handleAnchorBarPress" type="Transparent"/>
    </customAnchorBarButton>
</ObjectPageSection>

Here is a complete example showing the usage of custom controls for the Anchor Bar buttons:

<ObjectPageLayout id="ObjectPageLayout">       
    <headerTitle>
        <ObjectPageHeader id="headerExpandedGrid" />
    </headerTitle>
    <sections>
        <ObjectPageSection id="section1" title="Employee Info" >
            <customAnchorBarButton>
                <!-- this sap.m.ToggleButton will be used in the anchor bar for navigating to that section -->
                <m:ToggleButton text="Employee Info" />
            </customAnchorBarButton>
        </ObjectPageSection>

        <ObjectPageSection  id="section2" title="Personal Info">
           <customAnchorBarButton>
                <!-- this sap.m.Button will be used in the anchor bar for navigating to that section -->
               <m:Button type="Accept" text="Personal Info" />
           </customAnchorBarButton>
        </ObjectPageSection>

    </sections>
</ObjectPageLayout>