On this page
The Layout Editor is where anyone holding the Edit dashboards capability builds and reshapes a page: add cards, rearrange them, set a filter bar, configure an AI card, and write narrative text. Every change sits in a draft until you press "Save."
For: members holding the Edit dashboards capability (Owner, Admin, and Editor by default). Before you start: Dashboards for the page/dashboard/card model this editor edits — including how a page or a board gets pinned into the sidebar menu, which is a separate step from anything below.
Steps#
1. Open the editor
- Open the page you want to edit.
- On the page's action bar, click "Edit" ("Chỉnh sửa"). On a report built from a template, this button reads "Edit layout" ("Chỉnh sửa bố cục"). On a narrow screen, it sits inside the "Actions" menu.
- The editor opens in three panes: a "Structure" tree on the left, the canvas in the middle, and a "Card properties" panel on the right. Each pane scrolls on its own and never covers the canvas.
- Click "Done" ("Xong") on the command bar to exit. With unsaved changes, the editor asks before discarding them.
If an editing session is interrupted, the next time you open the page the editor offers "Restore unsaved draft"; choose "Restore" or "Discard draft."
2. Read the command bar
The command bar has four clusters, left to right:
- Session: "Done," "Undo," "Redo," a save indicator ("Saved" or "{n} unsaved changes"), and a "Shortcuts" button.
- Authoring language: a "Compose in" field for "Vietnamese (default)" or "English," with an "EN" count chip. Each piece of text has exactly one field; switch it to English and that same field holds the English version — leave it blank and an English reader still sees the Vietnamese text. "Translate all with AI" queues a translation for whatever text is still missing one.
- Editor commands: the view mode, "Insert" ("Chèn"), "AI" (which holds "Layout assistant" and "AI voice"), "Table filters," "Aliases," "History," and "Save" ("Lưu") — the one primary button on the whole bar.
- Delete: "Delete selected card(s)" stands alone as its own named cluster. The first click asks "Delete selected card(s) (n)?"; only "Delete" actually removes it, "Keep" cancels.
Click "Shortcuts" to see the full list: Ctrl/⌘+S saves, Ctrl/⌘+Z undoes, Ctrl/⌘+D duplicates the selected card, the arrow keys select the next card, Alt+arrow moves it, [ and ] change its width, Delete removes the selected card, Enter opens its properties, Esc closes them.
3. Add a card from the library
- Click "Insert" ("Chèn"); the "Insert card" panel opens on the right.
- Search with "Type a card type," or browse by group: Metric, Distribution, Composition, Table, AI. Each type shows a preview.
- Choose a "Table" for a new card, and a "data group" if that type needs one.
- Click a card type to append it to the end of the board, or drag it to an exact position on the canvas.
A card type the dataset cannot yet satisfy is listed with its reason, for example "Needs at least one data group" or "Needs a data group with two or more values." A missing card type means the data cannot answer it yet, not an editor bug. The picker only ever lists the data planes the organization actually runs, even for a super admin.
Add a board: click "Add board" in the "Structure" pane; choose "Belongs to" to make the new board a sub-board.
4. Move and resize
- Move: drag a card on the canvas, or drag it inside the "Structure" tree. By keyboard: select the card, then Alt+arrow.
- Resize: drag the handle on the card's right edge, use its "Width" menu, or press
[and]. Six steps: 1/4, 1/3, 1/2, 2/3, 3/4, and full width. - Move a card to another board: change the "Board" field in its properties panel.
- Select several cards: Ctrl/⌘ adds one card, Shift selects a range. With two or more selected, the properties panel adds "Align in a row," "Split evenly in a row," "Stack as one column," "Set width for selected cards," and "Move to board."
5. Edit a card
- Click a card; "Card properties" opens on the right with four groups: "Data" (what the card counts, what it divides by), "Style & display" (chart type, width, row count), "Labels & captions" (the text printed on the card), and "Interaction & AI" (click-to-open-record, AI-written content).
- The top of the panel reads "This card is showing ...," assembled from the current configuration — read it as a quick check before closing.
- Click "Done" to keep an edit, or "Cancel" to return the card to the state it had when the panel opened.
- Both "Done" and "Cancel" do not write anything yet. Only the command bar's "Save" writes.
To change a card's type entirely, use "Change card type" in the properties panel. Its title, board, order, and width are kept; the old card is only replaced once you save.
6. Lock a card
Turn on "Lock this card's layout" in the properties panel, or "Lock layout" in the action cluster right above the card. A locked card cannot be dragged, resized, moved to another board, or deleted until unlocked. The "Structure" tree marks a locked card. With several cards selected, use "Lock selected cards."
7. Configure an AI card
An AI card is a card whose text is written by AI from the report's own data.
- Select the AI card, then click "Open AI configuration."
- "Data" step: click "Add data source." Sources are grouped into "This card," "Chart" (exactly the data one card is drawing), "Board" (every data card on a board), and "Another AI card" (the approved content of a different AI card).
- "Structure & layout" step: each section of the card is one row, with a "Section name," a "Width" (1/3, 1/2, 2/3, full row), and a field for "What to draw, from which data." Up/down arrows change reading order.
- The number and names of sections depend on the card type: an "Action card — four sections WHAT · SO WHAT · NOW WHAT · AVOID" is only available to a card on an action-oriented page; a "Summary card — no action sections" declares its own sections, one by default.
- The "Direction for AI" field only changes angle and emphasis; the numbers still come from the sources you chose.
- Click "Save changes" inside the AI configuration panel. This panel writes immediately — it is not part of the editing session's "Cancel."
The fastest way to attach an AI card in the right place: on a chart card, click "Add AI card for this chart." The new AI card lands right after it, at the same width, already pointed at that chart's data.
The report's shared tone is set at "AI" > "AI voice"; it takes effect on the next "Regenerate."
8. Write and edit the narrative text
- On an AI card, click "Edit content." The editor renders exactly like the result: headings, lists, quotes, tables, bold, and italic.
- Toggle "Display mode" between "Editing" and "View as reader." "View as reader" renders the card exactly as a reader receives it, using the same renderer as the live surface, right inside the content field.
- Keep tokens like
{{f:...}}as they are. That is where a number updates itself from the chart; never type a number directly. - Click "Save." The written content displays immediately and counts as the current version.
- "Regenerate" does not overwrite what is displayed: it drafts a new version alongside it. Read it, then click "Approve for display" to replace the old one, or "Discard draft" to keep it.
- The English version of long-form text lives inside "Edit content" itself, not in the command bar's bulk translation box.
9. Page and board filters
On an ordinary page:
- In edit mode, click "Page/board filters" on the page's action bar, next to "Manage tabs."
- Choose "Scope": "Page" or "Board." This is exactly the declaration level from the filter rules.
- Choose which "Controls" a reader sees: "Date range," "As of date," "Platform."
- Click "Save." "Remove filter" takes the filter bar off the chosen scope.
On a deck delivered to a customer, a board's filter bar lives in the editor's "Table filters" command instead. Each control can be set to a "Type" ("Single select," "Multi-select," "Search and select"), a "Display" ("On the filter bar," "Hide the label," "Pinned, not shown"), and a "Default." "Pinned, not shown" applies a fixed filter without drawing a control; the cards beside it still state their own scope.
A control that does not apply to a given card says so on the card itself, for example "Not applicable to this card: ..." or "Data is only available company-wide — not split by ...".
10. Preview and view as guest
- "View mode": "Edit" or "View as guest." "View as guest" strips every editing frame and re-renders the report exactly as a reader receives it. This is the final check for any layout change.
- "Screen size": "Desktop" or "Phone." The canvas keeps the chosen size's width and scales to fit the available space, so opening or closing a side panel never re-flows the report under your cursor.
- "Canvas zoom": "Fit" or "100%."
- "Show 12-column grid": overlays a grid on the canvas for alignment. The grid is for alignment only; it never prints for the reader.
11. Save, undo, history
- "Save" (Ctrl/⌘+S) writes the whole draft at once. The layout is re-packed and written in the same save.
- "Undo" and "Redo" count per user action: one drag is one step; an action that changes nothing creates no step.
- "History" opens the report's list of saved versions.
- The save state always shows on the command bar and is announced to a screen reader whenever it changes.
12. Common mistakes
- The Delete key acts on whatever has focus. With the cursor inside a text field, Delete removes a character, not the card. Check the selection outline before pressing it.
- A few panels write immediately, outside the editing session's "Cancel": the AI configuration panel, "AI voice," "Brand alias," and "Table filters." These carry an "Applies immediately — not part of Cancel" label.
- While "Brand alias" is on, a card's title displays the alias. Editing the title then saves exactly what you typed, so turn the alias off first if you want to edit the real name.
- A board with cards or sub-boards still inside it cannot be deleted. Move or delete what is inside first; the editor states this: "Board still has cards. Move or delete the cards first."
- A card with a locked layout ignores drag, resize, and delete. Unlock it first.
- Nothing changes for a reader until you click "Save"; clicking "Save" pushes the change straight to the live report. Layout has no separate approval step, unlike AI-written narrative text.
Verify#
Switch "View mode" to "View as guest" after any layout change — that is the exact render a reader receives, on both desktop and phone sizes. The command bar's save indicator reads "Saved" once the write has gone through; a stray "n unsaved changes" means "Save" was never clicked.
When something is wrong#
| Symptom | Common cause | Fix |
|---|---|---|
| A keypress deleted text instead of a card, or the reverse | focus was on a text field or on the canvas, not both | Check the selection outline before pressing Delete. |
| A table's total row does not match the sum of the visible rows | the total row is the measure's full-period total, not a sum of the rows shown on the page | This is expected; read the total row on its own terms. |
| An edit to "Brand alias," "AI voice," or a table filter is not part of Undo | those panels write immediately, outside the editing session | Reopen the panel to change it again; Undo will not revert it. |
| A board will not delete | it still holds cards or sub-boards | Move or delete what is inside it first. |