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:
In the SAP Web IDE, open the folder structure of the Manage Products project and then proceed as follows:
<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>
To make the section title translatable, add the text to the i18n file as follows:
#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
To add the extension definition to the manifest.json file, use a viewExtension.
The extension appears within the ObjectPage.view using the AfterFacet option.
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}}" } } } } } },
The object page of the Manage Products app displays the new section Product Description: