Adding a Section to an Object Page

In this section, we describe the steps you as an app developer have to perform to add an additional section to your object page.

For this example, we assume you want to add a section called Product Description to the object page of the Manage Products app. You have to complete the following steps:

Create fragment for the new facet
Add section title to the i18n file
Add extension definition to the manifest.json file

Step 1: Create fragment for the new facet

In the SAP Web IDE, open the folder structure of the Manage Products project and then proceed as follows:

In the webapp folder, create a new subfolder called ext.
In the folder ext, create a new subfolder called view.
In the view folder, create file DescriptionBreakout.view.xml.
Define the view with its elements, here a TextArea that consumes the section title for the product description text in the original language.

Sample Code

<core:View xmlns:core="sap.ui.core" xmlns="sap.m">
	<VBox>
		<TextArea id="DescriptionTextArea" 
				value="{to_ProductTextInOriginalLang/Description}"
				width="30%" 
				editable="false"/>
	</VBox>
</core:View>

Step 2: Add section title to the i18n file

To make the section title translatable, add the text to the i18n file as follows:

Sample Code

#This is the resource bundle for Manage Products
					
# XTIT: Title of a facet within an object page if not needed in local/annotations.xml
ProductDescription=Product Description

Step 3: Add extension definition to the manifest.json file

To add the extension definition to the manifest.json file, use a viewExtension.

The extension appears within the ObjectPage.view using the AfterFacet option.

Sample Code

manifest.json
	"extends": {
			"extensions": {
				"sap.ui.viewExtensions": {
					"sap.suite.ui.generic.template.ObjectPage.view.Details": {
						"AfterFacet|SEPMRA_C_PD_Product|GeneralInformation": {
							"className": "sap.ui.core.mvc.View",
							"viewName": "ManageProducts.ext.view.DescriptionBreakout",
							"type": "XML",
							"sap.ui.generic.app": {
								"title": "{{ProductDescription}}"
							}
						}
					}
				}
			}
		},

Results

The object page of the Manage Products app displays the new section Product Description: