Preview your XDP form in HTML

Besides previewing the PDF rendition of forms, now you can also preview the format in HTML rendition while designing the form in Adobe LiveCycle Designer. New Preview HTML tab can be used to preview form as it would appear in a browser.

HTML preview of the forms in LiveCycle Designer

To preview your forms in HTML, provide configuration details of your LiveCycle server:

  1. Go to Tools > Options.

  2. In the Options window, select Server Options page and provide following details:

    • Server URL: URL of the LiveCycle Server. 
    • HTTP port number: Port number at which the LiveCycle server is running. The default value is 8080.
    • HTML Preview Context: Path of the profile to use for rendering XFA forms. The default value is lc/content/xfaforms/profiles/default.html.  The default profile is used to preview the form in designer and to use any other custom profile, provide appropriate path of the custom profile.
    • Forms Manager Context: Context path at which Forms Manager UI is deployed. The default value is lc/fm.
    For detailed information about redering and configuring profiles, see Plug-in custom widgets with Mobile Forms

    Note: Ensure that LiveCycle is available at the server URL configured above. The HTML preview connects to the CRX server to generate a preview.

    Click OK.

    LiveCycle Designer: Options Window

  3. To see HTML preview of the form, click the Preview HTML tab.

    Note:

    If HTML Preview tab is closed, Press F4 to open the Preview HTML tab. You can also select Preview HTML from View menu to open the Preview HTML tab.

    Note:

    The HTML preview does not support PDF documents, the HTML preview is only for XDP documents.  

To preview a form using sample data

LiveCycle Designer lets you preview and test your form by using sample XML data. It is recommended that you frequently test your form with sample data to ensure that the form renders correctly.

If you do not have sample data, Designer can create it, or you can create it yourself. (See To automatically generate sample data to preview your form and To create sample data to preview your form.)

Testing your form by using a sample data source ensures that the data and fields are mapped and that repeating subforms repeat as you expected. You can create a balanced form layout that provides the appropriate space for each object to display the merged data.

Note:

You require Adobe LiveCycle Designer ES4 SP1 to preview a form using sample data.  

  1. Select File > Form Properties.

  2. Click the Preview tab and, in the Data File box, type the full path to your test data file. You can also use the browse button to navigate to the file.

  3. Click OK. The next time you preview the form in the Preview HTML tab, the data values from the sample XML file will appear in the respective objects.

HTML preview of the forms in Forms Manager

You can use Forms Manager to preview the forms that are already present in the repository.

You can launch Forms Manager from within LiveCycle Designer. To configure Forms Manager to launch from the LiveCycle Designer, provide configuration details of your LiveCycle server.

To preview the form in the Forms Manager:  

  1. Go to Tools Forms Manager. It launches Forms Manager in the default web browser.
  2. In the Forms Manager window, select the form to preview, click <eye icon>, and click Preview as HTML to see HTML preview of form. 


Get help faster and easier

New user?