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.
Code (SDK)
//...
fun createSampleWorkflowScreenView(): PgScreenView.TemplateV2.WorkflowView {
val textFieldTop = createSampleTextField()
val textFieldMiddle = createSampleTextField()
val buttonLeft = createSampleButton()
val buttonRight = createSampleButton()
return PgScreenView.TemplateV2.WorkflowView.PgWork2Btn2T1(
referenceId = "myWorkflowScreenView",
titleText = "Title on top of the screen"
fieldTop = textFieldTop,
fieldMiddle = textFieldMiddle,
button1 = buttonLeft,
button2 = buttonRight
)
}
//...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.
Code (SDK)
//...
fun createSampleListScreenView(): PgScreenView.TemplateV2.ListView {
val firstProduct = PgListViewItem.PgListT1Item(
referenceId = "product1",
mainText = "Product 1"
)
// You need to explicitly disable onSingleClick action
// if you don't want to receive item click event
val secondProduct = PgListViewItem.PgListT1Item(
referenceId = "product2",
mainText = "Product 2",
underlineText = "Expired product",
onSingleClick = PgScreenAction.None
)
val productGroupItem = PgListViewItem.PgListT1Item(
referenceId = "productGroup1",
mainText = "Product Group 1",
underlineText = "Group of products",
trailingIcon = PgScreenResources.ListItemTrailingIcon.Arrow,
trailingText = "5 items",
onSingleClick = PgScreenAction.Notify
)
return PgScreenView.TemplateV2.ListView.PgListT1(
referenceId = "myListScreenView",
header = "My products",
items = listOf(
firstProduct,
secondProduct,
productGroupItem
)
)
}
//...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.
Code (SDK)
//...
fun createSampleNotificationScreenView(): PgScreenView.TemplateV2.NotificationView {
return PgScreenView.TemplateV2.NotificationView.PgNtfT2(
referenceId = "myNotificationScreenView",
tagline = "Success!",
icon = PgScreenResources.NotificationIcon.Success,
primaryButton = createSampleButton()
)
}
//...