-
Notifications
You must be signed in to change notification settings - Fork 134
Admin Inpatient Form Template Custom Layouts
By default, each field in a form template occupies a full-width row. The Custom Layout feature lets you control exactly how each field is positioned, coloured, and labelled — placing fields side by side, adding section breaks, grouping related measurements, and applying colour-coded panels to guide clinical staff visually.
Layout is controlled through a field-level Edit HTML setting. You do not need to know HTML deeply to use the examples on this page — copy, paste, and adjust the colour values or labels as needed.
Each field has two optional HTML templates:
| Setting | Used When | Special Tokens |
|---|---|---|
| Edit HTML | Staff are filling in the form |
{{LABEL}} — replaced with the field name; {{INPUT}} — replaced with the input box |
| View HTML | Staff are reading a completed form |
{{LABEL}} — field name; {{VALUE}} — the saved value |
When Edit HTML is blank, the system uses a plain single-column layout automatically. When you provide Edit HTML, the field is rendered exactly as you describe.
Everything in Edit HTML before {{INPUT}} wraps the top of the input (label, container open). Everything after {{INPUT}} closes the container. This lets you open a Bootstrap column before the input and close it after — which is how side-by-side fields work.
This is the most common layout for a clinical assessment form: complaints on the left in a green panel, vital signs on the right in a blue panel.
┌─────────────────────────┬─────────────────────────┐
│ 🟢 GREEN PANEL │ 🔵 BLUE PANEL │
│ │ │
│ Presenting Complaint │ Pulse Rate (bpm) │
│ [________________] │ [_____] │
│ │ │
│ History of Complaint │ ┌─────────┬─────────┐ │
│ [________________] │ │ SBP │ DBP │ │
│ │ │[_____] │[_____] │ │
│ Subsidiary Complaints │ └─────────┴─────────┘ │
│ [________________] │ │
│ │ Respiratory Rate │
│ │ [_____] │
└─────────────────────────┴─────────────────────────┘
─────────────────────────────────────────────────────
● VITAL SIGNS RECORDED
Create a field named __left_open with Order = 1 and this Edit HTML:
<div class="row g-0 mb-3">
<div class="col-12 col-md-6 p-3"
style="background:#e8f5e9;border-radius:8px 0 0 8px;border:1px solid #a5d6a7;">This field has no
{{INPUT}}in its Edit HTML. The system will still render a text input for it — set the field type to Text (single line) and staff can leave it blank. It is purely structural. A cleaner approach is to name it with a double-underscore prefix (e.g.__left_open) so staff understand it is a layout marker, not a clinical field.
Order = 2. Edit HTML:
<div class="mb-3">
<label class="form-label fw-semibold" style="color:#2e7d32;">{{LABEL}}</label>
{{INPUT}}
</div>Order = 3. Same Edit HTML as above.
Order = 4. Same Edit HTML as above.
Create __right_open, Order = 5:
</div>
<div class="col-12 col-md-6 p-3"
style="background:#e3f2fd;border-radius:0 8px 8px 0;border:1px solid #90caf9;border-left:none;">Order = 6. Edit HTML:
<div class="mb-3">
<label class="form-label fw-semibold" style="color:#1565c0;">{{LABEL}}</label>
{{INPUT}}
</div>Order = 7. Edit HTML:
<div class="row g-2 mb-3">
<div class="col-6">
<label class="form-label fw-semibold" style="color:#1565c0;">{{LABEL}}</label>
{{INPUT}}
</div>Note: this field opens a Bootstrap row and its own column. It does not close the row — the next field (DBP) does that.
Order = 8. Edit HTML:
<div class="col-6">
<label class="form-label fw-semibold" style="color:#1565c0;">{{LABEL}}</label>
{{INPUT}}
</div>
</div>DBP's Edit HTML opens its column, renders its input, then closes both the column and the row that SBP opened.
Order = 9. Edit HTML:
<div class="mb-3">
<label class="form-label fw-semibold" style="color:#1565c0;">{{LABEL}}</label>
{{INPUT}}
</div>Create __row_close, Order = 10. Edit HTML:
</div>
</div>Create __section_break, Order = 11. Edit HTML (no {{INPUT}}):
<div class="col-12 my-3">
<hr style="border:2px solid #90a4ae;"/>
<span class="fw-bold text-secondary text-uppercase small"
style="letter-spacing:.08em;">● Vital Signs Recorded</span>
</div>Use this whenever you want any two fields to share one row — weight and height, SBP and DBP, temperature and SpO₂, etc.
Field A (left, opens the row):
<div class="row g-2 mb-3">
<div class="col-6">
<label class="form-label fw-semibold">{{LABEL}}</label>
{{INPUT}}
</div>Field B (right, closes the row):
<div class="col-6">
<label class="form-label fw-semibold">{{LABEL}}</label>
{{INPUT}}
</div>
</div>For three fields on one row use col-4 instead of col-6, and have the third field close the row with </div></div>.
Use this to add a visual divider between groups of fields without any input:
<div class="col-12 my-2">
<hr style="border:1px solid #bdbdbd;"/>
<span class="fw-bold text-uppercase small text-muted">Allergies and Medications</span>
</div>Create a field named __break_allergies with this as Edit HTML and no {{INPUT}}. Set it to type Text (single line). Staff leave it blank.
These are the colour codes used in the examples above. Adjust to match your hospital's colour scheme.
| Panel | Background | Border | Label colour |
|---|---|---|---|
| Green (history / complaints) | #e8f5e9 |
#a5d6a7 |
#2e7d32 |
| Blue (vitals) | #e3f2fd |
#90caf9 |
#1565c0 |
| Yellow (warnings / alerts) | #fffde7 |
#f9a825 |
#e65100 |
| Red / pink (critical) | #fce4ec |
#f48fb1 |
#b71c1c |
| Grey (neutral / notes) | #f5f5f5 |
#e0e0e0 |
#424242 |
To change a panel colour, replace all three values (background, border, label) in the layout opener field's Edit HTML.
- Always name them with a
__prefix so staff recognise them as structural, not clinical - They will render a small text input — this is harmless; staff leave it blank
- Never mark them as Required — staff cannot fill a layout field meaningfully
- Field A must open
<div class="row ...">and<div class="col-...">but not close either - Field B must open
<div class="col-...">and close both</div></div> - If you delete Field B without updating Field A, the row will be left open and the rest of the form may render inside it — always update both fields together
-
col-md-6means: 50% width on tablet/desktop, full width on mobile -
col-6(without-md-) means always 50% — even on a phone screen, which can be tight for wide inputs like textareas; usecol-md-6for those
- Place
{{INPUT}}on its own line for readability - Do not duplicate
{{INPUT}}— only the first occurrence is used as the split point; everything after the second one is treated as literal text