Object Page Scrolling

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.

Figure 1: Object Page Header: Expanded (left) vs. Snapped (right)

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)
   });

You can see the complete implementation in the sample below.