Preview

The preview is a pane that displays the visual application preview based on the components used in the application tree when creating an application.

In the App Designer preview, you can see a preview of your application. Run a preview by clicking  Run in Designer in the preview toolbar. If you activated the preview and edited your application, update the preview by clicking  Activate in the shell bar.

Preview toolbar

Run in Designer

When running a preview, you can choose between different settings to test the look of your application on different devices. Click  Run in Designer > Settings to access the preview settings.

You can select different settings from three categories:

Screen size
Orientation
Background image

The preview settings only apply to the preview in the preview pane.

Header

Define the HTML5 header for your application.

Stylesheet

Add custom CSS to your application.

Web App Manifest

The web app manifest is a JSON file that contains essential information about a web application, such as its name, icons, start URL, and display mode. It helps define the behavior and appearance of the web application when installed on a user’s device.

The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the application’s name and icon.

Script search and ToDo List

Open the Search and ToDo List pane and search for scripts or todos in the code of the application.

Search: Search throughout all the application code. Allows replacing the searched queries with a given value.
To-Do: Will list all places in scripts that have a TODO comment.

Display data flow

Display data flows for APIs and UI5 models.

See where resources are used in the application and how they are triggered.