Preview
The preview is a pane that displays the visual 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.
You can also run a preview in a new tab instead of the preview pane. Run a preview in a new tab by clicking Run in browser on the shell bar.
Preview settings
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.
Preview toolbar
The preview toolbar consists of the following items to adjust the preview and make global changes to the application:
- Run in Designer
-
Run a preview of the application in the App Designer and edit settings for the preview.
- Header
-
Define the html5 header for your application.
- Stylesheet
-
Add custom CSS for your application.
- Script search and ToDo List
-
Open the Search and ToDo List pane and search for scripts or todos in the code of the application.
- Display data flow
-
Display data flows for APIs and UI5 models. See where resources are used in the application and how they are triggered.
- Header
-
Define the html header for your application.
- Stylesheet
-
Add custom CSS for your application.
- Global Script
-
Add JavaScript code to your application. This code is inserted at the top of the application content.