Introducing the new WYSIWYG model-driven form designer (Public preview)

Take your model-driven form authoring experience to the next level with the new model-driven form designer. It provides a modern, clean and productive interface for makers when authoring model-driven forms. A live WYSIWYG form preview (Unified interface only) enables makers to see exactly how the form will appear to end-users. An enhanced fields pane with searching and filtering capabilities helps makers quickly find and add fields to their form. An always available property pane makes viewing and updating properties quick and easy. A tree view helps makers easily visualize the hierarchy of a form’s fields and controls.

Our classic model-driven form designer has been very popular with makers and has served well, however it has gaps in functionality that impact maker productivity. There is no easy way to preview what the form will look like to end-users (Unified Interface). This makes validating layout and property changes challenging. The fields list provides no ability to filter and search making a routine task harder and more time consuming than it should be. Other common tasks such as setting the properties of the form or a control requires multiple clicks and involves modal dialogs leading to a sub-par experience. Integral actions such as save and publish require multiple clicks leading to diminished productivity and frustration.

The new model-driven form designer addresses all these problems faced by makers and more. The new form designer not only provides a live WYSIWYG form preview, it also includes the ability to switch between various form factors (screen sizes) to preview the responsive behavior of the form. The fields list supports incremental search as well as the ability to filter and see only custom fields, making the task of finding and adding fields to the form fast and easy. The property pane helps productivity and promotes discoverability since makers can easily see and change the properties of any selected element and have it instantly reflected in the form preview.  In the new form designer save and publish is also a single combined action helping reduce the clicks for one of the most common actions.

To start using the new model-driven form designer

1. Sign in to PowerApps.
2. On the left navigation pane, expand Data and then select Entities.
3. Select an entity, such as the contact, and then select the Forms tab.
4. To edit an existing form, select a Main form that you want to edit and then in the command bar, select Edit form (preview).
   Or
   To create a new form, in the command-bar, select Add form and then select Main form (preview).

Forms created or edited using steps above will be in the Common Data Services Default Solution. To create or edit forms in specific solutions please see: Use solutions in PowerApps.

Note: The new model-driven form designer currently only supports creating and editing Main forms. Support for other form types will be added in a future release.

The form designer shows a live WYSIWYG form preview (Unified Interface only) of the form. Makers can select fields, sections and tabs directly on the preview.

The property pane automatically updates to show the properties of the selected element.  Changes to properties are instantly reflected in the form preview and can also be reverted using the Undo button in the command bar.

The fields pane enables makers to quickly search and add fields to the form. Makers can click on a field to add it to the selected section on the form. They can also filter the list to see all fields or custom fields only. Similarly, by default the fields list only shows fields that are not already on the form, but makers can disable that filtering to see all fields if needed.

The layouts pane enables makers to add layout related controls: tabs and sections to their form. Makers can click on a tab to add it to the form or on a section to add it to the selected tab.

The tree view shows the visual hierarchy of the fields and controls on the form. Makers can also select elements using the tree view. When an element is selected in the tree view the form preview automatically updates to bring the selected element in focus. The tree view is also helpful in selecting elements that are hidden and therefore not visible in the form preview. The icons in the tree view help makers quickly identify the types of fields and controls.

The form factor switcher enables makers to preview the responsive behavior of the form and see how their form will appear on various screen sizes. Makers can also zoom in and out of the preview using the zoom slider or click on the auto-fit button to achieve the best fit based on the available width and height.

For detailed step-by-step instructions, please refer to the series of articles in our documentation on the new model-driven form designer. Note that this feature is available in Unified Interface only and is limited to online environments.

Starting today the new model-driven form designer is available as public preview in most regions, except US and Europe. Due to extended holiday deployment schedules the feature will be available in US and Europe early January 2019. If you want to try it right away, you can create an environment in regions where it is available such as Australia, Canada, India or Japan.

Many of our customers and partners participated in early previews of this designer and gave us invaluable feedback. We cannot thank you enough.

This is just the start. We will continue to deliver regular feature additions and updates to complete the remaining functionality and to address the feedback we hear from you. Please use our ideas board to suggest and vote on features and improvements you would like to see.