Build a Skedulo Plus form with Form Builder components

Use the Form Builder to create a custom mobile form for the Skedulo Plus mobile application using components.

Overview

After you have created a Skedulo Plus mobile form in the Skedulo web app Form Builder, you can add a maximum of 100 components to the form to capture data from your mobile users.

This document provides instructions for adding components to build these types of mobile forms:

  • Basic data collection form
  • Advance form with data mapping

Prerequisites

Add components to basic forms

  1. Open the form you’ve created or a draft form that you have previously created.

  1. Click the Form builder tab to open the editor.

  2. Click Add new component to open the list of available components. Add component to form

  3. Click the plus icon next to the component you want to add to the form. Add read-only component to form

    This opens the configuration panel for the component. For a complete list of Form Builder components and their properties, see Form Builder components.

  4. Complete the Component details form.

In this example, we will add a read-only field to include some context in the form, a text input field to capture a customer’s name, a picklist to select a product, and a date picker to capture the date of the customer’s order:

a. Read-only component:

  • Heading: Order details
  • Text to display: Please complete the form to place an order. Read-only component example in Skedulo Plus

b. Text input component:

  • Label: Customer name
  • Keyboard type: Default
  • Placeholder text: Customer name
  • Required: True
  • Multi-line: False
  • Validation rules: Leave unchanged Text input component example in Skedulo Plus

c. Drop-down component:

  • Label: Product
  • Placeholder text: Select a product
  • Required: True
  • Add drop-down choices: Product A, Product B, Product C Picklist component example in Skedulo Plus

d. Date picker component:

  • Label: Order date
  • Required: True Date picker component example in Skedulo Plus
  1. Click Save.

Add components to advance forms with data mapping

If you are creating an advanced form with data mapping, you need to select a custom field to associate with the component. Therefore, ensure you have a record of the custom object and its fields that you would like the form to map to, including the field names and types.

To add UI components to the form, do the following steps:

  1. Open the form you’ve created or a draft form that you have previously created.

  2. On the Form Details page, switch to the Form Builder tab.

  3. Click Add new component to open the list of available components.

    Add new component button

  4. Select the component type that you want to add to the form.

    Add read-only component to form

    This opens the configuration panel for the component. Refer to Form Builder components.

  5. After adding a component, the Component details configuration panel displays.

    Component details panel

  6. From the Field mapping drop-down, select the custom field you want to map.

  7. Enter a Label and complete the other fields, as required, according to the component type. For a complete list of Form Builder components and their properties, see Form Builder components.

  8. Click Save.

For drop-down or multi-dropdown components, when you map them to a picklist/multi-picklist field, the drop-down choices are automatically populated from the picklist values of the selected field. These choices cannot be edited directly from the Form Builder page; instead, you need to modify them in the Data management > Objects & fields settings.

Dropdown or multi-dropdown component example

Re-order components

You can re-order the components in the form by dragging the component re-order iconRe-order grab and drag icon and dropping them into the desired order.

Re-order components in the Form Builder

The next step is to install the form. For details on how to do this, please see the article on installing and uninstalling forms.