AccountedPro - Building a view

A layout is the saved description of one list: its columns, tabs, cards, filters, buttons, expanded row and theme. A DocType can have several, and readers pick between them from the layout dropdown in the toolbar.

Opening the builder

Both are the same builder. Customize Form refuses to open a custom DocType — that is Frappe's rule, not this app's — which is why the standalone page exists. There is also a button on the DocType form itself for custom DocTypes.

From Customize Form the layout is saved by Customize Form's own Update button; on the standalone page there is a Save layout button. Either way nothing is live until you save: the header reads Unsaved changes · Press Update to save while you have work in hand.

The screen

┌ Panel ───────────────┬ PREVIEW ────────────────────────┐
│ Columns              │  [cards]                          │
│  ⋮⋮ Item             │  [filter bar]  [tabs]             │
│  ⋮⋮ Status          │  ┌──────┬────────┬──────────┐  │
│                      │  │ Item │ Status │ Actions  │  │
│ COLUMN: STATUS       │  ├──────┼────────┼──────────┤  │
│  Label, width, …     │  │ …    │ [pill] │ [buttons]│  │
│  Elements ▸          │  └──────┴────────┴──────────┘  │
└──────────────────────┴────────────────────────────────────┘

The panels

The preview

The canvas runs the real renderer over real rows from the live DocType, so what you build is what readers get — there is no separate preview mode to trust.

• Click anything in it to select that element and open its settings, like a browser inspector.
• Desktop / Mobile above it switches which rendering you are looking at.
• With the Tabs panel open, the preview becomes that tab: narrowed by its condition, in its order. Selecting a different tab refetches.
• The first row is drawn expanded while the Expanded row panel is open, so blocks can be built without clicking anything.

Building the pieces

• + Column adds a column; drag the ⋮⋮ handle to reorder.
• Inside a column, + Element adds to the stack. Elements nest — a Group element holds its own stack with its own arrangement, and elements can be dragged between levels.
• Every list in the builder reorders by dragging, and removes with ×.
• Sections collapse, so a long panel stays navigable.

Layouts, defaults and versions

Every save keeps a version, so a change that turns out badly can be rolled back from the layout document.

Validation

Saving validates the whole layout. Errors block the save and name where the problem is (columns[2].elements[0].fieldname); warnings do not block — a field that a Server Script invents is a warning, because the app cannot know what the script returns.

Linkable views

The layout, the view mode and full screen live in the URL, so a particular way of looking at a list can be sent to someone:

/app/sales-order?alv=Dispatch%20Board&alv_mode=Cards&alv_full=1

A first view, end to end

1. Enable the DocType in Advanced Listview Settings, then reload the Desk.
2. Open the builder, press New, and give the layout a title.
3. Columns → + Column → + Element → Field → the record's title. Set a width.
4. A second column for the status; on that element add a Colour rule — pill, red when overdue — and leave a rule with no condition last as the fallback.
5. Tabs → + Tab → label it Mine, condition Created By equals the logged-in user, tick Show a count, and set Order by to your date field, newest first.
6. Expanded row → + Block → Fields, and add three or four values worth seeing without opening the record.
7. Save, open /app/<doctype>, and compare it with the preview.