Application Modeler

The application modeler extension allows you to visualize and change the page routing of SAP Fiori elements applications (Page Map), and to configure individual pages via manifest settings, annotation properties, and UI flexibility changes (Page Editor).

Starting as of version 1.10.1, the Page Editor supports adding and maintaining properties of SAP Fiori elements building blocks for OData V4-based applications. This feature is currently an experimental one and is subject to changes and enhancements based on customer feedback.

Migration

Applications created with the SAP Fiori Tools (see "Integration with the Fiori: Application Generator" topic below) are automatically enabled for application modeler. In order to migrate an existing project, which is already present in your workspace, execute the command Fiori: Migrate Project for use in Fiori tools from the Command Palette. Supported project types:

• SAP Fiori elements for V2
• SAP Fiori elements for V4
• SAPUI5 freestyle
• SAPUI5 Adaptation Project (only on SAP Business Application Studio)
• Extension Project (only on SAP Business Application Studio)

Usage

1. The SAP Fiori project cloned from a repository or filesystem has to be in your workspace.
2. Execute the command Fiori: Migrate Project for use in Fiori tools from the Command Palette.
3. Select your project(s) in project list
4. Select a SAP System for your project's service (and reuse libraries in applicable) from the dropdown list , or select Manual Input to enter backend "Hostname" URL and SAP Client manually
5. If the application has no backend service no input in needed.
6. Click on "Start Migration" to upgrade the selected project(s).

The migration will update the package.json, ui5*.yaml, and test\*.html files in your project folder.

Page Map

Features

The SAP Fiori Tools - Page Map provides a visual representation of the application's pages, navigations, and the service entities that it uses. The developer can add new navigations and pages, delete pages, and navigate to corresponding editing tools.

The Page Map extension reads and updates the app.json file containing the navigation and pages information in a compact and technology independent notation. The file also serves as a simple text-based interface. It is generated on demand and can be accessed from the application modeler tree view from SAP Fiori sidebar view by selecting the Show Source Code option from the Map node's right-click context menu. The application descriptor (webapp/manifest.json) of the application will be updated automatically when the app.json is saved, and changes to the webapp/manifest.json will be converted to app.json. The app.json is virtual and will not be written to the project folder.

Supported Templates of SAP Fiori Elements

• List Report Page with OData V2 and OData V4
• Worklist Page with OData V2 and OData V4
• Analytical List Page with OData V2 and OData V4
• Overview Page with OData V2 and OData V4
• From Entry Object Page with OData V4
• Custom Page with OData V4

How to use Page Map

Select the root folder of your app or any folder in your workspace within Explorer, right-click and choose Show Page Map. If the project can't be determined from your selection, you will be presented with a quick pick to select the project.

OR

Left-click on the Map node in application modeler tree view for the project from SAP Fiori side bar view.

OR

In the text editor of the virtual app.json file choose the Show Page Map icon in the Editor Title menu

OR

From the Command Palette execute the command Fiori: Show Page Map

Notes

• Undo/redo via menu options is not supported in SAP Application Studio

Prerequisites

• NodeJS Version 18.14.2 or higher

Page Editor

Features

The SAP Fiori Tools - Page Editor provides an outline view of the configurable elements on the selected page. Settings can be changed within a property panel which opens on click on an element. The property panel displays the editable properties, provides a search filter option, info texts for properties, and via Edit in source code the option to see and edit the property directly in the associated file.

