Overview of the model-driven form designer

The new model-driven form designer provides a modern WYSIWYG authoring experience when you work with model-driven forms. It includes several improvements not available in the classic model-driven form designer.

The designer shows a real-time WYSIWYG preview (Unified Interface only) while you author a form. Changes to the form are instantly reflected in the preview, enabling you to see exactly how the form will appear to users when published. An always available property pane makes the common task of updating properties quick and easy. Updates to properties are also instantly reflected in the form preview. The fields pane with searching and filtering capabilities helps makers quickly find and add fields to the form. The components pane makes it easy to discover and use components and provide a rich end-user experience. The tree view helps visualize the hierarchy of the form’s fields and components and to quickly find and select a particular field or component on the form.

The form designer interface has the following areas:

  • Command bar – Displays available actions such as Save, Publish, Undo, and Redo.
  • Panes – Displays panes with specific functions
    • Fields pane to add fields to a form.
    • Components pane to add components to a form.
    • Tree view to see the hierarchy of components on the form and select them.
  • Form preview – Displays a real-time preview of the form as it will appear to users when published.
  • Property pane – Displays properties of the selected element, and also allows you to make changes.
  • Preview size switcher - Changes the size of the form preview helping you to see how the form will appear on various screen sizes.
  • Zoom slider - Zooms in or out of the form preview helping you take a closer look.
  • Fit to width - Quick action to fit the form preview to the available width.

See also

Create, edit, or configure forms using the form designer
Add, configure, move, or delete fields on a form
Add, configure, move, or delete components on a form
Add, configure, move, or delete sections on a form
Add, configure, move, or delete tabs on a form
Configure header properties in the form designer
Add and configure a sub-grid component on a form
Add and configure a quick view component on a form
Configure a lookup component on a form
Using the tree view in the form designer
Create and edit fields