Skip to main content

​
Template Designer

Template Designer (route /templates/designer or /templates/designer/:templateId) is the visual canvas for inspection templates. It’s where you choose the rating scale, set the default cover, and configure the look-and-feel of report PDFs at the template level. The deeper per-page rules live in Visual Page Designer; per-element design (fonts, colors) is on Template Editor. This is the largest of the template editors — 1,841 lines of source — because it manages canvas state, live preview, and the rating-scale + cover bindings.

​
When you arrive here

You reach Template Designer by:
  • Clicking Open Designer from Template Editor
  • Clicking Visual Designer card on the Templates hub
  • Navigating directly to /templates/designer/:templateId (if you know the template ID)
The page loads the template by ID. The header banner reads: ”📝 Note: Editing template ID: {templateId}. Changes are saved to the database when you click the Save button.” If you reach /templates/designer without a template ID, you’ll land on a picker that lets you select which template to design.

​
Screen layout

[SCREENSHOT: template-designer-canvas.png — desktop, the Template Designer showing a header configuration bar at the top, a large canvas in the center, and a side panel of design controls.] The Designer has three primary areas:
  1. Top configuration bar — Inspection Standard, Rating Scale, Default Cover
  2. Canvas — Live preview of how the report will render
  3. Side panel — Design controls (margins, photo grid, finding card style, etc.)

​
Top configuration bar

​
Inspection Standard

A picker showing the active inspection standard. Editing here updates the same standard field as Template Editor → Template Information. Why it’s here: the standard drives the rating scale options and the default sections for new template work. Changing it surfaces a confirmation if the template already has data that would conflict.

​
Rating Scale

A drop-down with two options: The chosen rating scale propagates to: Switching scales after findings have already been captured can leave existing ratings in an unmapped state. Use the migration script (or contact support) if you need to switch on a live template.

​
Default Cover

A picker showing every cover designed in Cover Designer. Selecting a cover here overrides the template-level default set in Template Editor. Some inspectors prefer to set the cover in only one place; choose whichever is more convenient for you.

​
Canvas (live preview)

A large pre-rendered preview of how the report will look. The canvas updates as you change controls in the side panel. Limitations:
  • The canvas approximates the final PDF — true server-side rendering may differ slightly in font kerning and image sharpness
  • To see the actual generated PDF, save the template and use Generate PDF Preview from any inspection using this template (e.g. via Inspection Reviewer)
The canvas reflects:
  • Cover page (from Default Cover)
  • Section header style (color, weight, alignment)
  • Rating row layout (per-rating-scale)
  • Finding card style (border, background, photo grid)
  • Margins and spacing
  • Page-break rules

​
Side panel — design controls

The exact controls depend on which template element is selected (canvas elements are clickable). Common groupings:

​
Margins

​
Colors

These override tenant defaults at the template level:

​
Rating column

​
Finding card

​
Photo grid

​
Saving

The Designer is explicit-save, not auto-save. A prominent Save button (top-right or footer) commits all changes. Until saved:
  • The canvas reflects unsaved changes (visual preview is live)
  • The database still holds the previous version
  • Other users opening the template see the old version
A small unsaved-changes indicator near the page header warns you. Navigating away prompts confirmation.

​
Loading state

If the template data hasn’t fully loaded yet, an info alert appears: “Loading template…” Common causes of slow loading:
  • Templates with large schemas (50+ subsections) take a moment
  • Slow tenant network connection
  • Backend cold start (rare)
If loading hangs for >10 seconds, refresh the page.

​
Validation

The Designer validates several invariants before allowing Save: Failed validations prevent Save until corrected.

​
What this page does NOT do

  • It does not edit the schema. Sections, subsections, and fields are managed in Schema Upload & Review or the deeper schema editor.
  • It does not edit per-page styling like headers/footers. That’s Visual Page Designer.
  • It does not design cover pages. Use Cover Designer — this page only picks from already-designed covers.
  • It does not preview AI narratives. Use Inspection Reviewer on a real inspection.