More topics

Designing a different PDF layout

Last updated on November 26, 2024

You can control the layout of the autogenerated PDF of the form.

On this page:

Overview

Orbeon will generate a PDF copy of a form based on the form's design, but that doen't need to be as it's shown to the citizen.

Web form experiences are often designed differently than tradtional paper (or PDF) ones. For example, your web form design may:

  • Arrange content vertically instead of horizontally
  • Split content into a greater number of segments
  • Reveal or hide content as a citizen completes the form
  • Have less or more information and instructions

All of these will affect what your form looks like when generated as a PDF. The layout and content of the PDF could vary from one submission to another. How acceptable this is depends on the needs of the program area and its clients.

You can optionally design your form's PDF layout in the Form Builder, if you don't want to go as far as using a fillable PDF template.

For additional information, see:

Using visibility

The primary technique you will use to facilitate your custom design is adjusting the Visibility of controls.

  • Controls visible only on screen use fr:mode() != 'pdf'
  • Controls visible only on the PDF use fr:mode() = 'pdf'

For additional information, see:

Design approaches

In terms of how you design the print aspect of your form, you basically have three approaches to choose from:

Which will work best for you depends on things like how long or complex the form is.

Full-width approach

The simplest approach is to simply design your form to use the full width of the screen, laying the form out on screen the way it would appear on paper.

This approach:

This keeps the fields visible to the user and the PDF at all times, but disables fields the citizen does not need to complete.

Interwoven approach

An intermediate approach is to design a web form and include duplicates of some fields placed on the form in the desired location.

This approach:

  • Can work for forms of medium complexity
  • Can better accommodate visibility and interaction settings
  • Requires fewer duplicate fields to accomplish the results
  • May be more difficult to design and manage the duplicate fields

You accomplish this by:

  • Creating a copy of a field to place where you want
  • Using the Calculated Value to reference the original control's value
  • Setting the Visibility to fr:mode() = 'pdf'
  • Setting the original control's visibility to fr:mode() != 'pdf'

This basically creates 3 views of the form:

  • The citizen sees a first, middle and last name arranged vertically
  • You see the same fields, plus a duplicate middle and last name arranged horizontally after the first name
  • The PDF generates a first, middle and last name arranged horizontally

You effectively get the same output results of the full-width approach, with less effort than the second form approach.

Second form approach

An advanced approach is to create a second layout of the form specifically for layout purposes. In other words, you create a copy of the form within the Form Builder that lays out a copy of your fields the way you want. Your form will have a screen layout and a print one.

This approach:

  • Separates the web form experience from the print layout
  • Gives you more flexibility in desiging your print layout
  • Can be easier to create and alter

You accomplish this by:

  • Copying a completed screen-based section
  • Pasting the copy either:
    • Under the original (most convenient)
    • At the end of the screen form (tidiest)
  • Adjusting the layout of the copy
  • Linking the control values of the copy to the original controls
  • Changing the visiblity to PDF-only

You would also need to change the visibility of the original controls to screen-only, if not already done.