Skip to main content

Home Layout (Preview)

Preview Feature: The Home Layout Designer Studio is currently available as a preview for administrators. Features and UI may change before general availability.

Layout Configurations

Configure web, tablet, and mobile-facing page layouts for operational users. Positioning: A configurable Design Studio capability that helps teams shape operational applications without rebuilding screens for every process variation.

Overview

Layout Configurations in Protrak Design Studio allow administrators and implementation teams to decide how information, forms, widgets, and actions are presented across user journeys. The capability covers home pages, dashboards, create/edit/view pages, and report layouts, while honoring device-specific presentation needs for desktop, tablet, and mobile usage. The capability is designed for configurable enterprise applications where different roles, teams, or process stages need different screens, without requiring a separate custom screen build for every tenant or use case.

Capability Scope​

Home layout​

Grid-based placement of widgets with drag-and-drop arrangement, resize handles, full-width options, tab or dropdown template display, and role-wise template selection.

Dashboard layout​

Vertical ordering of dashboard, report, and custom widgets with page settings such as create button visibility, view modes, and configurable auto-refresh.

Create/Edit/View layout​

Form-centric layouts with configurable details area, tabs for related widgets in view mode, page actions, auto-save visibility, and support for standard or custom widgets where applicable.

Report layout​

Report widgets rendered through configured views such as tabular reports, charts, pivot views, and other supported report presentations.

Device layouts​

Separate desktop, tablet, and mobile configuration behavior, with mobile app experiences optimized for vertical display.

Use Cases​

  • Create a role-specific home page where supervisors see monitoring widgets, while field users see assigned work and quick-entry actions.
  • Configure a dashboard view for live operational tracking where the screen remains open and refreshes at selected intervals.
  • Design create/edit/view pages differently for office users and field users while keeping the same underlying business object.
  • Present report layouts as charts, grids, or pivots depending on whether the audience needs analysis, review, or execution support.
  • Optimize the same process for desktop planning and mobile execution by using device-specific layout behavior.

Core Capabilities​

  • Drag and arrange widgets on home layouts, including odd-numbered widget combinations and resized containers.
  • Configure page templates per layout type and control whether templates are shown as tabs or dropdowns.
  • Apply role-based and condition-based visibility to templates, widgets, and content blocks.
  • Use device-wise configuration to shape desktop, tablet, and mobile presentation from the same design model.
  • Configure details forms, field containers, renderers, editors, and attribute visibility inside create, edit, view, and quick-edit modes.
  • Control page actions such as edit, create, copy, export, print QR code, annotate file, and auto-save visibility based on the page context.
  • Enable auto-refresh for monitoring dashboards that need periodic updates while the page remains open.

Use Cases​

  • A production manager can monitor active jobs on a dashboard without manually refreshing the screen.
  • A quality team can see different form sections or actions based on inspection stage and user role.
  • A mobile user can complete a compact vertical form without navigating through unnecessary desktop-style sections.
  • A tenant administrator can adjust page composition when process ownership changes, without requesting a new custom screen.

Configuration Model​

Layout configuration works through page templates, forms, widgets, and page settings. A template defines the structure of a page for a role, use case, or type. Within that template, administrators place configured widgets, forms, attributes, and actions. The runtime then renders the relevant layout according to the selected page, device, role, and display conditions.

How It Works​

  1. Accessing the Designer Studio

    • Navigate to the Admin section and select "Home Layout Designer Studio" (Preview).
    • Only users with administrator privileges can access this feature.

  2. Designing a Layout

    • Select a device type (Desktop, Tablet, Mobile) to start designing for that form factor.
    • Drag widgets from the Widget Library onto the canvas. Resize and move them as needed.
    • Configure widget properties (where applicable) using the settings panel.
    • Use the live preview to see how the layout will appear to end users.

  3. Saving and Assigning Templates

    • Save your layout as a template. You can create multiple templates for different scenarios.
    • Assign templates to user roles to control which users see which Home Layout.

  4. Previewing the Home Layout

    • Use the Preview button to see the Home page as it will appear to users, including on different devices.
    • The Home Layout will be rendered for users once the feature is enabled and a template is assigned to their role.

Important Notes​

  • Preview Status: This feature is in preview. Expect changes and improvements before general release.
  • Feedback: Please provide feedback to help us improve the Home Layout Designer Studio before GA.

FAQ​

Q: Who can access the Home Layout Designer Studio? A: Only administrators with the appropriate permissions can access and configure Home Layout templates.

Q: Will changes go live immediately? A: Changes are saved in templates. The Home Layout is rendered for users only when a template is assigned and the feature is enabled.

Q: Can I revert to the old Home page? A: Yes, the preview feature can be disabled, and users will see the classic Home page experience.

For more information or to provide feedback, contact the product team or use the in-app feedback option.