Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

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

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




  • No labels