Skip to main content
Skip table of contents

Step 3: The Page Builder

After configuring the Check-in / Check-out Pages, click the Next button on the top navigation bar of the wizard. Doing so takes you to the third step of the process: using the Builder to create the dynamic pages and subpages you’d like to add to the mobile workflow template.

Builder Layout NEW (25.6)

The builder is composed of a few different sections (see image below) which we will refer to in the pages that follow:

  1. Page Panel: This section shows the dynamic pages and subpages in the task. Clicking on a page from this panel opens the Mobile Canvas associated with that page.

  2. Components List: This section displays a list of mobile components that can be dragged to the Mobile Canvas of the selected dynamic page/subpage. This list is also searchable using the search bar.

  3. UI Toggle: Allows you to switch between previewing the task as a Web Task (how it will look in the sidepanel using the Web App) and a Mobile Task (how it will look on the mobile app).

  4. Canvas: This section shows a preview of what the page will look like to technicians viewing the page from the mobile app or from the web app – depending on which UI toggle is selected. Click and drag components from the Component List here to build your page.

  5. Configuration Panel: This section appears when you either double-click a component that has been added to the Mobile Canvas or when you click the “Edit” icon that appears after selecting a component.

Builder - Sections.png

Editing Basics

In-line Text Editing and Editing Page Names

When creating a new task, the Builder will automatically generate an initial page called “Page 1”. To edit the page name in-line, simply click on the name in mobile canvas to bring up the text editor. In fact, most of the text fields associated with the components can be edited by double-clicking the text from the canvas and editing the text in-line.

Certain fields – such as answer options for the Single Select component – must be edited from the configuration panel.

Builder - Edit Text Fields.png

Managing Pages

Dynamic pages and subpages are managed from the Page Panel where you can perform the following actions:

  • Add a new dynamic page: To add a new dynamic page, click the “+” button at the top right of the panel.

  • Delete a dynamic page: To delete a dynamic page, click the “delete” button which becomes visible once the page is selected.

  • Re-order pages: To change the order of a dynamic page, click the “up” and “down” arrows which become visible once the page is selected.

Adding Components to a Page

To add a component to a page, do the following:

  1. Click and hold the component in the Component List that you wish to insert

  2. Drag your cursor to the place on the Mobile Canvas where you wish to insert it. Blue “helper” boxes will appear on the canvas to indicate the location where the component can be inserted.

  3. Release your mouse to drop the component

Builder - Drag and Drop.png

Managing Components on a Page

Components can also be copied, deleted, and re-arranged after they have been added to the Mobile Canvas:

  • Duplicate a component: To duplicate a component on a page, click the “Copy” button which becomes visible once the component is selected from the Mobile Canvas.

  • Delete a component: To delete a component from a page, click the “delete” button which becomes visible once the component is selected from the Mobile Canvas.

  • Re-ordering components: To change the order of components on a page, click the “up” and “down” arrows that become visible once the component is selected from the Mobile Canvas.

Design Mode vs. JSON Mode

Advanced users can view and edit the JSON code associated with the mobile workflow by clicking the JSON button at the top of the canvas. Doing so opens a JSON editor, allowing developers to inject custom code and leverage more advanced configurations. To switch back to drag-and-drop builder (“Design” mode), click the Design button.

In order to view the JSON editor in the Task Builder, the Entity Config “enableTaskBuilderJsonEditor” must be set to “true”. This is done by navigating to the Admin App > Org Config module and editing the “enableTaskBuilderJsonEditor” record. JSON editing is for advanced users only, so if you don’t see the JSON button and wish to access it, please contact your administrator to make the change.

WARNING: Changes you make to the JSON are automatically saved, so it is not recommended that you use JSON mode if you are not familiar with it. Changes you make to the JSON code will be reflected in Design mode where possible.


Component List

The Component List displays a list of mobile components that can be dragged onto the Mobile Canvas of the selected dynamic page/subpage. The table below lists the components currently supported by the Builder.

For detailed instructions on how to configure each component, click on the hyperlink of the component or navigate to the respective component’s page.

Address

Search Google Maps and capture an address or drop a pin at a specific lat/long on a map and store the address and coordinates in the system.

Components Overview - Address.png

Barcode (and QR codes)

The Barcode component allows you to scan barcodes and QR codes of assets and inventory instead of having to input the codes manually.

Components Overview - Barcode.png

Checkboxes

Use this component to select multiple answers from a list of answer choices.

Components Overview - Checkboxes.png

Date & Time

This component captures the date and/or time. Tapping on it brings up a calendar and a clock popup. The time displayed to the user will be in the corresponding timezone and locale of the user's device.

Components Overview - Date & Time.png

Decimal Input Number

A field that takes only numbers as an input. Rules can be set to define the number of integers required and to mandate a minimum and maximum value for the number being entered.

Components Overview - Decimal Number Input.png

Divider

The Divider component is a UI component that can be used to help separate and organize components within a page.

Components Overview - Divider.png

Dropdown

The dropdown component allows mobile users to select a single value from the list of options.

Components Overview - Dropdown.png

File Upload

Use this component to upload files and other documents.

Components Overview - File Upload.png

Image

Use this component to display a specific, read-only image to the user (configured by entering the URL of the image). Typically used to provide instructions or guidance, this differs from the “Photo” component, which asks the user to take a photo.

Components Overview - Image.png

Paragraph Text

Use this component to display formatted, read-only text to the user. Typically used to provide instructions or guidance, this differs from the “Text Input” component, which captures text entered by the user.

Components Overview - Paragraph Text.png

Photo

Photo components are used to capture one or more photos from the user’s mobile camera or device gallery.

Components Overview - Photos.png

Signature

Use this component to capture a signature (i.e. a customer’s signature) using the touch screen of your mobile device.

Components Overview - Signature.png

Single Selection

Use this component to select a single option from a list of options. It works similarly to the dropdown component.

The best practice is to use the Single Select component when there are only a few options available for the user to choose from.

Components Overview - Single Select.png

Subpage

Use Subpages to split your task into distinct, configurable pages. You can configure the subpage card to show varying levels of detail by showing/hiding different elements in the card (i.e. show/hide the progress bar, image, subheader, etc.).

Adding a Subpage component to your layout automatically generates a corresponding Subpage (a child page) to the builder, which can be configured as if it were a blank page.

Components Overview - Subpage.png

Text Area

Use this component to capture a block of text spanning more than one line. Great for capturing comments.

Components Overview - Text Area.png

Text Input

Use this component to capture a small block of text spanning a single line or less.

Components Overview - Text Input.png

Video

Video components are used to capture one or more videos from the user’s mobile camera or device gallery. Videos stored on the platform for Task Review are converted to .MP4 format.

Components Overview - Videos.png

After completing Step 3, continue to Step 4: Translations

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.