Object Page Layout

The ObjectPageLayout control has a header, an optional Anchor bar and contains sections and/or subsections that structure the information. The subsections contain blocks. The ObjectPageLayout control can either be defined in an XML view or built in JavaScript via APIs, as shown in the following examples:

Definition in an XML view:

<core:View
        xmlns:core="sap.ui.core"
        xmlns="sap.uxap"
        xmlns:m="sap.m"
        controllerName="mycompany.myController"
        height="100%">
        <ObjectPageLayout id="ObjectPageLayout">
       </ObjectPageLayout>
</core:View>

Definition in JavaScript:

var oObjectPage = new sap.uxap.ObjectPageLayout("ObjectPageLayout");
    oView.addContent(oObjectPage);

The ObjectPageHeader control displays information on top of the ObjectPageLayout. It has several parts: parts which scroll with the content (headerContent) and parts which always remain visible (navigationBar, headerTitle). Here is how the header is defined in both views:

XML view:

 <ObjectPageLayout id="ObjectPageLayout">
                 <headerTitle>
                    <ObjectPageHeader>
                        <m:Label text="Personal description"/>
                    </ObjectPageHeader>
                </headerTitle>
                <headerContent>
                    <m:Text value="some KPI info"/>
                </headerContent>
         </ObjectPageLayout>

JavaScript:

var oHeaderTitle = new sap.uxap.ObjectPageHeader();
        oHeaderTitle.addContent(new sap.m.Label({text:"Personal description"}));
        oObjectPage.setHeaderTitle(oHeaderTitle);

        oObjectPage.addHeaderContent(new sap.m.Text({value:"some KPI info"}));

The AnchorBar control eases scrolling to the sections and/or subsections of the ObjectPageLayout control. The AnchorBar is displayed by default. You can hide it by using the showAnchorBar property as shown in these examples:

XML view:

<ObjectPageLayout id="ObjectPageLayout" showAnchorBar="false">
    </ObjectPageLayout>

Using the setShowAnchorBar(boolean) function:

oObjectPage.setShowAnchorBar(false);

The toggleAnchorBar event is fired by the ObjectPageLayout control when the AnchorBar is switched from moving to fixed.

An additional option for displaying the AnchorBar is to use a sap.m.IconTabBar control instead of the default sap.uxap.AnchorBar control. This is done with the API property useIconTabBar(booblean). If set to true, it will also set showAnchorBar to false in order to avoid showing two navigation bars. This is how it looks in the two views:

XML view:

<ObjectPageLayout id="ObjectPageLayout" useIconTabBar="true">
</ObjectPageLayout>

JavaScript:

oObjectPage.setUseIconTabBar(true);

The sections aggregation of the ObjectPageLayout control can hold objects of type ObjectPageSection, which in turn can hold aggregation objects subSections of type ObjectPageSubSection. In addition, a section can be composed of one or multiple subsections. There are several APIs in the ObjectPageLayout control which allow the manipulation of sections: removeSection, indexOfSection, insertSection. A button representing the various sections/subsections is created automatically by the ObjectPageLayout control using the sap.m.Button control. Selecting this button will scroll the view to the selected section and display its contents.

Here are some examples of how sections are initialized in both views:

XML view:

<ObjectPageLayout id="ObjectPageLayout">
        <sections>
            <ObjectPageSection title="Payroll" >
                <subSections>
                    <ObjectPageSubSection title="sub payroll title"/>
                </subSections>
            </ObjectPageSection>
        </sections>
    </ObjectPageLayout>

JavaScript:

 var oSubSection1 = new sap.uxap.ObjectPageSubSection({title:"sub payroll title"});
    var oSection1 = new sap.uxap.ObjectPageSection({title:"Payroll"});
    oSection1.addSubSection(oSubSection1);
    oObjectPage.addSection(oSection1);

Here is a list of rules that determine the visibility and structure of sections:

• Visibility of Sections and SubSections

  • If a section has no visible subsection, then it is not displayed

  • If a subsection has no visible block, then it is not displayed

• Visibility of Anchor Bar

  • No Anchor bar is displayed with a single visible section.

• Visibility of Titles

  • If a section has a single subsection with a title, this title is promoted to the section’s title.

  • No title is displayed for the first section of an ObjectPageLayoutcontrol that holds the Anchor bar.

• Visibility of the “See More” Button

  By default, no “See More” button (...) is displayed at the subsection level. This button is only displayed for a subsection that contains one of the following:

  • Visible blocks in the moreBlocks aggregation

  • Visible ObjectPageBlockBase block that has the property showSubSectionMore set to true

The lazy loading mechanism allows you to only load data when the blocks are inside or near the visible area on the screen. This way, you avoid sending too many requests right from the start of the page loading.

If you want to use lazy loading, all your blocks must be based on ObjectPageBlockBase. If they are not based on this, they will load like normal SAPUI5 components.

 <ObjectPageLayout id="ObjectPageLayout" enableLazyLoading="true">

The ObjectPageSubSectionLayout property provides information on how all the underlying subsections are going to arrange blocks within their internal grid.

The default layout is titleOnTop and arranges blocks in subSections divided into 3 columns.

Additionally, a second layout named titleOnLeft can be used to arrange blocks in subSections divided into 2 columns. Here is how this property is set in the XML view:

 <ObjectPageLayout id="ObjectPageLayout" subSectionLayout="titleOnTop">
        <sections>
            <ObjectPageSection title="Payroll" >
                <subSections>
                    <ObjectPageSubSection title="sub payroll title">
                        <blocks>
                            <myNameSpace:myBlock/>
                            <myNameSpace:myBlock/>
                            <myNameSpace:myBlock/>
                        </blocks>
                    </ObjectPageSubSection>
                </subSections>
            </ObjectPageSection>
        </sections>
    </ObjectPageLayout>