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 using manifest.json file 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 experimental and is subject to changes and enhancements based on customer feedback.

Migration

Applications created with SAP Fiori tools (see the "Integration with the Fiori: Application Generator" topic below) are automatically enabled for application modeler. To migrate an existing project, which is already present in your workspace, execute the Fiori: Migrate Project for Use in SAP Fiori Tools command 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 Fiori: Migrate Project for Use in SAP Fiori Tools command from the Command Palette.
3. Select your project in the project list.
4. Select an SAP System for your project's service (and reuse libraries if applicable) from the dropdown list or select "Manual Input" to enter the back end "Hostname URL" and "SAP Client" manually.
5. If the application has no back-end service, no input is needed.
6. Click "Start Migration" to upgrade the selected project.

The migration updates 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 the SAP Fiori sidebar view. Then, select the Show Source Code option from the Map node's right-click context menu. The application descriptor (webapp/manifest.json) of the application is updated automatically when the app.json is saved, and changes to the webapp/manifest.json are converted to app.json. The app.json file is virtual and is not 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 select Show Page Map. If the project can't be determined from your selection, you are presented with a quick pick to select the project.

OR

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

OR

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

OR

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

Notes

• Undo/redo using menu options is not supported in SAP Business Application Studio.

Prerequisites

The generated application requires the following software to be installed:

• Node.js version 20.19.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 clicking an element. The property panel displays the editable properties, provides a search filter option and info texts for properties. Use the Edit in Source Code 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.json file and SAPUI5 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 the SAP Fiori sidebar view. Then, select the Show Source Code option from the respective page node's right-click context menu. Each page in your app has its own json file. The virtual files are automatically synchronized with the webapp/manifest.json and SAPUI5 flex changes in the webapp/changes folder.

Annotation Support

As of version 1.4.1 of the application modeler and @sap/ux-specification 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 application development.

Building Block Support

As of version 1.10.1 of the application modeler and @sap/ux-specification version 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 can 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 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, click 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 using 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 select Preview Application to start the app in your default browser.

OR

From the Command Palette, execute the Fiori: Preview Application command.

OR

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

If the application can't be determined from your selection, you 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. Previewing using run configurations gives the developer more flexibility in maintaining multiple preview setups and run with a debugger attached. The Fiori: Open Run Configuration command allows you to create a new run configuration in Visual Studio Code. In SAP Business Application Studio, the functionality is available by using the "Create Configuration" action 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 Fiori: Enable App-to-App Navigation command from the Command Palette. It asks you for a source and target application. Upon completion, a new appconfig\fioriSandboxConfig.json configuration is written to the source application folder. Navigations from source to target application are now available in the preview.

Preview an Application in External Fiori Launchpad

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

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 as of SAPUI5 version 1.90 (OData V2-based applications) and 1.84 (OData V4-based applications). @sap/ux-ui5-tooling only supports ABAP service-based projects. The feature can be started from the "Preview Application" context menu using the start-variants-managementscript. The script and necessary configuration are added with the Fiori: Add Configuration for Variants Creation Command Palette command.

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

Documentation of Configuration Features

The manifest.json file and SAPUI5 flexibility properties of the respective SAPUI5 version shown in the Page Map and Page Editor are provided by the @sap/ux-specification node module installed upon 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 using 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 Fiori: Open Application Generator command.

This launches the application generator tool if installed. Otherwise, it is installed automatically.

Prerequisites

• Node.js version 20.19.2 or higher

Application Information Page

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

• Project Details - shows information such as the title, the path, the pages, and type of application
• Application Status - shows the status of required libraries
• What You Can Do - shows a collection of tiles to access useful tools within the context of the application
• What You Can Learn - shows resources for further reading

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

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, and explore the content. Please assign tag: SAP Fiori tools.

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

Documentation

• Visit SAP Help Portal for SAP Fiori Tools documentation.

License