Orbeon Forms
  • Getting started
  • Installation
    • Logging
    • Configuration banner
    • Docker
    • Azure
    • Tomcat
    • WildFly
    • WebSphere
    • WebLogic
    • GlassFish
    • Caches
    • Replication
    • Upgrading
  • Configuration
    • Properties
      • General
        • HTTP client
      • Form Runner
        • Detail page
          • Attachments
          • Email properties
          • PDF
          • Table of contents
        • Persistence
        • Summary page
      • Form Builder
      • XForms
    • Advanced
      • Workflows
      • Session management
      • State handling
      • Client-side error handling
      • Clustering and High Availability
      • Configuring a Form Runner eXist database
      • Creating a production WAR
      • Environments
      • JavaScript and CSS assets
      • Limiter filter
      • Run modes
      • Security
        • Content-Security-Policy header
      • SAP Hybris Module
      • XForms logging
    • Troubleshooting
      • Troubleshooting with the orbeon.log
      • Memory and threads
      • Relational database logging
      • Misc
  • Form Builder
    • Form settings
      • Time window
    • Form editor
      • Form area
      • Toolbox
      • Buttons bar
      • Control settings
      • Dependent fields and sections
      • Validation
      • Choices editor
      • Publishing
      • Cut, copy and paste
      • Section and grid settings
      • Section settings
      • Grid settings
      • Quick control search
      • Repeat settings
      • Repeated grids
      • Undo and redo
      • Keyboard shortcuts
    • Formulas
      • Examples of formulas
      • Formulas inspector
      • Formulas console
    • Summary page
    • Form localization
    • Advanced
      • Edit source
      • Services and actions
        • HTTP services
        • Database services
        • Simple Actions
        • Action Syntax
        • Action Syntax examples
        • Synchronizing repeated content
      • Testing a form in web mode
      • Testing PDF production
      • Testing offline functionality
      • Email Settings dialog
      • Field-level encryption
      • Messages
      • Section templates
      • Template syntax
      • XML Schemas support
      • Extensibility
        • Extension API
        • Integration
        • Toolbox component metadata
  • Form Runner
    • Overview
      • Terminology
    • Pages
      • Landing page
      • Published Forms page
      • Forms Admin page
      • Summary page
    • Components
      • Alert dialog
      • Attachment
      • Autocomplete
      • Captcha
      • Character counter
      • Checkbox input
      • Currency
      • Date
      • Dropdown date
      • Static and dynamic dropdown
      • Error summary
      • Grid
      • Handwritten signature
      • Hidden field
      • Image
      • Image annotation
      • Image attachment
      • Number
      • Open selection
      • Repeater
      • Formatted Text / Rich Text Editor
      • Section
      • Single-selection tree
      • Source code editor
      • Time
      • US phone
      • US state
      • Video
      • Video attachment
      • Wizard
      • XForms inspector
      • Yes/No answer
    • Features
      • Automatic calculations dependencies
      • Datasets
      • Excel and XML import
      • Excel and XML export
      • Summary page Excel Export
      • Form definitions and form data Zip Export
      • Purging historical data
      • Lease
      • Localization
      • Supported languages
      • Mobile support
      • Multitenancy
      • Form Runner navigation bar
      • PDF production
        • Automatic PDF
        • Automatic PDF header and footer configuration
        • PDF templates
      • Responsive design
      • Revision history
      • S3 storage
      • Simple data migration
      • TIFF production
      • Versioning
      • Wizard view
      • Workflow stage
    • Persistence
      • Using a relational database
      • Relational database schema
      • Purging old data using SQL
      • Auditing
      • Autosave
      • Database support
      • Flat view
    • Linking and embedding
      • Linking
      • Java Embedding API
      • JavaScript Embedding API
      • Liferay full portlet
      • Liferay proxy portlet
      • Securing Form Runner access
      • Form Runner offline embedding API
      • Angular component
      • React component
    • Access control and permissions
      • Users
      • Login & Logout
      • Deployed forms
      • Form fields
      • Editing forms
      • Owner and group member
      • Organizations
      • Scenarios
      • Token-based permissions
    • Styling
      • CSS
      • Grids CSS
      • Automatic PDF styling and CSS
    • APIs
      • Authentication of server-side service APIs
      • Persistence API
        • CRUD API
        • Search API
        • List form data attachments API
        • Form Metadata API
        • Lease API
        • Reindexing API
        • Caching
        • Versioning
        • Revision History API
        • Zip Export API
        • Custom persistence providers
      • Other APIs
        • Connection context API
        • Duplicate form data API
        • File scan API
        • Form Runner JavaScript API
        • Generate XML Schema API
        • PDF API
        • Publish form definition API
        • Run form in the background API
      • Data formats
        • Form data
        • Date and time
        • Form definition
    • Architecture and integration
      • Architecture
      • Access form data
      • Integration
    • Advanced
      • Buttons and processes
        • Simple process syntax
        • Core actions
        • Form Runner actions
          • Save action
          • Send action
          • Email action
        • XForms actions
        • Predefined buttons, processes and dialogs
        • Summary page buttons and processes
      • Custom dialogs/model logic
      • Services
      • Singleton form
      • Monitoring HTTP requests
  • XForms
    • Core
      • Attribute Value Templates (AVTs)
      • Binds
      • Validation
      • Variables
      • Keyboard focus
      • XForms JavaScript API
      • Error handling
        • Detailed behavior
      • Model-Bind variables
      • XForms 2.0 support
    • Events
      • Standard support
      • UI refresh events
      • Keyboard events
      • Extension events
      • Extension context information
      • Other event extensions
    • Actions
      • Repeat, insert and delete
      • Scripting actions
      • Extensions
    • Controls
      • Label, hint, help
      • Input
      • Output
      • Text area
      • Button
      • Upload
      • Dialog
    • Submission
      • Standard support
      • JSON support
      • Asynchronous submissions
      • Caching extension
      • Other submission extensions
    • XPath
      • Type annotations
      • Expression analysis
      • Tips
      • Compatibility
      • Standard functions
      • Maps and arrays Functions
      • Extension functions
        • Core functions
        • Utility functions
        • Model functions
        • Controls functions
        • XML functions
        • JSON functions
        • HTTP functions
        • Form Runner functions
        • Other functions
        • Deprecated functions
    • XBL components
      • FAQ
      • Guide
        • XBL Tutorial
        • Bindings
        • XForms models
        • Including content
        • Event handling
        • Conventions
        • Map XBL example
        • Learning from existing components
      • Advanced topics
        • XBL Modes
        • JavaScript companion classes
        • XBL library
        • Extensions
        • Attachment controls
    • XForms tutorial
      • Introduction
      • Installation
      • The Hello application
      • The Bookcast application
        • The basic app
        • Database access
        • Polishing the app
        • Adding a feed
    • Using XForms from Java apps
  • XML Platform
    • Page Flow Controller
      • Basics
      • XML submission
      • Navigating between pages
      • Paths and matchers
      • Other configuration elements
      • Typical combinations of page model and page view
      • Examples
      • Authorizing pages and services
    • Processors
      • URL generator
      • Request generator
      • PDF to image converter
    • Resources
      • Resource managers
      • Setting up an external resources directory
    • Other
      • Binary and text documents
  • FAQ
    • Licensing
    • PE and Dev Support
    • Form Builder and Form Runner
    • Resources and support
    • Other technical questions
  • Contributors
    • Automated tests
    • Building Orbeon Forms
    • Localizing Orbeon Forms
    • Validation functions
    • Contributor License Agreement
  • Release notes
    • Orbeon Forms 2022.1.9
    • Orbeon Forms 2024.1.1
    • Orbeon Forms 2023.1.7
    • Orbeon Forms 2024.1
    • Orbeon Forms 2023.1.6
    • Orbeon Forms 2023.1.5
    • Orbeon Forms 2021.1.11
    • Orbeon Forms 2022.1.8
    • Orbeon Forms 2023.1.4
    • Orbeon Forms 2023.1.3
    • Orbeon Forms 2023.1.2
    • Orbeon Forms 2022.1.7
    • Orbeon Forms 2023.1.1
    • Orbeon Forms 2023.1
    • Orbeon Forms 2022.1.6
    • Orbeon Forms 2021.1.10
    • Orbeon Forms 2022.1.5
    • Orbeon Forms 2021.1.9
    • Orbeon Forms 2022.1.4
    • Orbeon Forms 2022.1.3
    • Orbeon Forms 2021.1.8
    • Orbeon Forms 2022.1.2
    • Orbeon Forms 2022.1.1
    • Orbeon Forms 2022.1
    • Orbeon Forms 2021.1.7
    • Orbeon Forms 2021.1.6
    • Orbeon Forms 2021.1.5
    • Orbeon Forms 2021.1.4
    • Orbeon Forms 2021.1.3
    • Orbeon Forms 2021.1.2
    • Orbeon Forms 2021.1.1
    • Orbeon Forms 2021.1
    • Orbeon Forms 2020.1.6
    • Orbeon Forms 2019.2.4
    • Orbeon Forms 2019.1.2
    • Orbeon Forms 2018.2.5
    • Orbeon Forms 2018.1.4
    • Orbeon Forms 2020.1.5
    • Orbeon Forms 2020.1.4
    • Orbeon Forms 2020.1.3
    • Orbeon Forms 2020.1.2
    • Orbeon Forms 2019.2.3
    • Orbeon Forms 2020.1.1
    • Orbeon Forms 2020.1
    • Orbeon Forms 2019.2.2
    • Orbeon Forms 2019.2.1
    • Orbeon Forms 2019.1.1
    • Orbeon Forms 2019.2
    • Orbeon Forms 2019.1
    • Orbeon Forms 2018.2.4
  • Release history
  • Use cases
  • Product roadmap
  • Index of features
