Preview an application that you develop to verify that different types of
devices, such as a desktop browser or a phone, correctly display your application, or to test
a custom mashup code in your application.
When you preview the application, you
can turn on the design mode to modify the user interface.
Note: Device preview is not a
substitute for application tests on an actual device.
-
In App Studio, select a portal that you want to preview by clicking
the portal list next to the application name.
-
Check the preview size by hovering over the monitor, tablet, and mobile phone icons.
Result: Different masks display to indicate the preview size for every
device.
-
Click a device icon to display the application preview for that device.
-
For tablets and mobile phones, switch between landscape and portrait modes by clicking
a device icon again.
- Optional:
Modify the user interface by configuring sections, work areas, regions, and so
on:
-
On the toolbar, turn on the design mode by clicking the Toggle design
mode icon.
-
When you reach a page that requires updates, click the
Pencil icon in the highlighted section, area, or
region.
-
In the right panel, update the configuration of the element that you
selected.
What to do next: Preview how a specific device displays your application by selecting the device from
the configurable list of devices. If a device is not on the list, edit the list of devices in
Dev Studio. For more information, see Adding, editing, and deleting a preview device.