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, for real-time testing of your app's pages, as you make changes in the Page Designer, use Live view.

• 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 your app in Live view, open a page 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.

• Preview displays your web app in a new browser tab, so you can see your application as it will display to users and test its behavior before sharing it with others. To preview your application, click Preview in the header:
  
  Description of the illustration vbs-preview-visual-app.png
  

  Use this method to test UI and layout changes, navigation between pages, and what happens when you add and edit data, all without affecting your actual users.

  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.