Explore… Preview & Live Preview

Whilst creating an application in the Infinity App Studio it can be useful to see what see what the app will look like from an end user’s point of view. To prevent the need to pass the app through the full build process, CommonTime Infinity provides two methods to test an app – Preview and Live Preview.

In each case, the preview method allows you to test the features, flow and functionality of your app, including data capture, styling and integration methods.  There are however a number of differences between the preview methods, which can be utilised within different testing scenarios.

Topics covered in this article

1. Preview
2. Live Preview

1. Preview

The ‘play’ symbol present in a number of locations around the Studio can be used to enter preview mode. This pauses all development on the app and displays a preview of the app in the main Studio window. Selecting the preview button at the top of the Page Editor will open Preview Mode directly at the current page. Pressing any of the other preview buttons (e.g. on the App List, or App Config screens) will preview the entire application starting at the app’s ‘Start’ page.

The primary method to change pages is via the buttons added to the app. However, it is possible to open the debug console and use the callAction util command navigate to pages which are not yet linked within the application.

Any data entered into the app whilst in Preview Mode will be stored in the Data Model and persist between tests. If you wish to reset the app it will be necessary to clear the Data Model. Once you have finished testing the app you can exit out of Preview mode by selecting the ‘Back’ button in the top left hand corner of the preview screen.

2. Live Preview

CommonTime Infinity also includes a feature called ‘Live Preview’ which allows you to preview an app whilst continuing to develop using the Studio. Any changes made to the app (e.g. CSS, page content, logic, data) will be pushed to Live Preview in real time, so you can see how they will affect the application in a quick and efficient manner.

The App Studio and Live Preview can either be launched side-by-side on the same platform, or on separate environments. This allows you to develop the application on one platform (e.g. a desktop) whilst previewing the updates on another (e.g. a mobile device).

On desktops the Live Preview feature has been included alongside the App Studio and can be popped-out into a separate window using a button within the Studio. To use Live Preview on a devices is is necessary to install a separate ‘Live Preview’ app which can either be connected to a desktop version of the studio or launched alongside the Studio on the device.

Multiple instances of Live Preview can be connected to the Studio at the same time, allowing you to test across multiple devices and platforms at the same time. This is ideal where you are developing cross-platform applications and want to test new functionality/styling across a number of devices without the need to pass the app through the build process.

2a. Launch Live Preview

Before it is possible to test an application using Live Preview, you must enable Live Preview mode within the Studio. This is achieved by opening the instance of the Studio which holds the application you wish to test, and navigating to the App Content screen.

The Live Preview icon can be found in the upper left corner of the App Studio. If Live Preview mode has not yet been enabled, this icon will appear as a device, whereas it will change to a QR code if the Live Preview mode has already been activated during the current development session.

Pressing this icon will enable Live Preview mode and display a screen which will allow you to launch the Live Preview window/app. This may take a moment whilst CommonTime Infinity prepares the application.


Current device

If you wish to view Live Preview on the same machine/device as the Studio, simply use the ‘Launch App‘ button. On desktop this will pop Live Preview out onto a separate windows which can be viewed side-by-side along with the App Studio. On a mobile device. this will launch the separate Live Preview app, allowing you to switch between viewing the Studio and Live Preview.

Note that the ‘Launch App’ button will not appear on a device if you do not have the Live Preview app installed. In this scenario, the tab at the top of the screen can be used to find out more about downloading the app. Once installed, it may be necessary to close and reopen the Live Preview screen in the App Studio before the ‘Launch App’ button will appear.

Once you have launched Live Preview you can use the ‘Close‘ button in the lower right corner of the Live Preview screen to return to the App Studio. Any changes made to the app should now be pushed to Live Preview, so you can see how they affect the app in real time.

Separate device

The Live Preview app can also connect to an instance of the Infinity App Studio which is running on a different machine/device. This allows you to develop the app in one environment (e.g. a Mac) and test it on one or more devices (e.g. iPhone, Android tablet).

Note: In order to use Live Preview on a different device to the one hosting the App Studio, both devices must be using the same wifi connection. It is not possible to view the live preview of the app in an offline mode, or using mobile data.

To achieve this, open the App Studio where the app resides and select the Live Preview icon to reveal a unique QR code for the app. To link the Live Preview app to the Studio, open the Live Preview app on the device and press the ‘Scan QR Code‘ button at the bottom of the screen. Once the QR code has been scanned the devices should connect and display a copy of the app in the Live Preview app.

More than one device can be linked at the same time, allowing the app to be tested across multiple devices. To achieve this simply launch the Live Preview app on each device and scan the same QR code. Any data (e.g. text input) captured on one device will also be shown on any of the other connected devices, allowing you to see how it is displayed in each instance of Live Preview.


2b. Stop Live Preview

Once you have enabled Live Preview mode within the Infinity App Studio it will continue to broadcast updates. If you no longer require Live Preview mode to be active, you can turn it off via the Live Preview screen.

In the Infinity Studio where the app is being developed, navigate to the App Content screen. Press the Live Preview icon in the upper left corner (which should be represented by a QR code if Live Preview is active) and select the ‘Stop‘ button.