Screen view (Templates v2)
A screen view represents a single page of visual content on MAI. It defines what is shown to the worker and how that content is visually structured. Each screen can include up to three screen views, though only one is visible at a time. When multiple screen views are present, the worker can swipe left or right to switch between them.
Screen views are template-based, meaning they are created using predefined templates. Templates define the screen view layout and content structure.
Templates make it easy to standardize how information is presented, while still allowing flexibility in how content is populated dynamically from the application.
Templates v2
To create screen views for MAI, Templates v2 must be used. This is a library of standardized, predefined templates that define how content is presented and what data is required to render a screen view.
Templates v2 are grouped into three types:
Workflow view – intended for displaying key information during specific steps in the workerʼs process, using a structured layout based on screen components like text fields and buttons.
List view – designed to present scrollable lists of templated items with consistent formatting and built-in interaction options.
Notification view – meant for informing the worker about an event, state, or status using a combination of text, predefined icons (scan, success, error, warning, or info), and response buttons.
Each template defines its own layout rules and accepted parameters. Some templates expect structured components, while others rely on simpler inputs such as plain text and predefined icons. Once a template is selected, the application must provide all required data according to that template's specification.
Note
Although all templates can be set in both portrait and landscape orientations, not all templates are recommended to be used in all orientations. See Template library for more details.
All screen views within a single screen must use the same template type. The only exception is the Notification view, which is always standalone and cannot be combined with other views.
Workflow view templates
Workflow view templates are designed to guide workers through specific steps in their operational process. They provide a structured and informative layout that presents the key data needed for each step clearly and efficiently.
Layout - Workflow views use a grid-based layout where each cell holds a screen component, such as text fields or buttons.
Components - Each template defines which components appear in which grid cells, ensuring a consistent and predictable interface.
Purpose - These templates help workers understand what action is required next by displaying relevant information and interactive elements tied to the workflow step.
Flexibility - While the layout and component placement are predefined by the template, the components themselves are flexible enough to make the screen dynamic and interactive by allowing different content, states, and behaviors.
List view templates
List view templates are designed to display scrollable lists of items, providing workers with an easy way to browse and select from multiple entries.
Layout - The screen consists of a predefined header section and a scrollable list area that can contain up to six items.
Items - Each list item follows a predefined templated structure, including elements such as main text, underline text, trailing icon, trailing text, and customizable click behavior.
Purpose - These templates help present collections of data in a consistent and easy-to-navigate format, ideal for selecting options, reviewing lists, or confirming multiple entries.
Constraints - Although each List view is limited to six items for clarity and usability, multiple list screen views (up to three per screen) can be combined to present up to 18 items within a single screen.
Notification view templates
Notification view templates are designed to inform the worker about an event, state, or status in a clear and concise manner. They provide important messages with optional visual and interactive elements to ensure the worker notices and can respond appropriately.
Content - Notifications typically include a tagline and can combine text messages, one predefined icon (scan, success, error, warning, or info), and 1-2 response buttons.
Purpose - These templates communicate critical information or alerts and optionally allow the worker to take immediate action via response buttons.
Structure - Notification views follow predefined layouts. Depending on the selected template, the content can be made up of simple text and icon parameters, or include interactive elements like buttons.
Usage - Notification views stand alone and cannot be combined with other screen views on the same screen.
To make a Notification temporary, a Screen Timer can be assigned to automatically return to the previous screen after a defined amount of time. See Screen Timer for more information.
Screen components
Screen components are the building blocks used in certain screen view templates — primarily in Workflow views and Notification views with buttons. They define the individual elements that appear on the screen and how users can interact with them.
Currently, MAI supports the following screen components:
Screen components have a well-defined structure that ensures consistency across templates, yet they offer customization options that allow the integrator to tailor content and behavior—making the overall template more effective in delivering the necessary information and collecting necessary input by enabling a more interactive approach.
Text Field
The Text Field is a versatile screen component used to display textual information or accept user input. It consists of two main parts:
Header – A fixed text label that describes the purpose or category of the field.
Content – An auto-scalable text area that shows the main content of the field. It can be modified using an assigned input method.
Key Features:
Visual appearance – The style is controlled by the state of the Text Field.
Customization – Integrators can tailor the text content and state to fit workflow requirements, enabling clear and interactive data presentation.
Interaction – Interaction depends on the assigned input method.
Placement – Text Fields appear within screen views, mainly in Workflow templates. Their position is defined by the selected template.
State
Text Fields can be styled using predefined visual states that help communicate the current status of the field to the worker. States apply a small icon in front of the header to draw attention or provide feedback, making them especially useful for guiding the worker's focus or indicating validation results within a workflow.
Each state can optionally be highlighted, which makes the styling more prominent, by filling the background with color.
Available states:
No State (default) – Neutral appearance with no background, border, or icon.
Focused – Indicates the next step in the workflow with a blue play icon. When marked as highlighted, the background becomes blue.
Success – Shows a green checkmark icon to signal that the step was completed successfully. When marked as highlighted, the background becomes green.
Error – Displays a red cross icon to indicate that the step finished with an error. When marked as highlighted, the background becomes red.
Warning – Uses a yellow exclamation mark icon to indicate a step has completed with warnings. When marked as highlighted, the background becomes yellow.
Input method
Input methods specify how workers can enter or edit data in a Text Field on MAI. When an input method is assigned, selecting the field opens a corresponding input interface designed for efficient data entry.
When an input method is assigned, a small icon appears in the text field to show it can be edited (e.g., pen icon).
Once the worker finishes inputting data, the updated content is sent back to the system, triggering a screen data updated event. This event notifies the integrator about the change and includes a reference ID that identifies which Text Field was modified. Because multiple Text Fields may exist on the screen, assigning a unique reference ID to each editable Text Field is essential. This allows the integrator to track exactly which fieldʼs content has changed and respond accordingly.
Type of input methods:
No Input (default) – No input method is assigned. The field is read-only and cannot be edited by the worker.
NumWheel – A rotary wheel input that allows the worker to select a number using three rotating wheels, ideal for numbers up to 999.
Supports an optional title displayed above the wheel.
Can pre-fill the input with an initial value
NumPad – A numeric keypad for entering longer numbers, supporting up to 22 digits (positive numbers only).
Allows setting an optional initial value to pre-fill the input.
Supports an optional hint message shown when the input is empty to guide the worker.
Integrators choose the input method based on the expected input type and workflow needs, ensuring efficient and accurate data entry.
On-screen button
The button component is an interactive element displayed on the screen that workers can tap to trigger specific actions. These on-screen buttons are part of the screen view content.
Key features:
Visual appearance - The style and color of the button are defined by the selected template.
Customization - Integrators must set the button text.
Interaction - By default, tapping the button triggers a Notify action, which sends a screen component clicked event to the integrator with the buttonʼs custom reference ID (set by the integrator to uniquely identify which component was pressed). Other screen actions can be assigned instead of Notify.
Placement - Buttons appear only within screen views, mainly in Workflow and Notification templates. Their placement is defined by the selected template.
Limitations - The number of buttons visible at once is constrained by the selected template.