Design a card layout

Place fields, groups, and buttons on a dictionary or document card so the form matches how you work. A layout is data, not a script: you can keep it for yourself or share it with everyone.

Note

This designer does not add fields, change their types, or place card tiles (attachments, progress, totals). Tiles are a different button — Add a widget.

How to#

To design a card layout, open a record card, not a list. In the card header press the layout button — the grid icon, tooltip Design this form's layout. The title of that command is Form layout.

The designer opens: Fields and Toolbox on the left, the form with rulers in the middle, and the element tree plus Properties / Events on the right. A field already on the form is greyed in Fields; a click on it selects it on the form.

The same designer opens without a record from Developer → Documents (or Dictionaries): open the object, then Form layout in the header. A layout saved there is the one the card shows. A screen opens in the same designer from Developer → Forms → Forms: pick it in Screens, then Designer.

Drag a field from Fields onto the form or into a group. Drag a button, text, or group from Toolbox. Click an element to select it; Shift+click adds to the selection; drag on an empty part of the form to select with a frame. Drag to move. Drag a handle to resize. When an element gets taller, everything under it in the same group moves down.

Arrow keys move by 1 px, Shift+arrows by one grid step. Ctrl+C / Ctrl+V copy, Ctrl+D duplicates, Delete removes. Ctrl+Z / Ctrl+Y undo. Snap keeps positions on the grid; hold Alt while dragging to place freely (and to clear pins). Right-click an element for copy, paste, align, same size, order, and delete. Select several and use Align or Same width / Same height / Same size in the toolbar. Select one element: cyan dots on the four sides draw a pin — drag a dot to a neighbour, the form edge, or a cyan guide; click the dashed line to remove that pin. Click a ruler to drop a guide; drag the guide to move it; double-click it to remove it. Select two or more elements in the same group and press Pack in two columns to lay them as a grid that stays together when the window resizes. Drag the square at the form's bottom-right corner to resize the sheet. Zoom is 50% / 75% / 100% / 150%.

A table part is placed from Fields → Tables and panels. Select it to edit the column hints: type a column's name in Add a column hint, press Enter, then write the hint. Charts, lists, trees, and HTML widgets show their real data on the designer sheet, so you can judge the size as it will look. Select an HTML widget and press Edit HTML / CSS / JS to open the code editor with a live preview of the markup and CSS.

Press Save for me when only you should see this arrangement. Press Save shared when everyone should. The line above the canvas says which of the three you are looking at: Automatic form, Shared layout, or Your layout.

Reset my layout returns you to the shared layout (or to the automatic form). Reset shared layout returns everyone to the level below. The order when a card opens is personal, then shared, then automatic (the object's fields in their original order). A new field that was not in the saved layout still appears — at the end, under Other fields.

A shared layout belongs to a model. When it belongs to another model than your working one, Save shared writes your working model's own layout of the card, which everybody then sees instead; the other model's layout stays as it was, and Reset shared layout in your model brings it back. Every card and list that is no longer automatic is listed on Developer → Forms → Forms.

There is no document state to post. Save for me and Save shared store the layout. Until you press one of them, the card still shows the previous arrangement, however many times you move fields.

Classic at the bottom-left opens the older grid designer. Until you save a canvas layout, the card still shows the previous arrangement.

In Arabic the form opens mirrored: what was designed on the left is on the right, and the anchors follow.

Example

On a price type card, press Form layout. Put:

• Name first

Save for me. Only your user sees that arrangement. Press Save shared when the whole office should.

Tip

Save shared is off when your working model is read-only on this stand. Save for me always works. On a phone (narrower than 600 px) the elements stack in reading order — unless any edge is pinned, in which case the form reflows with the pins. You do not design a second layout.

If the command refuses#

See also

• Work with a list
• Add a widget
• The form designer

Same topic for other readers: Developer