Documentation
API
Q&A
Read
AnnouncementsArticlesWebsite tips
Learn
Getting StartedManagerMaestroAnalyticsExchangeWorkspaces
Resources
VideosDownloadsExchange PackagesRelease Notes
Ideas
Contact
Platform
Manager
Maestro
Exchange
Workspaces
Analytics
Springboard

Preview Mode

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

The Maestro editor comes with the preview feature that allows you to quickly render a Maestro form so you can see how it will look when it's built and published, as well as try out some of form's functionality. This is a handy feature for Form Builders who need to render forms often to validate changes they make.

To open a form in the preview mode:

  1. Open a form in the Maestro editor and click Preview in the toolbar.
    Maestro editor preview mode
  2. Click Screens and select a screen type from the dropdown list to see how the form will look and behave on a selected screen size. The screen type can be one of the following:
    • Small
    • Medium
    • Large
    • Fullscreen
  3. Click Devices and select a device from the dropdown list to preview the form on that device. The device can be one of the following:
    • Apple iPad
    • Apple iPhone 4
    • Apple iPhone 6
    • Apple iPhone 6s
    • Apple iPhone 6 Plus
    • Google Nexus 7
    • Samsung Galaxy S7
    Note

    This does not actually run the form on the device, but rather shows how the form will render.

    Click Rotate to toggle the orientation of the form between portrait and landscape.

  4. Select a receipt type from the Receipt dropdown list, which can be one of the following:
    • PDF Receipt
    • HTML Receipt: An HTML receipt allows you to interactive with form fields in preview which is very useful for debugging forms.
  5. Click Design to exit the preview mode.

To access this mode, click the Preview button in the toolbar.

In this mode, the interface has two sections:

  1. Toolbar
  2. Wireframe

Toolbar

The toolbar has three groups of buttons.

Preview Mode > Toolbar (Screens)

The first group is for switching between the different modes:

Icon Label Description
Design Switch to Design mode.
Code Switch to Code mode.
Preview Switch to Preview mode.

The second group is for changing the preview type:

Icon Label Description
Screens Preview the design in a variety of widths.
Devices Preview the design within the frame of a mobile device.
Receipt Preview the design with its receipt styling.

The third group is for controlling finer details of the preview, such as its width or rotation. The available options depend on the selected preview type.

Note

To display sample data within Preview Mode, refer to Configure Preview Data.

Wireframe

The Wireframe contains the preview of the design. There are three preview types available:

  1. Screens
  2. Devices
  3. Receipt

Screens

Preview Mode > Screens

If the Screens option is enabled, the following buttons are available:

Icon Label Description
Small Resize the preview to a small width.
Medium Resize the preview to a medium width.
Large Resize the preview to a large width.
Fullscreen Resize the preview to a full-screen width.

Devices

Preview Mode > Devices

If the Devices option is enabled, the following buttons are available:

Icon Label Description
Device Select a device to preview the form within.
Rotate Toggle the preview between portrait and landscape rotation.

Receipt

Preview Mode > Receipt

If the Receipt option is enabled, no additional buttons are available. You can, however, click the downward-facing arrow to choose whether to open a HTML or PDF receipt.

Label Description
PDF Receipt View the receipt as a HTML web page.
HTML Receipt View the receipt as a PDF file.

Next, learn about Maestro's organizations.