App Preview is a tool where, an administrator can preview changes to various aspects of an application on the fly without disturbing any users. The full live application is available to change and review. This helps to improve your productivity when designing the application's user interface.
Open App Preview from the Platform application switcher.
App Preview in Classic UI
The App Preview menu option in Classic UI lets you select the following:
- Change the Text direction based on the language. See Language support for more information about language support and text direction.
- The theme for the application. See Working with themes for more information about themes.
- Select preferred Notifications Position.
- The type of device to preview: smart phone, tablet in portrait mode, tablet in landscape mode, or desktop.
- The UI blueprint for the application. See UI Blueprints for more information.
- The field label setting to choose a preferred way of rendering the field labels based on the selected device. See Customizing field labels for more information about field label settings.
- The card templates used to display record lists on different mobile devices. See Cards and card containers for more information about cards.
Use the checkmark icon to save your changes and click Save Applications Settings? > Ok dialog to save. The changes are applied and the App Preview window is closed.
Use the X mark icon to discard changes and exit from the App Preview.
The following screen shows the App Preview interface. In this example, the user has selected the smart phone interface, selected a different theme, and selected a user-defined card:
When viewing a record list page on a mobile device, it is rendered using a card container by default (see Cards and card containers). To switch the view to the normal record list view, click the Switch to Grid button:
To switch back to the card container, click the Switch to Card button:
The App Preview menu option in New React UI lets you configure the following:
- Page Style Setting – Choose the overall page display style - Dark or Bright.
Navigation Mode – Choose the navigation mode - Side, Top or Mixed.
Content Width – Choose the width of the displayed content - Fluid or Fixed.
Fixed Header – Toggle to enable/disable a fixed header on the application page.
Fixed Sidebar – Toggle to enable/disable a fixed sidebar on the application page.
Component Density – Choose the density of the components displayed on the application page - Small, Middle & Large.
Click Apply to save the app preview settings. The App Preview can also be accessed by clicking the Settings gear icon on the right side of the page.