Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

  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. 

    Info

    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
    Image Added
  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. 

    Info

    Setting Additional Properties provides further information about the Advanced property.


...

  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.
    Image Modified
  3. The second Page is now available to use.
    Image Modified
  4. Enter the properties as required


Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@223dfe
showSpacefalse
sorttitle
typepage
cqllabel in ("logo","additional-properties","bdc") and type = "page" and space = "IFAB"
labelskb-how-to-article

...