Test UI Model

After designing all the pages in your UI model and saving it, you can preview your app UI to verify the UI layout, styles and the flow of activities.

You can preview your app UI and modify the design if required. When you are completed with all your changes, you can Pack the UI model to add to app package and make it ready for deployment.

Perform the following steps:

  1. Navigate to UI Models.
  2. Open the UI model that you want to preview.
  3. Click Preview to test how the UI model functions.

    4. The UI model opens in a new tab.

  4. Revisit the UI model to update as per your test results.
  5. Save and Preview to confirm that all your modifications are updated and the UI model functions as expected.

    6. You have successfully tested your UI model.

If your UI model includes one or more script models, You can also debug the script models using the browser debug tool.

Test UI Model on Mobile Devices

You can preview your app UI on mobile devices also. You can copy the URL form your desktop browser to the mobile device browsers to preview the UI model. The following mobile platforms and browsers are currently supported:

Mobile Platform Mobile Browser
Android 9 or higher Google Chrome 84 or higher
iOS 13 or higher Apple Safari 13 or higher
The Mobile device must use the same network as the computer that is running ASG-Studio and must have a working internet connection (WiFi or cellular) or tethered to the computer that is running ASG-Studio.

Perform the following steps:

  1. Launch ASG-Studio in the desktop browser on the computer that is running ASG-Studio.
  2. Navigate to UI Models folder and open the UI Model that you want to preview.
  3. Click Preview. The UI model preview opens in a new tab.
  4. Copy the URL from the desktop browser.
  5. Modify the URL to replace the localhost with the IP address of the computer that is running ASG-Studio.

    6. For example, if the URL is http://localhost:3030/client/preview/context/ProjectName/VMName/index.html and the IP address of the computer that is running ASG-Studio is 10.10.10.10, then you must modify the URL to http://10.10.10.10:3030/client/preview/context/ProjectName/VMName/index.html.

  6. Enter the modified URL in the browser of the mobile device.
  7. Test the app view for the following:
    1. Design
    2. Compatibility with mobile platform
    3. Navigation from one app view to another
    4. Actions performed by the controls on the app view
  8. Based on your test results, make appropriate modifications to your project in ASG-Studio.
  9. Save and Preview to confirm that all your modifications are updated and the UI model functions as expected.

    10. You have successfully tested your UI model.