Page - Expert

Owned by Charles Evans
Jul 03, 2020
3 min read

To provide more flexibility in defining a Page, an expert mode is available. In this type of page, the Header, Content (Body) and Footer should and can be defined in a more customized way.

Core properties of the Page - Expert:

  1. Id - unique identifier of the control

  2. OnLoad - a JavaScript function can be set here which will be called on the initial load of the Page. Typical use of this is for initialization of values.
    Additional Page Events that can be assigned with Javascript functions

  3. More.. - opens up the More Properties Dialog Screen 

  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.

More Properties Dialog Screen

  1. title - Text that will be displayed at the center of the Header area
  2. titleLevel - choose from the available options from sap.ui.core.TitleLevel. Leaving it blank will set it to value Auto as a default.
  3. showNavButton - A nav button will be rendered on the left area of header bar if this property is set to true. Set a boolean value or a variable with type boolean from the Model to control the showNavButton property
  4. showHeader - set a boolean value or a variable with type boolean from the Model to control the showHeader property
  5. showSubHeader - set a boolean value or a variable with type boolean from the Model to control the showSubHeader property
  6. navButtonTooltip - tooltip of the NavButton
  7. enableScrolling - set a boolean value or a variable with type boolean from the Model to control the enableScrolling property
  8. backgroundDesign - set a background color by choosing the values from sap.m.PageBackgroundDesign
  9. showFooter - set a boolean value or a variable with type boolean from the Model to control the showFooter property
  10. contentOnlyBusy - set a boolean value or a variable with type boolean from the Model to control the contentOnlyBusy property
  11. floatingFooter - set a boolean value or a variable with type boolean from the Model to control the floatingFooter property
  12. navButtonPress - this event is fired when Nav Button is pressed

Areas of Page - Expert

  1. Header - This is where Page Header UI elements can be added. Sections of a header are Content Left, Content Middle and Content Right.
  2. Content (Body) - This is where most of the UI Elements are added/defined. The content can be treated similar on how to add UI Elements on a Page as described in How to add UI elements to the App


  3. Footer - Page Footer is defined here (e.g. Buttons for specific actions or navigation)

Step-by-step guide

How to add a Page - Expert

  1. Select the Project by clicking on it in the Project Structure.
  2. Right click on the Project component and select Add Page (Expert).

  3. The second Page is now available to use.
  4. Right click on the page to add the Header, Content and Footer

Related articles