Powered by GitBook
On this page
  • Introduction
  • Sections
  • Introduction
  • Operations on sections
  • Grids
  • The 12-column layout
  • Until Orbeon Forms 2017.1
  • Grid cells and controls
  • In-place editing
  • See also
  1. Form Builder
  2. Form editor

Form area

PreviousForm editorNextToolbox

Last updated 2 years ago

Introduction

The Form Builder form area is meant to look as much as possible like the published form.

Form Builder is built around as simple layout concept: sections and grids. This is a good alternative to:

  • absolute positioning, which is rarely appropriate for web forms

  • complex dynamic layouts, which often confuse form authors

Starting with Orbeon Forms 2017.2, Form Builder grids are more flexible then with earlier versions and follow a 12-column layout.

Sections

Introduction

Form Builder represents every form as a series of sections. A section is a logical grouping of form controls which has a title and an optional help. For example, your form may have an "Address" section, and a "Personal Details" section.

In addition:

  • Every form has at least one section.

  • There is no maximum number of sections within a form.

  • Sections can have subsections, which are sections nested within other sections.

Operations on sections

You can perform the following operations on sections.

  • Set the section's localizable title by clicking on it. To select a different language, use the language selector at the top right of the form area.

  • Delete the section by clicking on the trashcan icon. If the section contains controls, a confirmation dialog appears.

  • Set an optional help message for the section by clicking on the help icon. The help is localizable.

  • Open or collapse the section by clicking on the arrow to the left of the section title.

  • Move the section up or down by clicking on the up/down arrows. These appear as needed if there is more than one section.

  • Move the section left or right by clicking on the left/right arrows. These appear as needed if there is more than one section and if it is possible to move a section into another section ("right"), or out of its container section ("left"). This allows making sections subsections of other sections.

