Object Page Layout

Owned by Charles Evans
Jul 03, 2020
4 min read

Properties of Object Page Layout

  1. Id - unique identifier of the control
  2. Always Show Header - set a boolean value or a variable with type boolean from the Model to control the alwaysShowContentHeader property
  3. Use Icon Tab Bar - set a boolean value or a variable with type boolean from the Model to control the useIconTabBar property
  4. Advanced - properties of the control not available in the above list can be added here. 

Setting Additional Properties provides further information about the Advanced property

Controls of Object Page Layout
Object Page Layout requires additional controls inside of it to make it functional. These controls are Header Title, Object Page Header Content and Sections. These can be added by doing a right click from the Object Page Layout Control.

Properties of Header Title
The properties are inside the Object Page Header instead of the Header Title

  1. Id - unique identifier of the control
  2. Title - title of the object
  3. Subtitle - description of the object 
  4. Image URI - URL of the image
  5. Image Shape - determines whether the picture should be displayed in a square or with a circle-shaped mask

  6. Advanced - properties of the control not available in the above list can be added here. 

    Setting Additional Properties provides further information about the Advanced property

Properties of Object Page Header Content
The Object Page Header Content control does not have properties that can be set, however, the individual controls added under it should have its corresponding properties to be set. In the below example, a Text control has been added and assigned with its properties.

Properties of Sections
This is where the main content of the Object Page Layout will reside. The Sections do not have properties that can be set, however, the Object Page Section, Object Page Subsection and the individual controls under it do have properties that needs to be set.

Properties of Object Page Section

  1. Id - unique identifier of the control
  2. Title - title of the Tab
  3. Show Title - set a boolean value or a variable with type boolean from the Model to control the showTitle property
  4. Title Upper Case - set a boolean value or a variable with type boolean from the Model to control the titleUppercase property
  5. Visible - set a boolean value or a variable with type boolean from the Model to control the visibility property

Properties of Object Page Subsection

  1. Id - unique identifier of the control
  2. Title - title of the content
  3. Mode - property that will be passed to the controls in the blocks and moreBlocks aggregations sap.uxap.ObjectPageSubSectionMode
  4. Title Upper Case -  set a boolean value or a variable with type boolean from the Model to control the titleUppercase property

Step-by-step guide

How to add an Object Page Layout

  1. Right click on a Page or a Vertical Layout and select Add Layout-→ Add Object Page Layout
  2. An Object Page Layout Control has been added
  3. Right click on the Object Page Layout and select Add Header Title

    Right click on the created Header Title and select Add Object Page Header
  4. An Object Page Layout with Object Page Header has been added
  5. Right click on the Object Page Layout and select Add Header Content

    Right click on the created Header Content and select the relevant control to be added
  6. A control within a Header Content has been added
  7. Right click on the Object Page Layout and select Add Sections

    Right click on the created Section and select Add Object Page Section

    Right click on the created Object Page Section and select Add Subsections

    Right click on the created Subsection and select Add Object Page Subsection

    Right click on the created Object Page Subsection and select the relevant control to be added
  8. A control within a Section has been added