AccountedPro - Columns and elements
A column is not a field. A column is a stack of elements, so one column can carry a title, a status badge and two buttons, each with its own rules, colours and visibility.
Column settings
Select a column in the Columns panel and its settings appear underneath.
| Setting | Values | Notes |
|---|---|---|
| Label | text | The heading. Blank uses the field's own label. |
| Width | number | Read with Width in. |
| Width in | Pixels, Percent of the table | Percent columns share what is left after pixel ones. |
| Align | Left, Center, Right | Applies to the whole stack. |
| Freeze left | on/off | Pins the column while the table scrolls sideways. |
| Sortable | on/off | Whether the heading sorts. |
| Sort by field | fieldname | Sort by a different field than the one shown — e.g. show a formatted label, sort by the raw date. |
| Wrap text | on/off | Let long values run onto another line rather than being cut. |
| Stack elements | Side by side, Separate lines | How the elements inside are arranged. |
| Separator | text | Drawn between elements when side by side, e.g. ·. |
Mobile view
Every column has its own mobile overrides, because a phone is a different layout and not merely a narrower one.
| Setting | Values |
|---|---|
| On mobile | Show, Hide, Mobile only |
| Wrap text on mobile | on/off |
| Width on mobile + Width in | number, px/% |
| Align on mobile | Left, Center, Right |
| Shorter label | text |
| Columns across on mobile | number |
Mobile only is what makes a phone layout good: hide the six detail columns and add one mobile-only column whose stack shows title, status and amount on three lines. Same layout, two genuinely different renderings. The breakpoint is the Desk's own, 768px, and the builder has a Desktop/Mobile toggle above the preview.
The element types
| Type | Shows | Key settings |
|---|---|---|
| Field | A value from the record, including one reached through a Link | Field, Format, Prefix, Suffix |
| Virtual (from data source) | A key the data source computed per row | Key on the row |
| Static text | Fixed text and/or an icon | Text, icon |
| Button | A per-row action | See Buttons and actions |
| Chips | One tag per row of a child table | Repeat over, Show this field, Stateful colours |
| Comments | Comment count, latest on hover, thread on click | Show as, How many, With a box to add a comment |
| Image | A photo, logo or initials | Source, box, shape, fallback |
| Related | Records from another DocType | See The expanded row |
| Group | A nested stack of elements, with its own arrangement | Arrange its elements, Separator, Gap |
Settings shared by most elements
| Setting | What it does |
|---|---|
| Prefix / Suffix | Text or an icon before and after the value. |
| Format | currency, percent, float, int, date, datetime, relative, duration, text. Blank uses the field's own type. |
| Show it as a bar | Draws a percent value as a progress bar. |
| Clicking it | Applies a filter on that value (like Frappe's own list), or does nothing. |
| Allow edit in place | Double-click, or a real control in the row. |
| Colour it automatically | Every distinct value gets its own stable colour. |
| Prefix/suffix inside the pill | Whether the pill wraps the affixes too. |
| Shorten to (characters) | Truncate long values with an ellipsis. |
| Abbreviate: letters per word | "Mississauga Warehouse" → "MiWa". |
| When empty show | What to draw when there is no value — blank leaves the cell empty. |
| Link to the document | Make the value open the record. |
| On mobile | Show, Hide, Mobile only — per element, not just per column. |
Text formatting
Every element has a Text formatting section: Font, Weight, Size, Line height, Letter spacing, Italic, Underline, Align, Text colour, Background, Padding, Border width, Border radius, Border colour. Anything left blank inherits the theme, which is what keeps dark mode working.
Reaching into a linked document
Anywhere a field is chosen, a Link field carries a › chevron on its row in the field list. Click it to walk into that document and list its fields. The chevron keeps appearing while there are Links to follow, up to ten levels.
customer › territory › territory_name
Each level costs one query for the whole page, not one per row, and hops with a shared prefix are resolved together. Every hop goes through the permission layer, so a link into a DocType the reader cannot read comes back empty rather than leaking a value.
Combining fields into one element
Instead of a single field, an element can show a template:
{{ item_code }} × {{ qty }}
- Press Enter inside the box for a second line.
- The icon beside the field selector opens a dialog listing every field with its name, so there is no guessing.
- A template wins over the single field above it.
Chips
Chips repeat one small tag over a list — normally a child table.
| Setting | Notes |
|---|---|
| Repeat over | A child table on the record, or a key from the data source. |
| Child table | Which table. |
| Show this field | What each chip reads, or a template combining several. |
| Stateful colours | Passes an accumulator along the row, so a chip can be coloured by what came before it — "everything after a rejection is stopped". |
Colour rules apply to each chip, not the cell, so a chip can be green or red on its own value.
Images
| Setting | Values |
|---|---|
| Image comes from | A field on the document, a key on the row, or a fixed URL |
| Width / Height (px) | The box |
| How it fills the box | Cover, contain, fill |
| Shape | Square, rounded, circle |
| Corner radius (px) | For the rounded shape |
| Panel behind it | A light ground, so a transparent PNG does not disappear into a coloured card |
| Padding around it (px) | Inside the panel |
| When there is no image | Show nothing, a placeholder, or initials taken from a field |
| When it is clicked | Open the document, open the image, or nothing |
| Mobile view | Its own width and height on a phone |
Colour rules
Each element can carry Colour rules (first match wins):
| Setting | What it paints |
|---|---|
| Edge colour | A stripe at the row's leading edge, shared by table and cards |
| Background tint | The whole row |
| Pill | Draws the value as a pill rather than plain text |
| Background / Text colour | The pill or the text |
| Bold | Weight |
Rules are read top to bottom and the first match wins, so put the specific ones first and leave the last one without a condition as the fallback. Colours offer the Frappe palette first and a free hex field second, which keeps the common case theme-safe.
Showing an element only sometimes
Show this only when… takes a condition, a list of Roles, or both. It applies to elements, columns, blocks, tabs, cards and buttons. An element hidden this way is not rendered at all.