Preview a Visual Application

There are two ways to preview and test your visual application before deploying it. You can use the Preview action to see your web application in a separate browser tab, as it would appear in a deployed environment. This method is ideal for checking overall layout and functionality, especially once your application is further built out. On the other hand, to quickly check a page’s changes as you make them in the Page Designer, use Live view.

Use Live view to quickly check how a page behaves. Live view is an in-tool preview that you can use to test and debug the page you’re currently viewing in the Page Designer. To test a page in Live view, open it in the Page Designer and select Live in the toolbar:

Description of the illustration liveview.png

Clicking Live switches the page to an interactive mode in the canvas area, where you can click components and see changes instantly as you edit. For example, after creating a business rule, switch to Live view and enter values to confirm that the rule is triggered. In this way, Live view enables fast, iterative design because you can immediately check the impact of changes without waiting for a separate preview.

Live view also gives you the option to tweak application code and render pages even when they’re missing the required context. For example, when a page is missing input parameter values provided by a flow-level variable, you can populate the missing context by calling REST in an action chain to look up the best available object record for the page to work. To do this, update an action chain that depends on the missing flow-level variable to add a check for $env.dt and provide a mock value that allows the page to render, for example:
```
define([
  'vb/action/actionChain',
  'vb/action/actions',
  'vb/action/actionUtils',
], (
  ActionChain,
  Actions,
  ActionUtils
) => {
  'use strict';

   class vbEnterListener extends ActionChain {

     /**
     * @param {Object} context
     */
    async run(context) {
      const { $page, $flow, $application, $constants, $variables } = context;
      if (context.$env.dt === true) {
        $variables.heading = 'Hello from this side';
        return;
      }
      $variables.heading = 'Hello from that side';
    }
  }

  return vbEnterListener;
});
```

Any time a page is running in Live view, the $env context is passed into action chains, with dt set to true. You can define your own action chains (even use existing vbEnter ones) to run only in Live view simply to render pages without the required context.

Note that some behavior in Live view, such as using links to navigate from the current page, might not work as expected. When you’re ready to more fully test your application, use Preview.

Use Preview to test your app as it will display to users and test its behavior before sharing it with others. Preview displays your web app in a new browser tab and shows how your app will behave when published. You’ll get the chance to test UI and layout changes, navigation between pages in the app as well as links to external pages, and what happens when you add and edit data, all without affecting your actual users. To preview your application, click Preview in the header:

Description of the illustration vbs-preview-visual-app.png

Note that you can’t share your app’s preview URL with your team members. If you want team members to see your changes, you’ll need to commit the changes to a branch, then use the Share action to get a URL you can share.

Note: The option you choose is a matter of preference—though the form factor is a bit more pleasing when using Preview. Live view lets you immediately test interactions on a page, right from the Designer itself, without waiting for a preview. However, Live view isn’t a substitute for Preview, and some behavior in Live view might not work as expected. For this reason, you’ll likely end up using both methods to preview and test your application, depending on your testing needs at any particular moment.