Designer Overview
The designer is the visual form editor. This page describes its parts and basic workflow.
Screen Layout
The designer opens in the Form Configuration window via the Form Settings button in the form's top toolbar (see Quick Start). The window has three bands.
Window Header
- Form and list name.
- List activation: enables or disables the custom form on any list in the site (for steps, see Activating a Form on a List).
- License: enter a license key (see Entering a Key in the Designer).
- Close window button.
Top Designer Toolbar
Tabs are on the left, tools are on the right.
| Tab | Purpose | Details |
|---|---|---|
| Layout | Tabs, sections, fields, and widgets | Form Layout |
| Preview | Interactive preview of the form in New, Edit, and Display modes | Preview |
| Rules | Conditional behavior (rule count is shown in the badge) | Rules & Conditions |
| List Actions | Custom buttons in the list command bar and item context menu, confirmation dialog texts | Buttons and List Actions |
| Bar & Buttons | Live preview of the command bar, system and custom buttons | Bar & Custom Buttons |
| Scripts | Custom JavaScript (must be enabled on the tenant) | JavaScript Scripts |
| Translations (i18n) | Form texts in additional languages | Translations & Multilingual |
| AI Assistant | Prompt for an external AI and safe application of its response (Pro license) | AI Assistant |
| JSON | Direct editing of the configuration | Raw JSON |
Tools on the right, from left to right:
- Undo and Redo; see Undo and Redo.
- N warnings badge (shown only when warnings exist); see Configuration Warnings.
- Display style button (for example, Dialog · 960 px): appearance and behavior of the whole form; see Form Settings.
- Security button (after setting a password, Editor lock active); see Configuration Security.
- More options menu (three dots): import, export, and restore from backup.
- A small label with the running package version (for example, v1.14.0.0); include this version when reporting an issue.
- Designer language switcher; see Designer Language Switcher.
Bottom Bar
Status text (Unsaved changes · ready to save, Configuration is saved and valid, or Cannot save · N validation errors) and the Close and Save form (Ctrl+S) buttons. Closing with unsaved changes prompts with Back to editor, Discard changes, or Save and close. Save form alone does not close the builder: a Configuration saved. message appears (and fades after a few seconds) and the form behind the window re-renders with the new configuration. On failure an error message is shown and the window stays open.
Tabs and buttons are displayed in the designer language (cs, en, de, sk). This documentation uses English labels.
Field and Widget Palette
The palette is the left-hand panel on the Layout tab.
- The Fields tab contains the list columns. The Unplaced only and System checkboxes filter the list, and the Search fields… box searches by name.
- The Widgets tab contains elements that are not list columns: banner, image, related items and documents, process button, process stepper, spacer, text and heading, KPI, and version history. Add a widget to the form using the "+" button or by dragging it from the palette into a section on the canvas, just like a field. See Widgets Overview for descriptions.
- Cascading lookup is locked in the palette without a Pro license (Pro badge, cannot be added). Already added cascades remain and can still be edited; see Licensing.
- Add an element by dragging it into a section or clicking + next to it. Clicking adds the element to the end of the active section (the palette shows it in its footer).
- A field can appear on the form only once. A field that is already placed is marked in the palette (for example, in tab or another tab).
Creating a Column
You can create a new list column directly from the palette without opening SharePoint list settings. The Create column button is above the search box on the Fields tab. It is available only to users with the Manage Lists permission (list owner or administrator); other users do not see the button and nothing is created for them.
- Display name is the column title. Based on it, an internal name is suggested live (for example, "Header" gives
header, "Approval Date" givesapprovaldate; underscores are kept, other non-alphanumeric characters are removed). You can override the internal name; once you edit it, typing in the display name no longer changes it. Once created, it cannot be changed in SharePoint. - Internal name rules: ASCII letters without diacritics, digits, and underscores only; cannot start with a digit; maximum 32 characters. Must not collide with an existing list column (case-insensitive) or a reserved SharePoint name (such as
ID,Title,Author,Created,ContentType). An error appears next to the field and the button stays disabled. - Column type: single line of text, multiple lines, number, currency, date and time, choice, Yes/No, person, and lookup. Multiple people are created under the Person type by checking Allow multiple selection. Depending on the type, options are shown for choices (one per line), decimal places, "date only", allowing groups, or target list and lookup column. For currency, select Currency format (currency locale, e.g., CZK 1029, EUR 1031/1051, USD 1033, GBP 2057, PLN 1045); the default is the site locale if known to the form, otherwise derived from the designer language. Without it, SharePoint sets no currency on the column.
- Choice: each value on its own line. Display as determines the appearance in both SharePoint and the form: Dropdown, Radio buttons (single value), or Checkboxes (multiple values), which creates a multi-value column (
MultiChoice). The Allow fill-in choices checkbox lets users enter a value not in the list (SharePointFillInChoice). - Content types: if the list manages content types, the dialog offers a selection of them (folders are excluded). The current form's content type is preselected. When the list does not manage content types, the section is hidden and the column receives the list's default content type. While content types are loading, the Create button is disabled; if loading fails, the dialog shows an error and creates nothing (so a column is never added to an unintended content type). The column is not added to the list's default view.
- Clicking Create and add to form creates the column, inserts the field at the end of the active section, and selects it (one Undo step). The actual internal name returned by SharePoint is used.
- If adding the column to one or more content types fails, the column exists and the field is in the form. The dialog lists the content types where it failed and offers Retry; if retrying also fails, the error is shown in the dialog. If the column was created but setting the display name failed (leaving the internal name), the dialog stays open and shows a warning.
- If creation ends with an error, the column may still have been created. The dialog therefore locks the attempted internal name (so retrying does not create a duplicate
name0column); check the list columns. - The target lookup column offers only types that SharePoint can reference (text, number, currency, date and time, calculated column, ID); multi-line text, people, lookup, and multi-choice are not offered.
- Default value is not set in the dialog. After creating the field, configure it in the field inspector (Default behavior section).
Field Inspector
Click a field, widget, section, or tab to display its properties on the right. For fields and widgets, the inspector has these sections (the exact set depends on the type):
- General: Custom label (overrides the title only in the form, not in SharePoint), Description and help (text below the field), and Placeholder.
- Appearance: Width in section on the 12-column grid (see Columns and Field Width).
- Default behavior: toggles for Visible, Required, and Read-only (only where the field type allows).
- Type settings: format validation for text, URL, and multi-line text; Display as for choice (dropdown, radio buttons, or checkboxes depending on whether the column is single or multi-value; info on whether the column allows custom values, and option order); cascade for lookup; toggle to repeating table for multi-line text; and widget-specific options for widgets.
- Rules: list of rules referencing the element, with a link to the rule editor.
- Footer: Move to another section and Remove from layout.
The meaning of each type's options is described in Field Types & Properties.
Undo and Redo
- Undo and Redo buttons in the top toolbar, or Ctrl+Z and Ctrl+Y (also Ctrl+Shift+Z). Shortcuts are disabled while typing in a text input.
- On the Layout tab, the Delete key deletes the selected field, widget, or section (see Deleting with the Delete Key).
- History keeps 50 steps.
- Edit coalescing: repeated edits to the same value within 600 ms are merged into a single step so typing a label does not undo character by character. Structural changes (adding, deleting, and moving fields, sections, and tabs) are always separate steps.
- The "unsaved changes" state is compared against the last saved configuration. If you undo back to the saved state, the designer no longer reports unsaved changes.
- Deleting a tab, section, field, or rule can be undone with Undo until you close the designer.
Configuration Warnings
The yellow N warnings badge in the toolbar opens a list of issues that do not block saving but are worth fixing:
- error in cascading lookup configuration (missing parent field, circular dependency),
- exceeded Community edition limits (more than 2 tabs or more than 3 rules),
- empty section,
- spacer with height outside the 1–400 px range.
Unlike warnings, validation errors show a red banner Configuration contains validation errors and status text Cannot save. Until fixed, the Save form button is disabled and export is blocked. Typical causes: a field appears more than once in the layout, a rule references a non-existent field or function, or the blockSave action is used in a rule with a trigger other than On save.
Rules referencing removed fields are not deleted: they are marked invalid, skipped at runtime, and preserved so you can repair them. Before deleting a tab, section, field, or rule, the designer shows an impact dialog listing affected rules and scripts.
Preview and Split Preview
- The Preview tab renders the real form (rules, expressions, and widgets are active). Use the New / Edit / Display switcher to select the mode, the Dialog / Panel / 100% switcher for width (panel is 640 px), and the adjacent selector for simulation language.
- On the Layout tab, turn on Live preview: the canvas narrows and a live preview of the selected mode is shown alongside it.
- Preview does not load any list item: fields start empty or with their default values. It does not show Save or Cancel buttons and does not save anything. However, rules, expressions, and conditions react to what you enter in the preview.
Import, Export, and Restore
All three commands are in the More options (three dots) menu in the top toolbar.
- Export configuration (.json) copies the configuration to the clipboard and downloads
form-config-<list>-<yyyymmdd>.json. A configuration with validation errors cannot be exported. - Import configuration (.json) loads a file, validates it against the schema, and replaces the working configuration. If it references fields that do not exist on the list, the Configuration import warning dialog appears. Choosing Continue and clean up missing fields removes those fields from the layout and rules; Cancel import discards the import. The import takes effect only after saving the form.
- Restore from backup replaces the working configuration with the latest automatic backup that SharePoint keeps on each save (the previous saved version). Unsaved changes are overwritten, so the command asks for confirmation. It is disabled if no backup exists.
- When editing a per-mode layout, the menu also includes NEW/EDIT/DISPLAY → Shared, which discards the custom mode layout (see Per-Mode Layouts).
On every save, the app also keeps the last 10 versions of the configuration in the Site Assets library under FormCustomizer/<List ID>/history. The designer does not yet offer direct UI restore for these; a site owner can copy them manually.
Export and import is the fastest way to move a form between lists and environments (dev, test, production). After importing, check any fields that had to be removed.
Designer Language Switcher
At the far right of the top toolbar are language codes (for example, CS, EN). The switcher offers the form's default language and enabled languages. It changes two things:
- the language of the designer UI and canvas labels,
- the target for text edits: in a non-default language, edits to a tab title, section heading and description, field label, placeholder, help text, and error message are written to translations (
i18nConfig.translations) while default texts remain untouched. A notice bar with a Switch to default link appears above the canvas.
For details, see Editing in the Designer in Another Language.
Concurrent Configuration Edit Conflict
Every configuration save receives a new revision. If another administrator saved the form in the meantime, the designer rejects the save and displays the Configuration version conflict detected dialog with the author and timestamp of the latest change. Options:
- Save my version to history (recommended): your version is saved to the backup history, the live configuration stays unchanged, and the designer remains open.
- Load new version (discard changes): replaces your edits with the current saved configuration.
- Overwrite their version (force): saves your version over the other person's changes.
- Back: closes the dialog and keeps your edits.
Licensing in the Designer
The designer header displays the customer name from the license key. After update entitlement (upd) expires, the designer runs in Community mode with a prompt to renew maintenance, while published forms continue working without a watermark. Details, revocation, and entering a key: Licensing. Scripts are governed by the tenant script policy.
Raw JSON
The JSON tab displays the entire configuration as text that you can edit directly. Format JSON pretty-prints the text, Apply JSON applies the changes (only when valid), and Revert changes discards them. Syntax and schema errors appear in the JSON Errors list.
The designer also compares field data types with the list columns. Fields without fieldType (for example, a manually inserted currency field) are automatically filled in from the column type on Apply JSON, import, and AI suggestions, and the designer reports how many types it filled. A type incompatible with the column (such as Yes/No on a number column) is reported as a warning below the editor and in the top toolbar warnings; it is only a warning and the JSON can still be applied. Missing types are also filled in memory when loading the form, so features tied to numeric fields (repeating table totals, KPI) work even with older configurations.
Direct editing bypasses designer checks. Applying JSON writes to the working configuration and reaches SharePoint only after saving, though it can be undone with Undo. If a saved configuration has an error, the designer opens on this tab for repair; see FAQ.
The configuration structure is documented in the developer section: Configuration Schema.