Your first mobile form, part 1

This tutorial will walk you through the creation, publication, and data management of your very first Mobilengine mobile form.

Mobilengine mobile forms are the user interface to the mobile workflow solution that you create. You send a mobile form to your users' mobile device because you want to display data to them and/or collect input from them and the services that run on their devices. The forms themselves do not process the data that the user submits with them.

This very first mobile form is the vehicle inspection form that drivers of the fictional Rocky Jupiter Transport Company must fill in and submit at the start of every working day; the company requires the drivers to check that their trucks are operational and report the problems they find before they start their rounds.

The finished form will have three main parts:

a dynamically updating list of available trucks

that the driver can choose from
a list of the parts of the selected truck

so the driver can report and submit photos of any problems with the truck,
and a signature section

so that the driver can sign off on the form.

When you are done, you will be able to

insert a variety of controls (text boxes, dropdown menus, checkboxes, tables, photo controls, etc.) into a form,
move parts of the form into popups to tidy up the UI,
add validation to prevent a user from submitting a form without adding input on the required controls of the form

and, most importantly, to

make elements of your form and their values dynamically dependent on user input and external reference documents.

You can download all the solution artifacts that you'll be creating in this part of the tutorial right here.

This is what the form that you’ll be making will look like on the drivers' phones.

You'll call the driver by name (1). It's common courtesy.

The driver will have to pick a truck for the day from a list that you build for him or her out of up-to-date reference data (2).

The company wants the driver to check that the truck is OK before starting the day. You'll give them a list of all the important parts of the truck, grouped by vehicle region for ease of use (3).

For feedback, you'll include a dynamically updating bar chart to represent the car parts that the driver marked OK and the car parts that were faulty (4).

Rocky Jupiter have a bar code on each of their truck to identify them. The driver needs to scan it with the mobile device. (5)

Before he or she submits the form, the driver has to enter the date and sign the form, so you'll add a datepicker and a signature control (6).

Figure 33. This is what you see when you tap the Front of Vehicle popup

Inside the popup dialogs for reporting on the various car parts, the driver can select Operational if the part is OK, or Malfunctioning if there is a problem with the part (1). If he or she taps Malfunctioning, a text box and a photo control (2) appear for details about the problem. When the driver takes one or more photos, the date and location for each photo, along with their entered description is also displayed (3). The driver can also add further parts to report on by selecting one from the Pick a part to add dropdown, and tapping the Add selected part button (4). The sections for user-added parts (5) are identical to the default ones except that instead of the segmented button, they get a button to remove them from the list, if the driver changes their mind.