Object Page Scrolling

The Object Page offers different ways to handle specific scrolling scenarios.

General Scrolling Behavior

By default, the headerContent of the Object Page snaps to the headetTitle when scrolling a longer section. Some of the contents of the headerContent move to the headetTitle and thus remain always visible. You can see an example of this behavior in the screenshot below.

Object Page Header: Expanded (left) vs. Snapped (right)
This behavior can be altered. Setting the property alwaysShowContentHeader=true will prevent the headerContent from snapping.
Note

This property only affects desktop environments.

Inner App State & Scrolling

Storing the scroll position is important, when the Object Page holds large amounts of data and the workflow requires switching between different applications, or scrolling to a specific position within a section.This can be done in the following way:

  1. Set an ID to the section or subsection you want to navigate to later on.

    <ObjectPageSection title="Employment">
	<subSections>
		<ObjectPageSubSection id="empl" title="Job information">
			...
		</ObjectPageSubSection>
	</subSections>
</ObjectPageSection>

  2. In the controller you have to get the ID of the Section and add an EventDelegate to the Object Page with the ID of the desired section.

    /navigate to a specific subsection on open
this.oObjectPageLayout = this.getView().byId("ObjectPageLayout");
this.oTargetSubSection = this.getView().byId("empl");
this.oObjectPageLayout.addEventDelegate({
onAfterRendering: jQuery.proxy(function () {
			//need to wait for the scrollEnablement to be active
			jQuery.sap.delayedCall(500, this.oObjectPageLayout, this.oObjectPageLayout.scrollToSection, [this.oTargetSubSection.getId()]);
			}, this)
});

For more information, see the Sample.