Designer tour, every panel, every button

A guided tour of the WYSIWYG designer. What each panel does, when to reach for it, and the productivity shortcuts.

The designer is where you spend most of your time. This tour walks through every panel and the productivity shortcuts you'll wish you knew sooner.

The layout

+--------+----------------------------------+--------+
|        |                                  |        |
|  Pal.  |          Canvas                  |  Prop. |
|        |    (drag-drop your form)         |        |
|        |                                  |        |
+--------+----------------------------------+--------+
            Toolbar: undo/redo/preview/save/publish

Three vertical panels:

Palette (left), every component, grouped by category
Canvas (middle), the form itself, as it will render
Properties (right), properties for the currently selected component

Palette

Open a category (Layout, Common fields, Numeric, Choice…) and drag any component onto the canvas. Drop targets light up; release to place.

Productivity tip: type in the palette search box. Component names are auto-completed.

Canvas

The canvas is a 12-column responsive grid. Components occupy 1-12 columns; resize by dragging the right edge. Move by drag-and-drop. Multi-select with Shift-click.

Hot keys:

Del, remove selected component
⌘/Ctrl + D, duplicate
⌘/Ctrl + Z / Y, undo / redo
⌘/Ctrl + S, save
⌘/Ctrl + P, open preview

Properties panel

Five tabs, varying by component type:

General, label, description, placeholder, internal name binding
Layout, grid width, alignment, breakpoint overrides
Rules, visibleIf, enableIf, requiredIf, read-only
Audience, show/hide/enable/disable for groups
Events, per-field JS handlers (onChange, onBlur, onValidate)

Left to right:

Form name, click to rename
Save / Publish, Save creates a draft checkpoint; Publish makes the form active
⌨ Preview, opens a runtime preview against the current draft. No SP write happens.
Undo / Redo
Pages tabs (if your form is multi-page), switch between pages
Theme, paintbrush icon, opens the theme drawer
Code drawer, </> icon, opens the form-level JavaScript editor (f365 API)

Productivity shortcuts

Drag from the palette directly onto the canvas, no two-step "select then place"
Hold Shift while dragging to constrain to whole grid columns
Right-click any component for a quick menu (duplicate, delete, wrap in section, copy as JSON)
Press F2 with a component selected to inline-edit its label
Click an empty area of the canvas to deselect; the properties panel shows form-level settings

Quickstart, your first form
Reference wiki, every component documented