Page

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. 

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
   
   

   Open

   

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. 

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

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