2.2.1 Page

Owned by Andre Reforma (Deactivated)
Last updated: Jun 15, 2018
2 min read

The Page is the container of the App's screen. FAB provides the header, content (body) and footer areas by default.

The page has the following properties:

  1. Id - unique identifier of the control
  2. Title - Text that will be displayed at the center of the Header area
  3. Header style - CSS properties can be defined here (e.g. background:#8ac43f)
  4. Custom footer - implement custom footer definition
    Sample implementation of adding 2 buttons in the footer
    <Toolbar class="x-colophon">
    <ToolbarSpacer/>
    <Button text="Use vendor details" enabled="true"
    visible="true" type="Emphasized" press="executeFunction" cdata:function="goToInvoiceSearch(evt)"
    icon="sap-icon://visits"/>
    <Button text="Create New Vendor" enabled="true"
    visible="true" type="Emphasized" press="executeFunction" cdata:function="AddNewVendor(evt)"
    icon="sap-icon://sys-add"/>
    </Toolbar>

  5. Logo src - image to be displayed in the right part of the Header area. 

    Add Logo to a FAB Form describes this in detail

  6. Use custom header - similar to Custom footer, a header definition can be implemented here
  7. 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
  8. Enabled - set a boolean value or a variable with type boolean from the Model to control the enable property
  9. Visible - set a boolean value or a variable with type boolean from the Model to control the visibility property
  10. BackButton - toggles to show either logout and back button
  11. ShowActions - show/hide the footer and action buttons
  12. More... - opens up the More Properties Dialog Screen

  13. 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. titleLevel - choose from the available options from sap.ui.core.TitleLevel. Leaving it blank will set it to value Auto as a default.
  2. 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
  3. showHeader - set a boolean value or a variable with type boolean from the Model to control the showHeader property
  4. showSubHeader - set a boolean value or a variable with type boolean from the Model to control the showSubHeader property
  5. navButtonTooltip - tooltip of the NavButton
  6. enableScrolling - set a boolean value or a variable with type boolean from the Model to control the enableScrolling property
  7. backgroundDesign - set a background color by choosing the values from sap.m.PageBackgroundDesign
  8. showFooter - set a boolean value or a variable with type boolean from the Model to control the showFooter property
  9. contentOnlyBusy - set a boolean value or a variable with type boolean from the Model to control the contentOnlyBusy property
  10. floatingFooter - set a boolean value or a variable with type boolean from the Model to control the floatingFooter property
  11. navButtonPress - this event is fired when Nav Button is pressed

Step-by-step guide

How to add a Page

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

  3. The second Page is now available to use.

  4. Enter the properties as required