Design Studio Workflow
A step-by-step recipe for creating a complete page template from scratch. Follow this linearly — each step builds on the previous one.
This is the Quick Start path
This page gives you the fastest route to a working template. For detailed explanations of each module, see the Deep Dive References at the bottom.
Two Workflows Covered
| Workflow | Template Type | What You'll Build |
|---|---|---|
| Workflow A | Home | Landing page with Dashboard & Report widgets |
| Workflow B | View | Instance detail page with Form + Relation widgets |
Prerequisites Checklist
Before starting either workflow, confirm:
- Design Studio is enabled (
ProtrakEnableDesignStudio = true) - You have Admin panel access
- You know the Type Name(s) you're building for
- You know which Roles need access (or use "Everyone")
Workflow A — Home Page Template
Visual Overview
Step 1 Step 2 Step 3 Step 4 Step 5
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ CHECK/ │ │ CREATE │ │ CREATE │ │ ASSEMBLE │ │ CONFIGURE│
│ CREATE │───►│ TYPE │───►│ PAGE │───►│ WIDGETS │───►│ SETTINGS │
│ QUERIES │ │ WIDGETS │ │ TEMPLATE │ │ ON CANVAS│ │& PUBLISH │
└──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘
Step 1 — Check / Create Query Definitions
Route: Admin → Query Definitions
For each Dashboard or Report widget you plan to add:
┌─────────────────────────────────────────────────┐
│ Do you need filtered/specific data? │
│ │
│ YES ──► Create an Instance Query │
│ NO ──► Skip (widget will show all data) │
└─────────────────────────────────────────────────┘
If creating a query:
| Action | Details |
|---|---|
| Navigate to | Admin → Query Definitions → Create |
| Set Query Type | Instance Query |
| Set Associated Type | Your target type (e.g., Customer) |
| Select Attributes | All or pick Specific attributes to limit columns |
| Add Filters (optional) | State filter, Attribute filter, Parent filter |
| Set Data Options | Take: 500 (default), Include Total Count: ✅, Sort By: pick default sort |
| Save | Use a descriptive name: e.g., ActiveCustomersForHomeDashboard |
No Query Needed?
Dashboard & Report widgets work without a query — they'll fetch all type attributes. Only create a query if you need to filter data or restrict visible columns.
Step 2 — Create Type Widgets
Route: Design Studio → Type Widgets → Create
Create one Type Widget per data block you want on the Home page.
For a Dashboard Widget:
| Field | Value |
|---|---|
| Widget Name | e.g., CustomerDashboard |
| Display Name | e.g., Active Customers |
| Widget Category | Dashboard |
| Type Name | Your type (e.g., Customer) |
| Query Definition | Select from Step 1, or leave empty |
After creation — configure these sections:
Column Designer
├── Add columns from dropdown (type attributes)
├── Set column order (drag to reorder)
├── Per column:
│ ├── Display Name ── label users see
│ ├── Renderer ────── how value displays
│ ├── Visibility ──── on/off toggle
│ └── Width ───────── 0 = auto
│
Filter Settings
├── Enforce State Filter ── on/off
├── Enforce Attribute Filter ── on/off
└── Enforce Parent Filter ── on/off
│
Toolbar Settings
├── Export to CSV ── on/off
├── Shrink to Fit ── on/off
└── Bulk Actions ─── on/off
Save the Type Widget.
For a Report Widget:
Set Widget Category to Report. The fields differ from Dashboard — and vary further depending on the report type (Pie Chart, Table, Pivot, etc.).
| Field | Description |
|---|---|
| Widget Name / Display Name / Type | Same as Dashboard |
| Query Definition | Optional — attach if you need filtered data |
| Show As | Report format: Pie Chart, Bar Chart, Table, Pivot, etc. |
| Definition | Standard or Custom |
| Valid For | Cache duration for report data |
| Chart Title / Show Title | Display title settings |
After creation — configure what's relevant for your report type:
Display Options → Precision, Grand Totals, ShrinkToFit
Export Options → Export to CSV / Excel (on/off)
Filters → Show State / Attribute / Parent filter controls to users
Group Configuration → How data is grouped (Group Name, Aggregate Type, Attribute)
Column Configuration → Columns shown in result (Column Name, Aggregate Type, Sort, Drilldown)
tip
Not all sections apply to every report type — configure only what's relevant for the format you chose in Show As.
Step 3 — Create the Home Page Template
Route: Design Studio → Page Templates → Create
| Field | Value |
|---|---|
| Template Display Name | e.g., Home - All Users |
| Template Name | e.g., HomeAllUsers |
| Template Type | Home |
| Visibility | Everyone or Specific Roles |
| Roles | (if Specific Roles) select target roles |
| Background Color | (optional) |
Click Create → Editor opens.
Step 4 — Assemble Widgets on Canvas
The editor opens with an empty Grid canvas (free-form drag & drop).
┌──────────────────────────────────────────────────────────────────┐
│ Widget Library (Left) │ Grid Canvas (Center) │
│ │ │
│ [ Search components ] │ ┌─────────────┐ ┌─────────────────┐ │
│ │ │ Dashboard │ │ Report Widget │ │
│ ▼ Type Widgets (N) │ │ Widget │ │ │ │
│ Dashboard Widget ⠿ │ │ (Step 2) │ │ (Step 2) │ │
│ Report Widget ⠿ │ └─────────────┘ └─────────────────┘ │
│ │ ┌───────────────────────────────┐ │
│ ▶ Standard Widgets (N) │ │ Tasks Widget │ │
│ • Tasks │ │ │ │
│ • Messages │ └───────────────────────────────┘ │
│ • Activity Log │ │
│ • Recently Updated │ │
│ • Rich Text │ │
│ • Text │ │
│ • Separator │ │
│ • Dynamic Form │ │
│ │ │
│ ▶ Custom Widgets (N) │ │
└──────────────────────────────────────────────────────────────────┘
Drag & drop sequence:
- Expand Type Widgets → drag your Dashboard Widget(s) onto the canvas → position and resize
- Expand Type Widgets → drag your Report Widget(s) → position next to or below dashboards
- Expand Standard Widgets → drag widgets like Tasks, Messages, Activity Log, Rich Text, Text, Separator as needed
- Expand Custom Widgets → drag any custom widgets if needed
- Resize any widget by dragging its bottom-right handle
Step 5 — Configure Settings & Publish
Click each widget on the canvas to open its Settings Panel and configure:
Per-Widget Settings Checklist
├── ✅ Title ── set display title
├── ✅ Show Title / Border ── toggle as needed
├── ✅ Visibility ── Everyone or Specific Roles
├── ✅ Roles ── (if Specific Roles) assign roles
└── ✅ Widget-specific settings:
├── Dashboard Widget → select Type Name + Widget Name (from Step 2)
├── Report Widget → select Type Name + Widget Name (from Step 2)
└── Standard Widgets → defaults usually fine
Multi-device review:
1. Design on Desktop (12 col) ──► main layout
2. Switch to Tablet (10 col) ──► review, adjust
3. Switch to Mobile (6 col) ──► review, adjust
4. Click Preview ──► verify all three
Save → Template is live for assigned roles.
Workflow B — View Page Template
Visual Overview
Step 1 Step 2 Step 3 Step 4
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ CHECK/ │ │ CREATE │ │ CREATE │ │ CREATE │
│ CREATE │───►│ TYPE │───►│ FORM │───►│ VIEW │
│ QUERIES │ │ WIDGETS │ │ │ │ TEMPLATE │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
│
▼
Step 7 Step 6 Step 5
┌──────────┐ ┌──────────────┐ ┌──────────┐
│ CONFIGURE│ │ ADD │ │ ASSEMBLE │
│ SETTINGS │◄───│ DISPLAY │◄───│ ON │
│ & │ │ CONDITIONS & | | CANVAS |
│ SAVE | | VISIBILITY | │ │
└──────────┘ └──────────────┘ └──────────┘
Step 1 — Check / Create Query Definitions
Route: Admin → Query Definitions
View templates need Relation Queries for Relation Widgets.
┌──────────────────────────────────────────────────────────────┐
│ For each relation you want to show on the View page: │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Create a Relation Query │ │
│ │ │ │
│ │ Query Type: Relation Query │ │
│ │ Associated Type: Your type (e.g., Project) │ │
│ │ Relation Filter: (required) │ │
│ │ ├── Direction: To or From │ │
│ │ ├── Relation: e.g., ProjectToTask │ │
│ │ └── Type: Related type (e.g., Task) │ │
│ │ Select Attributes: All or Specific │ │
│ │ State Filter: (optional) │ │
│ │ Attribute Filter: (optional) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Save with descriptive name: e.g., ProjectToTaskRelationQuery │
└──────────────────────────────────────────────────────────────┘
note
Relation Widgets require a Relation Query for relation filter — unlike Dashboard/Report widgets, they cannot work without one.
Step 2 — Create Type Widgets (Relation)
Route: Design Studio → Type Widgets → Create
| Field | Value |
|---|---|
| Widget Name | e.g., ProjectTaskRelation |
| Display Name | e.g., Related Diaries |
| Widget Category | Relation |
| Type Name | Your type (e.g., Project) |
| Query Definition | Required — select Relation Query from Step 1 |
After creation — configure:
Column Designer
├── Add columns (related type attributes + relation attributes)
├── Set display names, renderers, visibility
├── Configure Actions column (Navigate, Edit, Delete, etc.)
│
Filter Settings
├── Enforce query filters as needed
│
Toolbar Settings
├── Export to CSV, Shrink to Fit, Bulk Actions
Save the Type Widget.
Step 3 — Create the Form
Route: Design Studio → Forms → Create
| Field | Value |
|---|---|
| Form Name | e.g., ProjectViewForm |
| Display Name | e.g., Project Details |
| Type Name | Your type (e.g., Project) |
Click Save → Form Builder opens.
Form Builder
┌──────────────────────┬────────────────────────────────────────────────────┐
│ Components (Left) │ Containers (Center) Add Container+ │
│ │ │
│ [ Search... ] │ ┌────────────────────┐ ┌───────────────────┐ │
│ │ │ ⠿ Container A │ │ ⠿ Container B │ │
│ ▶ Attributes (N) │ │ ⠿ Field 1 │ │ ⠿ Field X │ │
│ (type attributes) │ │ ⠿ Field 2 │ │ ⠿ Field Y │ │
│ │ │ ⠿ Field 3 │ └───────────────────┘ │
│ ▶ Standard │ └────────────────────┘ │
│ Widgets (N) │ ┌────────────────────────────────────────────┐ │
│ │ │ ⠿ Container C │ │
│ ▶ Custom │ │ ⠿ Widget P │ │
│ Widgets (N) │ └────────────────────────────────────────────┘ │
└──────────────────────┴────────────────────────────────────────────────────┘
Build the form:
- Click Add Container → creates a new container section
- Click container ⚙ to configure container settings:
- Title, Visibility, Roles, Display Conditions
- Show Title / Show Border, Border Thickness / Color
- Width, Height, Background Color
- Drag attributes from left panel into a container
- Click field ⚙ to configure field settings:
- Display Name, Editor, Renderer, Help Text, Placeholder
- Display Condition, Conditional Formatting rules
- Drag Standard or Custom Widgets into containers as needed — widget settings differ from field settings
- Save the form
Step 4 — Create the View Page Template
Route: Design Studio → Page Templates → Create
| Field | Value |
|---|---|
| Template Display Name | e.g., Customer View |
| Template Name | e.g., CustomerView |
| Template Type | View |
| Type Name | Your type (e.g., Customer) |
| Visibility | Everyone or Specific Roles |
| Roles | (if Specific Roles) select target roles |
Click Create → Editor opens (Classic layout).
Step 5 — Assemble on Canvas
The View template editor has two sections:
Classic Layout Canvas
┌──────────────────────────────────────────────────────────┐
│ │
│ FORM SECTION (top) │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Drag 1 Form Widget here │ │
│ │ → Select the form you created in Step 3 │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ WIDGETS SECTION (below form) │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Drag widgets from library: │ │
│ │ │ │
│ │ • Relation Widget(s) ── from Step 2 │ │
│ │ • Attachments │ │
│ │ • Lifecycle │ │
│ │ • Messages │ │
│ │ • Activities │ │
│ │ • Workflow │ │
│ │ • Geolocation │ │
│ │ • Custom Widgets │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ACTION SETTINGS (toolbar) │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Configure: Edit, Create a Copy, Export, │ │
│ │ Annotate File, Print QR Code, │ │
│ │ Dynamic Form actions — drag to reorder │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────┘
Assembly steps:
- Drag Form Widget into the Form section → select your form from Step 3
- Drag Relation Widget(s) into the Widgets section → set Type Name & Widget Name (from Step 2)
- Drag any Standard View Widgets you need (Attachments, Lifecycle, etc.)
- Configure Action Settings — enable/disable and reorder page actions
Step 6 — Add Display Conditions
Display Conditions make the page dynamic — widgets appear/disappear based on instance data.
Where to add:
| Location | How |
|---|---|
| On form fields | Form Builder → click field → Display Conditions |
| On page widgets | Template Editor → click widget → Settings → Display Conditions |
Step 7 — Configure Settings & Publish
Widget-by-widget checklist:
For EACH widget on the canvas:
├── ✅ Title ── set display title
├── ✅ Show Title / Border ── toggle visibility
├── ✅ Visibility ── Everyone or Specific Roles
├── ✅ Roles ── assign if Specific Roles
└── ✅ Widget-specific settings ── configure as needed
├── Form Widget: select form name
├── Relation Widget: select type + widget name
└── Standard Widgets: defaults usually fine
Multi-device review:
1. Review Desktop layout
2. Switch to Tablet ──► adjust if needed
3. Switch to Mobile ──► adjust if needed
4. Click Preview ──► verify all devices
Save → Template is live.
Quick Reference — Decision Tree
Use this to decide what needs creating for any template:
START
│
▼
What template type?
│
├── HOME
│ ├── Need Dashboard Widgets? ──► Create Instance Query (optional) → Create Dashboard Type Widget
│ ├── Need Report Widgets? ────► Create Instance Query (optional) → Create Report Type Widget
│ └── Only Standard Widgets? ──► Skip to Page Template (no query/type widget needed)
│
├── DASHBOARD
│ └── Create Instance Query (optional) → Create Dashboard Type
│
├── REPORT
│ └── Create Instance Query (optional) → Create Report Type Widget
│
├── VIEW
│ ├── Need Form? (yes, always) ──► Create Form
│ ├── Need Relation Widget? ─────► Create Relation Query (required) → Create Relation Type Widget
│ └── Standard View Widgets ────► No setup needed (Attachments, Lifecycle, etc.)
│
├── CREATE
│ └── Need Form? (yes, always) ──► Create Form → Create Page Template
│
└── EDIT
└── Need Form? (yes, always) ──► Create Form → Create Page Template
Dependency Map
What references what — so you know the build order:
Query Definition
└──► Type Widget (uses query for data)
└──► Page Template (places widget on canvas)
Form
└──► Page Template (places form as widget)
Roles
├──► Page Template (template-level visibility)
└──► Widget (widget-level visibility)
Always build bottom-up: Queries → Type Widgets / Forms → Page Templates
Common Pitfalls
| Mistake | Consequence | Fix |
|---|---|---|
| Creating template before Type Widgets | Can't find widgets in library | Create Type Widgets first |
| Skipping Relation Query for Relation Widget | Widget won't save — query is required | Create Relation Query first |
| Setting visibility to "Specific Roles" but forgetting to add roles | No one sees the template | Add at least one role |
| Designing only on Desktop | Tablet/Mobile layouts may look broken | Review all 3 devices before saving |
| Deleting a form used by templates | Templates show broken form reference | Check template references before deleting |
| Same widget name across types | Confusion when selecting in template | Use TypeName + Purpose naming: e.g., CustomerActiveDashboard |
Deep Dive References
| When You Need More Detail On | Read | What You'll Learn |
|---|---|---|
| First-time setup, platform setting | Enabling Design Studio | How to Enable, What Changes |
| Module overview & access | Admin Configuration | Three Modules, Recommended Order |
| Query types, filters, data options | Query Definitions | Query Types, Attribute Selection |
| Dashboard/Report/Relation widgets | Type Widgets | Column Designer, Filter Settings |
| Form layout & field settings | Forms | Containers, Field Settings, Display Conditions |
| Making titles/labels update per record or user | Dynamic Text | Token syntax, supported roots, every surface it works on |
| Canvas editor & device design | Page Template Editor | Editor Interface, Multi-Device Workflow |
| File markup on a View page | Annotate File Action | Action Settings, Annotator Tools, Annotator Data Function |
| End-user rendering & behavior | Client-Side Experience | All Page Types, Role-Based Personalization |
| Common issues & fixes | FAQ & Troubleshooting | Troubleshooting, API Reference |