The Page editor reads and writes pages/*.json files containing the applicable manifest and UI5 flexibility based settings in a compact and technology independent notation. The files also serve as a simple text-based interface. They are generated on demand and can be accessed from the application modeler tree view from SAP Fiori sidebar view by selecting the Show Source Code option from the respective page's node's right-click context menu. Each page in your app has its own json file. The virtual files will be automatically synchronized with the webapp/manifest.json and UI5 flex changes in the webapp/changes folder.

Annotation Support

Starting as of version 1.4.1 of the application modeler and @sap/ux-specification with the versions 1.84.25, 1.90.14 or higher, the Page Editor allows the creation and maintenance of the most common annotation-based UI elements for OData V4-based List report Object page and Form entry page applications. With this addition, the application modeler further strengthens the goal of SAP Fiori tools to ease and speed up the application development.

Building Block Support

Starting as of version 1.10.1 of the application modeler and @sap/ux-specification 1.108.8, 1.96.41 or higher, the Page Editor supports adding and maintaining the properties of SAP Fiori elements building blocks for OData V4-based applications. Building blocks within a custom page or custom section can be shown in the outline and their properties be modified in the property panel. The building blocks for the chart, filter bar, and table can be created from the outline using a link to the corresponding feature guides in the Guided Development tool.

This feature is currently experimental and subject to changes and enhancements based on customer feedback.

Supported Templates of SAP Fiori Elements

• List Report Page with OData V2 and OData V4
• Worklist Page with OData V2 and OData V4
• Analytical List Page with OData V2 and OData V4
• Overview Page with OData V2 and OData V4
• From Entry Object Page with OData V4

How to use Page Editor

Select the root folder of your app or any folder in your workspace within Explorer, right-click and choose Show Page Map. Choose a page you want to configure and click the pencil icon.

OR

Left-click on the respective page's node in application modeler tree view for the project from the SAP Fiori side bar view.

OR

In the text editor of the virtual JSON file of the page choose the Show Page Editor icon in the Editor Title menu.

How to Preview the Application

Provided by @sap/ux-ui5-tooling the application modeler also comprises a live preview in a browser for non-CAP applications (for CAP the preview is handled via CDS tools), which is automatically refreshed when application project files are changed. The live preview starts an HTTP local server at default port 8080 (additional apps start at subsequent ports), where the application is run.

Select the root folder of your app or any app-related folder within the Explorer, right-click, and choose Preview Application to start the app in your default browser.

OR

From the Command Palette execute the command Fiori: Preview Application

OR

From the application modeler tree view for the project from the SAP Fiori sidebar view right-click on any folder, and choose Preview Application.

If the application can't be determined from your selection, you will receive a quick pick to select it from. Next, you receive a list of start scripts from the package.json with options on how you want the preview to be executed. The default options are:

• start - starts the application with real service data
• start-mock - starts the application with mock data
• start-local - starts the application with mock data and a local copy of the SAPUI5 resources for offline work
• start-noflp - starts the applications without the sandbox SAP Fiori launchpad

The preview command also offers the existing run configurations for the applications to start. Preview via run configurations gives the developer more flexibility in maintaining multiple preview setups and run with debugger attached. The command Fiori: Open Run Configuration allows you to create a new run configuration in VSCode. In SAP Business Application Studio the functionality is available also via the action Create Configuration under View -> Run configurations.

Enable App-to-App Navigation Preview

To enable the preview of app-to-app navigation for applications in the same workspace execute the command Fiori: Enable App-to-App Navigation from the Command Palette. It will ask you for a source and target application. Upon completion a new configuration appconfig\fioriSandboxConfig.json is written to the source application folder. Navigations from source to target application are now available in preview.

Preview an Application in External Fiori Launchpad

This feature provides the user with the ability to test an application run without its redeployment. Running an application on the existing Fiori Launchpad requires the application to be deployed once and configured, so it is visible on the target Fiori Launchpad. The feature needs to be configured once with the command Fiori: Add FLP Embedded Configuration. Then a new start script start-embedded becomes available. Note that the SAP Launchpad service on SAP BTP does not support the use of this feature currently.

Prerequisite: @sap/ux-ui5-tooling version 1.3.1 or higher

Developer variant creation

This feature provides the user with the ability to create variants which are delivered together with the application. The variants are stored as SAPUI5 flexibility changes in the project's webapp/changes folder and packaged with the application during the build step. The feature is delivered with the @sap/ux-ui5-tooling node module and its preview feature.

Developer variant creation is supported from the SAPUI5 version 1.90 (OData V2 based applications) and 1.84 (OData V4 based applications). Currently, @sap/ux-ui5-tooling supports only ABAP service-based projects. The feature can be started from "Preview Application" context menu via the script start-variants-management. The script and necessary configuration are added with the palette command Fiori: Add Configuration for Variants Creation.

Prerequisite: @sap/ux-ui5-tooling version 1.4.0 or higher

Documentation of Configuration Features

The manifest and UI5 flexibility properties of the respective SAP UI5 version shown in Page map and Page editor are provided by the @sap/ux-specification node module installed on project creation or migration. The version of the module is determined by the minUI5Version of the application project stored in the manifest.json file. The full list and documentation of available properties for the application, and the application's individual pages can be accessed independently from the Page Map and Page Editor via the right-click context menus in the application modeler tree view.

Integration with the SAP Fiori Tools - Application Generator

Installation

Installing the Application Modeler extension adds support for the application generator tool. The Application Generator allows the user to generate an application based on a number of different templates.

How to use Application Generator

From the Command Palette execute the command Fiori: Open Application Generator

This will launch the application generator tool if installed. If the application generator is not yet installed, it will install it the first time this command is executed.

Prerequisites

• NodeJS Version 18.14.2 or higher

Application Information Page

After application generation an information page will be automatically opened. This page comprises sections with information, links to tools and further actions.

• Project Details - information like the title, the path, the pages, and type of application
• Application Status - showing the status of required libraries
• What you can do - a collection of tiles to access useful tools within the context of the application
• What you can learn - resources for further reading

The information page can also be opened with the command Fiori: Open Application Info.

Data Editor

Previewing the application using 'npm run start-mock' generates mock-data on the fly. If you want to generate mock-data and store it in the .json file format, you can right-click on your project and launch Open Data Editor. Once generated, the mock-data is stored in the .json files under the /webapp/localService/mockdata folder.

Data Editor reads the metadata.xml file and generates mock-data. Data can be edited in the canvas by either double-clicking the cells of the Data Editor or changing the .json files directly.

Support

Join the SAP Fiori Tools Community. Ask Questions, Read the Latest Blogs, Explore Content. Please assign tag: SAP Fiori tools.

To log an issue with SAP Fiori Tools, please see Contact SAP Support.

Documentation

• Visit SAP Help Portal for SAP Fiori Tools documentation.

License