Setup
Configuration
The configurator is the same for the web part and for the command bar. You open it in two ways:
- Web part: Edit the page, select the web part and choose «Configure form …» in the property pane. (With «Use the configuration of the list» switched on this button is not shown – see Placement & command bar.)
- List: Choose «Dynamisches Formular konfigurieren» in the command bar of the list. The command is only visible with the «Manage Web» permission.
📷 Screenshot to follow: Web part property pane with the button «Configure form …» and the summary (dynamicform/en/webpart-eigenschaften.png)
The configurator has five tabs. Apply saves, Cancel discards your changes. The labels below are those of the English interface.
| Tab | Content |
|---|---|
| Source | List and content type; for the web part also the item picker |
| Layout | Sections and fields |
| Rules | Visibility of fields and sections as well as default values – see Rules & default values |
| Appearance | Display, columns, title, buttons and behavior after saving |
| Advanced | Copy or paste the configuration as JSON |
📷 Screenshot to follow: Configurator dialog with the five tabs (dynamicform/en/konfigurator-uebersicht.png)
Source
On the Source tab you define which list the form is for.
| Setting | Description |
|---|---|
| List | Choose among the custom lists of the site. When opened from the command bar, the list is fixed and cannot be changed. |
| Content type | The content type of the list whose form is displayed. If the list has only one content type, it is selected automatically. |
| Item picker | Only for the web part with its own configuration: «Let visitors pick an existing item» (On/Off), «Search and display by» (search column) and «Picked item» («Open for editing» or «Display only»). See Placement & command bar. |
Warning
If you change the list in the web part, the sections are cleared because the fields of the new list are different. Afterwards choose a content type and rebuild the form on the Layout tab.
The mode (new item, edit, display) is not set in the configurator. For the command bar commands, the chosen command determines the mode. Without the item picker, the web part always shows a form for a new item.
📷 Screenshot to follow: Source tab with list, content type and item picker (dynamicform/en/konfigurator-quelle.png)
Layout
On the Layout tab you design the form: which columns it contains, in which sections they appear and in which order.
Take from list
«Take from list» creates a first draft from the columns of the list:
- One section is created per column group of the list (columns without a group end up in the section «Allgemein»).
- Only columns that are editable and not hidden are considered.
- Multi-line text columns are automatically set to full width.
Warning
«Take from list» replaces the existing layout completely. Therefore use it at the beginning or when you want to start over.
Sections
«Add section» creates a new section named «New section». For each section you have the following options:
| Element | Effect |
|---|---|
| Section (name field) | Name of the section; it is shown as a heading in the form |
| Read-only | All fields of the section cannot be edited in the form |
| Remove section | Removes the section including the assignment of its fields (the columns themselves remain in the list) |
| Drag handle on the section | Move the section by dragging |
| HTML above the section (optional) | Explanatory text, list or table shown above the fields of the section |
Note
Keep section names unique. Visibility rules for sections refer to the name of the section.
Fields
For each field in a section you have:
| Element | Effect |
|---|---|
| Drag handle | Move the field by dragging within the section or to another section |
| Full width | The field takes the full width in a two-column form |
| Move up / Move down | Move the field by one position |
| Remove column | Remove the field from the form |
| Add a column … | Selection at the end of the section: assign columns that are not used in any section yet to a section |
Only fields assigned to a section appear in the form. Columns added to the list later do not appear automatically in the form – they are available in the selection «Add a column …». System columns (for example «Created By» or «Modified»), hidden columns and read-only columns cannot be added to the form.
HTML blocks
You can insert explanatory text in the field «HTML above the section (optional)». The HTML is sanitized (with DOMPurify) only when the form is displayed: parts that are not allowed are removed at that point. The configurator shows the warning «Parts of this HTML will be removed because they are not allowed.» as soon as your HTML contains parts that are not allowed.
Allowed are:
| Kind | Allowed |
|---|---|
| Tags | p, br, b, strong, i, em, u, span, div, ul, ol, li, h2, h3, h4, a, hr, small, table, thead, tbody, tr, th, td |
| Attributes | href, target, rel, title, colspan, rowspan |
Scripts, embedded content, event attributes, style attributes and style tags are not allowed and are removed. The HTML stored in the configuration remains unchanged.
Appearance
The Appearance tab controls the look and behavior of the form.
| Setting | Description |
|---|---|
| Display | «Directly on the page» or «A button that opens a dialog». For the button you set the Button label (default: «Open form») and the Dialog width. |
| Dialog width | Small (480 px), Medium (640 px), Large (960 px, default) or Extra large (1280 px) |
| Columns | One column or Two columns |
| Title | Heading of the form (for the button display, the title of the dialog) |
| Description | Text below the title, above the fields |
| Buttons | Controls which buttons are visible (see below) |
| After saving | Behavior after a successful save (see below) |
Buttons
| Mode | Setting | Effect |
|---|---|---|
| New item and Edit | Hide the command bar (Save, Cancel) | Hides the buttons «Save» and «Cancel» |
| Display | Hide the «Close» button | Hides «Close» |
| Display | Hide the «Edit» button | Hides «Edit» |
Note
The «Edit» button in display mode exists only in the web part with item picker. The dialog of the command bar («Dynamisches Formular 'anzeigen'») does not offer it – there you switch to edit mode with the command «Dynamisches Formular 'bearbeiten'».
After saving
| Choice | Effect |
|---|---|
| Show a message and clear the form | Shows the entered Message (default: «Your data has been saved.») and clears the form |
| Clear the form | Clears the form without a message |
| Close the dialog | Closes the dialog or returns to the item picker |
| Go to a page | Navigates to the Target address, for example /sites/projekte/SitePages/Danke.aspx |
Note
With the display «A button that opens a dialog» in the web part, «Close the dialog» after saving is currently not reliable: the dialog stays open after saving. Choose «Show a message and clear the form» or «Go to a page» there. See also FAQ & limitations.
📷 Screenshot to follow: Appearance tab with display choice, dialog width, columns, title and «After saving» (dynamicform/en/konfigurator-darstellung.png)
Advanced
The Advanced tab is intended for administrators. It shows the configuration as text in JSON format («Configuration (JSON)»). Here you can
- copy a configuration to pass it on or reuse it on another page,
- paste a configuration from another page.
Changes take effect immediately on the other tabs. Invalid text is rejected with an error message. A configuration with a newer schema version than the installed solution supports is rejected as well.
📷 Screenshot to follow: Advanced tab with the JSON text field (dynamicform/en/konfigurator-erweitert.png)
Validation messages before saving
The configurator continuously checks your settings and shows messages below the tabs. Errors (red) prevent you from choosing «Apply»; warnings (yellow) point out problems but still allow saving.
| Message (in essence) | Kind |
|---|---|
| No list or no content type is selected | Error |
| The form has no sections | Error |
| A column in a section no longer exists in the list | Error |
| A rule (field or section) is incomplete or points at an unknown column | Error |
| A default value is not filled in completely | Error |
| A section depends on a field that sits inside the section itself (the rule can never match) | Error |
| The same, but a default value shows the section initially (after the value is changed it disappears and does not come back) | Warning |
| A section has no columns | Warning |
| A default value points at a column that no longer exists in the list | Warning |
| A rule applies to a column that is not on the form | Warning |