Introduction
What is Design Studio?
Feature Overview
Design Studio is a centralized configuration workspace that enables business users and administrators to create, configure, and manage application designs without extensive development effort. It provides an intuitive interface for defining layouts, configuring UI components, managing business rules, and organizing application elements to meet specific business requirements.
The feature is designed to simplify the creation and maintenance of configurable application screens by allowing users to visually design and modify interfaces, reducing dependency on technical teams for routine configuration changes.
Design Studio serves as a low-code configuration environment where users can:
- Create and manage application designs.
- Configure layouts and screen components.
- Define properties and settings for individual elements.
- Organize reusable design components.
- Configure Protrak for Your Business.
- Create application experiences that reflect your processes, roles, and operational priorities.
- With Protrak Design Studio, organizations can configure forms, dashboards, reports, layouts, and reusable components through a centralized low-code environment.
- Build focused user experiences. Respond faster to change. Keep applications aligned with the business.
- Preview changes before publishing.
- Save, update, and maintain multiple design configurations.
- Standardize application design across different business processes.
By providing a visual configuration experience, Design Studio improves consistency, usability, and maintainability while accelerating the delivery of new business requirements.
What You Can Configure
Home Layouts
Create structured home pages that bring together the most relevant operational information for each user group. Administrators can add dashboards, reports, standard widgets, custom widgets, and dynamic forms using drag-and-drop configuration. Widget width, position, and sequence can be adjusted to create a practical workspace.
Home layouts can be configured to display:
- Operational dashboards
- Reports and charts
- Dynamic forms
- Notifications
- Task-related information
- Custom widgets
- Frequently used business information
The result is a focused landing experience aligned with the user’s operational responsibilities.
Dashboards
Configure dashboards that help teams track activities, records, statuses, exceptions, and performance indicators. Design Studio allows administrators to define:
- The data displayed in each dashboard
- Column names and display labels
- Column visibility and width
- Sorting and sequencing
- Conditional formatting
- Filters and query conditions
- Bulk actions
- Export options
- Toolbar behaviour Dashboards can be added to different page templates and reused across multiple user experiences.
Business Forms
Design configurable forms for creating, viewing, and updating business records. Forms are created using flexible containers that organize attributes and components into logical sections. Administrators can decide which information users see, where it appears, and how it behaves. Forms can include:
- Business attributes and fields
- Attachments
- Rich text
- Dynamic forms
- Section titles
- Separators
- Custom widgets
- Relation widgets
- Supporting instructions and help text
Separate configurations can be created for Create, Edit, and View experiences, allowing each interaction to be optimized for its specific purpose.
Reports and Visualizations
Configure reports that convert operational data into meaningful information for users and decision-makers. Design Studio supports multiple report formats, including:
- Tabular reports
- Bar charts
- Pie charts
- Line charts
- Pivot-style reports
- Grouped reports
- Drill-down views
- Custom report configurations
Administrators can configure filters, grouping, totals, precision, export options, column settings, and display preferences. Reports can then be organized into reusable report templates for different roles, teams, or business processes.
Reusable Widgets
Create reusable interface components that can be used across multiple layouts and templates. Design Studio supports different widget categories, including:
- Dashboard widgets
- Report widgets
- Relation widgets
- Standard widgets
- Custom widgets
- Dynamic Form widgets
- Activity widgets
- Message widgets
- Attachment widgets
- Lifecycle widgets
A widget can be configured once and placed in multiple page templates, reducing duplication and improving consistency.
Page Templates
Page Templates define how forms, widgets, dashboards, and reports are assembled into a complete user experience. Administrators can create different templates for:
- Home pages
- Dashboard pages
- Create pages
- Edit pages
- View pages
- Report pages
Templates make it possible to present different layouts to different users while reusing the same underlying components.
For example, an administrator, supervisor, and site user may work with the same business record but see different information, actions, or supporting widgets.
Query-Based Data Configuration
Design Studio uses reusable Query Definitions to control the data shown in dashboards and reports. Queries can include:
- Attribute-based filters
- State or status filters
- Parent-child filters
- Type-specific conditions
- Enforced filters
- User-selectable filters
Centralizing filter logic within Query Definitions helps improve consistency and makes configurations easier to maintain.
Role-Based Experiences
Show the Right Information to the Right Users
Not every user needs the same screen, data, or actions. Design Studio enables organizations to configure page templates and components based on user roles and display conditions.
This can help create tailored experiences for:
- Administrators
- Supervisors
- Project managers
- Quality teams
- Operations teams
- Site users
- Department-specific users
- Management and leadership teams
Role-based layouts reduce screen complexity and help users focus on the information and actions relevant to their responsibilities.
Visual Configuration with Drag and Drop
Design Studio provides a visual approach to assembling application pages. Administrators can select components, place them within a layout, and adjust their positioning without manually coding each screen.
Configuration options include:
- Drag-and-drop placement
- Horizontal and vertical arrangement
- Widget width and height
- Component ordering
- Background settings
- Text alignment
- Font and display settings
- Section titles
- Visual separators
- Conditional formatting
This makes application configuration more accessible to functional administrators while providing the flexibility required for complex business processes.
Standardize Without Limiting Flexibility
Design Studio helps organizations establish consistent design patterns across applications. Reusable widgets, forms, queries, and templates can be used to create standardized experiences while still allowing variations for specific roles, processes, departments, or customers.
This supports:
- Consistent screen structures
- Common design patterns
- Reusable configurations
- Centralized administration
- Reduced duplication
- Easier maintenance
- Controlled customization
- Faster rollout of similar processes
Organizations can maintain governance without forcing every team to use an identical interface.
Adapt Applications as Business Needs Change
Business requirements can change because of new operating models, process improvements, customer requirements, compliance needs, or organizational growth. Design Studio helps administrators update application experiences through configuration.
Teams can introduce:
- New fields
- Updated forms
- Revised layouts
- Additional reports
- New dashboard views
- Role-specific experiences
- New widgets
- Modified display conditions
Configure Protrak for Business
Create application experiences that reflect your processes, roles, and operational priorities.
With Protrak Design Studio, organizations can configure forms, dashboards, reports, layouts, and reusable components through a centralized low-code environment.
Build focused user experiences. Respond faster to change. Keep applications aligned with the business.
Get Started
Choose your path based on experience level:
| Path | Start Here | Time to First Template |
|---|---|---|
| Quick Start | Design Studio Workflow | ~15 min |
| Detailed | Enabling Design Studio → Admin Configuration | ~45 min |
Why Design Studio?
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Visual │ │ Responsive │ │ Reusable │
│ │ │ │ │ │
│ Drag & drop │ │ Desktop, │ │ Define once, │
│ widgets on a │ │ Tablet, Mobile │ │ use everywhere │
│ live canvas │ │ — independent │ │ — update once, │
│ No code needed │ │ layouts each │ │ all templates │
│ │ │ │ │ reflect change │
└──────────────────┘ └──────────────────┘ └──────────────────┘
┌─────── ───────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Role-Based │ │ Live Preview │ │ Multi- │
│ │ │ │ │ Template │
│ Template-level │ │ See exactly │ │ │
│ + widget-level │ │ what users │ │ Multiple layout │
│ visibility │ │ will see before │ │ variants per │
│ control │ │ publishing │ │ page type │
└──────────────────┘ └──────────────────┘ └──────────────────┘
Key Capabilities at a Glance
For Administrators
| Capability | Description |
|---|---|
| Visual Canvas Editor | Drag widgets onto a grid-based canvas, resize and reposition freely |
| Multi-Device Design | Separate layouts for Desktop (12 col), Tablet (10 col), Mobile (6 col) |
| Widget Library | Standard widgets, type-specific dashboards, reports, custom widgets, forms |
| Template Management | Create, update, clone, delete page templates for every page type |
| Role-Based Visibility | Control who sees which templates and individual widgets |
| Live Preview | Preview across devices before publishing |
| Undo / Redo | 10 levels of change history |
| Save & Save As | Update existing templates or create copies |
For End Users
| Capability | Description |
|---|---|
| Responsive Layouts | Pages automatically adapt to screen size |
| Personalized Experience | See only templates and widgets assigned to your role |
| Template Switching | Switch between available templates on Home, Dashboards, Reports, Create/Edit/View |
| Consistent UI | Uniform design language across all page types |
What Can You Design?
Design Studio supports templates for six page types:
| Page Type | Description | Layout Mode |
|---|---|---|
| Home | The main landing page after login | Grid |
| Dashboard | Type-specific dashboard showing key metrics and data | Classic |
| Report | Type-specific report views with tables, charts, and pivots | Classic |
| Create | Instance creation form layout | Classic |
| Edit | Instance editing form layout | Classic |
| View | Instance detail view layout | Classic |
Layout Modes: Home uses a free-form Grid canvas. All other template types use a structured Classic layout. For Create, Edit, and View templates, form layouts are designed separately via Forms — a grid-based editor for full control over data entry.
Architecture Overview
Design Studio is composed of three primary modules in the Admin panel:
Design Studio
├ ── Page Templates → Visual layout builder for all page types
├── Type Widgets → Reusable dashboard and report widget definitions
└── Forms → Drag-and-drop form builder for type-specific forms
Each module has its own grid view for listing, creating, editing, and deleting items — along with a dedicated editor interface.
How It All Connects
┌──────────────────────────────────────────────────────────┐
│ ADMIN PANEL │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌────────────────┐ │
│ │ Page │◄─┤ Type │ │ Forms │ │
│ │ Templates │◄─┤ Widgets │ │ Builder │ │
│ └──────┬───────┘ └──────────────┘ └───────┬────────┘ │
│ │ │ │
│ │◄───────────────────────────────────┘ │
│ │ Forms referenced by Create/Edit/View │
└─────────┼────────────────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────┐
│ CLIENT APPLICATION │
│ │
│ Home Page │ Dashboards │ Reports │ Create | Edit | View │
│ │
│ Templates rendered as role-based responsive layouts │
└──────────────────────────────────────────────────────────┘
- Page Templates are the core — they define what each page looks like
- Type Widgets (Dashboard / Report / Relation) are built separately and placed inside Page Templates
- Forms are built separately and placed inside Create, Edit, and View templates
- Custom Widgets can be placed in any template
- The client app fetches and renders templates with role-based visibility at runtime
Quick Navigation
| Section | What You'll Learn | Best For |
|---|---|---|
| Design Studio Workflow | Step-by-step recipe to build a template from scratch | Quick start |
| Enabling Design Studio | How to activate Design Studio for your tenant | First-time setup |
| Admin Configuration Guide | Overview of all three modules and where to start | Understanding structure |
| Page Template Editor | Using the visual canvas editor in detail | Building templates |
| Type Widgets | Configuring Dashboard, Report, and Relation widget definitions | Data widgets |
| Forms | Building form layouts for Create, Edit, and View templates | Form design |
| Query Definitions | Setting up queries that power Type Widget data | Data filtering |
| Client-Side Experience | What end users see and how templates render | User perspective |
| FAQ & Troubleshooting | Common questions and solutions | Problem solving |