Skip to content

WORKFLOW.md

Latest commit

 

History

History
133 lines (92 loc) · 5.02 KB

WORKFLOW.md

File metadata and controls

133 lines (92 loc) · 5.02 KB
Raw

Form UI — Sales Invoice Walkthrough

This guide shows how to use every target type in Form UI by styling a Sales Invoice step by step. After following these steps the invoice will be denser, better organised, and easier to fill in without scrolling.

Before you start

  1. Open Form UI Settings and confirm both toggles are on:
    • Compact Forms — tightens spacing globally
    • Freeze Form Header — keeps the title and Save button visible while scrolling
  2. Open Form UI from the Awesomebar.

Step 1 · Field rules — tighten individual inputs

Goal: reduce the gap between fields and make inputs a little shorter so more of them fit on screen.

  1. Click ╋ New.
  2. Target Element → Field
  3. DocType → Sales Invoice
  4. Field(s) → select All in this DocType (applies to every field)
  5. Spacing & Layout:
    • Field Gap → 4px
    • Field Padding → 2px 8px
  6. Dimensions → enable resize, set Height → 26px
  7. Name the rule SI – Field Density and Save.

Result: all input fields on the invoice become shorter and sit closer together.

Step 2 · Section rule — force 3 columns in the header area

Goal: make the customer/date/currency fields sit side-by-side instead of stacking.

  1. Click ╋ New.
  2. Target Element → Section
  3. DocType → Sales Invoice
  4. Field(s) → pick the first section break (usually named something like customer_section — check via Customize Form)
  5. Spacing & Layout:
    • Section Columns → 3
    • Section Padding → 6px 12px
  6. Name the rule SI – Header 3 Columns and Save.

Result: Customer, Posting Date, Currency, and their neighbours spread across three columns instead of two, cutting the header height significantly.

Step 3 · Section rule — collapse the accounting section by default

Goal: hide the Debit To / Cost Centre fields until they are needed.

  1. Click ╋ New.
  2. Target Element → Section
  3. DocType → Sales Invoice
  4. Field(s) → pick accounting_details_section (or whichever section contains Debit To)
  5. Spacing & Layout → check Collapse by default
  6. Name the rule SI – Collapse Accounting and Save.

Result: the Accounting section is collapsed when the invoice opens. Click the section heading to expand it when needed.

Step 4 · Section rule — sticky totals panel

Goal: keep the Grand Total visible at the bottom of the screen while filling in line items.

  1. Click ╋ New.
  2. Target Element → Section
  3. DocType → Sales Invoice
  4. Field(s) → pick totals_section (the section containing Net Total, Grand Total, etc.)
  5. Spacing & Layout → check Sticky summary panel
  6. Section Background → #f8f9fa (light grey so it stands out)
  7. Name the rule SI – Sticky Totals and Save.

Result: the totals row stays pinned to the bottom of the screen no matter how far you scroll through the Items table.

Step 5 · Column rule — widen the customer column

Goal: give the Customer and Billing Address column more room so names don't truncate.

  1. Click ╋ New.
  2. Target Element → Column
  3. DocType → Sales Invoice
  4. Field(s) → pick the column break immediately after the Customer field
  5. Dimensions → Width → 45%
  6. Name the rule SI – Widen Customer Column and Save.

Result: the left column (Customer, Address, Contact) takes up 45 % of the section width.

Step 6 · Grid rule — compact the Items table

Goal: show more line items without scrolling, hide rarely used columns.

  1. Click ╋ New.
  2. Target Element → Grid
  3. DocType → Sales Invoice
  4. Field(s) → items (the Items child table)
  5. Spacing & Layout:
    • Grid Row Height → 28px
    • Visible Rows → 8 (table scrolls after 8 rows)
    • Hidden Grid Columns → discount_and_margin, weight_per_unit, weight_uom (any columns your team never fills)
    • Check Sticky grid header
  6. Name the rule SI – Items Grid and Save.

Result: the Items table shows 8 compact rows before scrolling, the rarely used columns are gone, and the header stays visible while scrolling through long item lists.

Applying the rules

After saving each rule, click ⟳ (Reload Rules) in the toolbar and reopen a Sales Invoice. All six rules are applied in order of priority (lower number = higher priority; default is 10).

To adjust priority so one rule overrides another, edit the rule and change the Priority value.

Summary of rules created

Rule name Target Effect
SI – Field Density Field 26 px inputs, 4 px gap
SI – Header 3 Columns Section Header in 3 columns
SI – Collapse Accounting Section Accounting section starts collapsed
SI – Sticky Totals Section Grand Total pinned to bottom
SI – Widen Customer Column Column Customer column at 45 % width
SI – Items Grid Grid Compact rows, hidden columns, sticky header