Skip to content

Latest commit

 

History

History
99 lines (55 loc) · 4.86 KB

define-application-structure-bae38e6.md

File metadata and controls

99 lines (55 loc) · 4.86 KB

Define Application Structure

Being part of the SAP Fiori Tools – Application Modeler extension, SAP Fiori tools Page Map allows to change the pages structure of the application and application-wide settings like the Flexible Column Layout that iss available when using SAP Fiori elements.

Tip:

Page Map also supports SAPUI5 freestyle applications. However, this is an experimental feature with a limited scope. For example, you cannot add and delete pages.

Launching Page Map

You can launch the Page Map in several ways:

  1. Application Info

    For more information, see Application Information.

  2. Command Palette.

    • Open the Command Palette([CMD/CTRL] + [Shift] + [P] ) and start typing Page Map.
    • Click Fiori: Show Page Map.
    • In your workspace, select the SAP Fiori elements project.

  3. Folder Context Menu.

    If you already have a SAP Fiori elements project in your current workspace, right-click the project folder and click Show Page Map.

Using the Page Map

Application Settings

When the Page Map is open, you can see Application Settings in the default view. These settings contain the common and layout settings that are valid for the whole application.

  • To change the application title after the application was created, use the Title field.

  • To change the application description, use the Description field.

  • The Flex Enabled field indicates whether the application supports UI adaptation. This field has the following options available:

    • true: Enables UI Adaptation.
    • false: Disables UI Adaptation.

    The default value is undefined.

    The Flex Enabled feature

    For more information, see SAPUI5 Flexibility: Enable Your App for UI Adaptation

  • After you change any setting, the update applies immediately.

  • To hide the panel, click Toggle properties panel visibility in the upper-right corner.

SAP Fiori tools Application Modeler Page Map

Adding a New Page

With the SAP Fiori tools Page Map, you can add additional pages to your application.

  • Click the (Add New Page) icon in the header.

  • From the Select Page Type list, select ObjectPage and click Add.

  • In the Navigation field, select an entity that the page would navigate to.

    The list of available entities depends on the previous entity you navigate from. See Configure Page Elements for more information.

For OData V4, you can add a custom page.

Custom Page for OData V4

  • Click the (Add New Page) icon in the header of a page file.

  • From the Select Page Type list, select CustomPage and click Add.

  • In the Navigation field, select an entity that the custom page navigates to.

  • Under Select your view, select one of the following option buttons:

    • Create a New View. Can create a new view.
    • Use Existing View. Provides a list of the prepared sample custom views.

  • In the View Name field, enter the name of the view or select a value from the existing list.

  • Click Add. As a result, a success message appears, such as Custom Page ProcessFlow added successfully.

Note:

For OData V4 based applications, the templates used by the Page Map to provide this flexibility are published as part of our Open UX tools @sap-ux/fe-fpm-writer. This new transparency allows everyone to inspect the sources behind the scenes.

Configuring the Page

Click the ✏️ (Configure Page) icon in the header of a page file to open the outline view of the Configure Page Elements. With Configure Page Elements, you can edit page properties. You can also open Configure Page Elements from the tree view of the application modeler. When changes are applied, this is reflected in the webapp/manifest.json file or the SAPUI5 flexibility changes are updated accordingly.

Deleting the Page

Click the 🗑️ (Delete Page) icon to delete the page.

See Fiori Desing Guidelines: Layouts for more information about the Layout Settings.