The Preview Window

The preview window of the builder gives you a realtime exact preview of how your interface will be rendered except for one detail of dotted outlines when you hover over a block.
As you modify interface data in the builder it will be reflected in realtime in the preview.

Preview Context

To provide the most accurate representation of the rendered interface, you should ensure that you are running the preview in the expected emulation context.

For example, if you have an application set for emulation, then all requests inside the preview will be made to the API using that application's access token, so content will be loaded according to the permissions of that application. This might result in some unexpected behaviour if you add an image onto your interface that the emulation application doesn't have the required permissions to view that image..

If no application is selected to emulate, then the preview will run within the context of you, the logged in user using the builder. If you are previewing in the context, keep in mind that when you publish the interface the application may not have the same access as you do.

Preview Options

At the top of the builder UI, there are a few different options for changing the preview

  • Mobile View
    Resizes the preview to 640px X 480px to emulate a typical mobile device

  • Tablet View
    Resizes the preview to 768px X 1024px to emulate a typical tablet device

  • Desktop View
    Resizes the preview to fill the max space available on your screen

  • Window View
    Breaks the preview out into it's own browser window, so that you can size and arrange the preview to your liking, this view is helpful when using multiple monitors

  • Disable Preview
    You can disable/enable the preview window

  • Preview Emulation Settings
    Here you can manually set emulation settings including:

    • Emulation Application
      The application to emulate in the preview, so you can see exactly what the interface will look like when run in that application

    • Emulation Date
      Select a date or point in time to emulate, so that you can see what the interface will look like if viewed at that particular time

Caveats / Known Issues

  • As the preview will run your custom javascript code, It is possible for you to write bad code, overflow exceptions etc, Which may cause the preview to break or even crash your browser. Often you can fix this by disabling the preview window and fixing the bug in your code, Or click the preview 'refresh' button at the top of the screen to restart the preview and run your code again.

  • As the preview updates in realtime, it's possible that it might break if significantly modifying functionality on your interface, usually clicking the 'refresh preview' button at the top of the UI will force and update and fix these issues