Grids

Each section contains one or more grids. A grid is a logical grouping of form controls organized in rows and columns of cells. Unlike sections, a grid doesn't have a title or help.

In addition:

  • A grid may have any number of rows (but at least one).

  • Each grid cell may contain a single form control, or remain empty.

  • A grid cell might span multiple rows.

  • Unlike a section, a grid does not have a title or properties, except for repeated grids which do have properties.

When your mouse pointer hovers over a grid, the grid boundaries, cells and icons are highlighted.

The 12-column layout

Introduction

[SINCE Orbeon Forms 2017.2]

Operations

You can perform the following operations on grids:

  • Add grid rows by clicking on the up and down arrows on the left of each row.

  • Delete a row by clicking on the "minus" icon on the left of a row.

  • Expand/shrink grid cells horizontally or vertically.

  • Using icons to the left of the grid

    • Open the Grid Settings dialog (cogwheel icon)

      • NOTE: Until Orbeon Forms 2018.2, this was only available for repeated grids.

    • Delete the entire grid (minus icon)

    • Moving a grid relative to its sibling grids (arrow icons)

      • NOTE: Until Orbeon Forms 2018.2, this was only available for repeated grids.

    • Cut or copy the entire grid to the clipboard (scissors or copy icons)

      • NOTE: Until Orbeon Forms 2018.2, this was only available for repeated grids.

