Object Page Layout

The ObjectPageLayout control is used as a generic view for displaying blocks of information.

Initialization

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);
Header (title and content)

The ObjectPageLayout's header consists of two parts: header title and header content.

The header title is represented with the ObjectPageHeader control. It is the topmost part of the ObjectPageLayout and is always visible. Its main purpose is to display the name of the business object, represented by this ObjectPageLayout, along with actions that the user can perform.

The header content can contain any information about the represented business object. It scrolls along with the content of the ObjectPageLayout.

Here is how the header title and header content are defined in both views:

XML view:

<ObjectPageLayout id="ObjectPageLayout">

	 <headerTitle>
		<ObjectPageHeader objectTitle="John Smith">
			<actions>
				<ObjectPageHeaderActionButton icon="sap-icon://edit" text="Edit" />
				<ObjectPageHeaderActionButton icon="sap-icon://save" text="Save" />
			</actions>
		</ObjectPageHeader>
	</headerTitle>

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

</ObjectPageLayout>

JavaScript:

// Create a header title, set the objectTitle property and add some action buttons
var oHeaderTitle = new sap.uxap.ObjectPageHeader();
oHeaderTitle.setObjectTitle("John Smith");
oHeaderTitle.addAction(new sap.uxap.ObjectPageHeaderActionButton({icon: "sap-icon://edit", text: "Edit"}));
oHeaderTitle.addAction(new sap.uxap.ObjectPageHeaderActionButton({icon: "sap-icon://save", text: "Save"}));
oObjectPage.setHeaderTitle(oHeaderTitle);

// Add arbitrary header content
oObjectPage.addHeaderContent(new sap.m.Label({text:"Personal description"}));
oObjectPage.addHeaderContent(new sap.m.Text({value:"some KPI info"}));
Anchor Bar

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:

Source Code 
oObjectPage.setUseIconTabBar(true);
Sections

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

Lazy Loading

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 OpenUI5 components.

Lazy loading is disabled by default, but you can enable it by setting the appropriate property: 
 <ObjectPageLayout id="ObjectPageLayout" enableLazyLoading="true">
The ObjectPageLayout control ensures that only the visible blocks (and also those adjacent to them) have loaded their data, but not the entire page. As the user scrolls or navigates within the page, new data is requested as needed.
Note

Setting this parameter to true

If you want to disable lazy loading for a particular block, you have two options:

  • Inherit from BlockBase instead of ObjectPageBlock

  • Set the property disableLazyLoading to after the ObjectPageLayout has been instantiated will not work, as all bindings will have been resolved by then.true for the required block

Layout Options

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 after the 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>