There are two ways to preview and test your application before deploying it. Use the Preview action to see your 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 your changes as you make them, directly in the Page Designer, use Live view.

• To quickly check how a page behaves, you can use Live view in the Designer. Live view is an in-tool preview that you can use to view and debug the page you're currently viewing in the Page Designer. To view a page in Live view, open a page in the Page Designer and select Live in the toolbar:
  
  Description of the illustration app-extension-live-view.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 how pages are rendered, or 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.

• Preview displays your application in a separate browser tab, so you can see how your pages look and function before publishing. Use this method to quickly test UI and layout changes, navigation between 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 preview-ready.png
  
  

  When you use Preview, you'll see the pages as they look based on your user role. This means that if the App UI has any rule sets that evaluate the user's role, this will affect the data you see in the pages.

  You can't share an App UI 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.

  Tip:

  If your extension also contains another App UI, you can preview its latest changes too, simply by replacing the App UI's name in the URL: https://<host name>/<FusionAppID>/redwood/<App UI name>/<flow name>