Expanding/shrinking cells horizontally makes grid cells span columns. This allows grid cells to have a width of 1, 2, and up to 12 columns.

With Orbeon Forms 2017.2, you use the arrow icons within the grid to expand into empty adjacent cells.

Expanding/shrinking cells vertically makes grid cells span rows. This allows making some cells taller when next to other cells, for example to allow for taller radio buttons lists.

Undoing operations

Until Orbeon Forms 2017.1

A grid has between 1 and 4 columns, but it is possible to make Form Builder support more than 4 via a configuration property.

You can perform the following operations on grids:

  • Add grid columns by clicking on the left and right arrows at the top of each column.

  • Add grid rows by clicking on the up and down arrows on the left of each row.

  • Delete a column by clicking on the trashcan icon at the top of a column.

  • Delete a row by clicking on the trashcan icon on the left of a row.

  • Delete the entire grid by clicking on the trashcan icon on the top left corner of the grid.

  • Expand/shrink grid cells vertically only.

For delete operations, a warning dialog shows if controls will be deleted as a result.

Grid cells and controls

Each grid cell can contain a single form control, or no control at all. Some controls, by default, take the entire width of the cell. This includes text fields and text areas. In such cases, to size the control, you can make the cell wider or narrower.

If a control is present, the following actions related to the control are possible:

  • Set control label:

    • Click on the label.

    • A control's label appears on top of the control. It is intended to provide a descriptive label for the form control.

    • Examples: "First Name", "Street", "Phone Number".

  • Set control hint:

    • Click on the hint.

    • A control's hint usually appears under the control. It is intended to provide a short indication to the form user of how to fill-out the form control.

    • Examples: "Your first name", "Date in mm/dd/yyyy format".

  • Set control default value:

    • Simply enter text or select a value.

  • Edit the control's items:

When your mouse pointer hovers over a grid cell containing a control, some icons allowing for further actions appear:

  • Move or Copy Control icon:

    • [SINCE Orbeon Forms 2017.2]

    • This handle lets you drag and drop the control to another grid cell. Press the shift key before you start the drag & drop motion to create a copy of the current control in the target cell, instead of moving it there.

  • Delete Control icon:

    • This deletes the control, removing all the information associated with the control including validation properties.

  • Control Settings icon:

  • Expand/shrink icons:

    • These expand and shrink the cell horizontally or vertically if possible.

In-place editing

Form Builder allows you to edit certain text information in-place. This just means that text appears as it would in the published form, and is editable when you click on it.

To edit such text:

  • Click on the text (or placeholder text).

  • A text field appears.

  • Enter the text.

  • Use the "Enter" key or click outside the text field to commit the change.

To indicate that the text is editable, it highlights when the mouse hovers over it.

This mechanism is how you edit:

  • section titles

  • control labels

  • control hints

  • explanation texts

See also

Sections are by default presented in order, on top of each other in the page. But when using the , each top-level section, and optionally the next level of subsections, becomes a wizard page at runtime.

Set other .

A grid may be a regular grid or a , which repeats a group of one or more rows. A repeated grid may have from no iteration (or repetition) to any number of repetitions. A repeated grid also has settings, but regular grids do not have settings as of Orbeon Forms 2018.2.

A grid always has 12 columns when shown on a wide display. Note that on narrower displays, grids still collapse to a vertical layout (see ).

See also .

With Orbeon Forms 2018.1 and newer, you drag the cell boundary to expand into empty adjacent cells. See also the .

Destructive operations do not ask for confirmation but add the operation to the Undo stack, allowing you to undo the operation from the toolbox. See .

You can also set a calculated initial value from the .

Click on the "Edit Items" icon or test to open the (for selection controls only).

This opens the .

Blog post:

Blog post:

wizard view
section settings
repeated grid
Responsive design
the blog post
blog post
Undo and redo
"Control Settings" dialog
Choices editor
"Control Settings" dialog
The 12-column layout
Resizing cells with drag & drop in Form Builder
Form editor
Toolbox
Buttons bar
Section settings
Repeated grids
Responsive design
Form Builder and the main form area
Grid icons
Grid cell widths at runtime
Expanding cell boundaries
Dragging cell boundaries horizontally
Dragging cell boundaries vertically
Column confirmation dialog