The first step of creating a WorkMobile solution is to take our original paper-based form and build a WorkMobile form. So, let’s get cracking! Once you’ve logged into your WorkMobile account the first screen you should see is the WorkMobile dashboard.
- Click the Forms button as highlighted and you’ll be taken to the forms list screen. As you currently haven’t built a form, the list will be empty.
- Click the New Form button
- You’ll see a new screen which allow you to enter the name of the form and a meaningful description.
- Enter Job Sheet into the Form Name field.
- Click Save
Before we continue, let’s take a minute to look at the different components that make up this screen to understand how this works.
The form builder is basically made up of the following key areas: -
1.Toolbox
The toolbox contains all of the different tools that you’ll use to build your WorkMobile form. You can hover your cursor over each tool to find out its name. For example, hover over the first tool in the Basic Data Capture section, the Text Box tool. The textbox tool does pretty much what is says on the tin. It allows you to capture text on your WorkMobile form.
So, for example, in our example, we want to capture Customer Name by allowing the engineer to engineer to write the customer name. We’d therefore use the Text Box tool to do this.
2. Canvas
So, for example, in our example, we want to capture Customer Name by allowing the engineer to engineer to write the customer name. We’d therefore use the Text Box tool to do this.
2. Canvas
The canvas is essentially a virtual mobile device which you use to build up your form. To do this you simply grab a tool from the toolbox and drag it onto the canvas.
The canvas allows you to re-arrange and delete tools from the form should you need to.
3. Properties Panel
The canvas allows you to re-arrange and delete tools from the form should you need to.
3. Properties Panel
The properties panel allows you to configure each individual tool once it’s been placed onto the canvas. For example, you might drag a Text Box tool onto the canvas. The properties panel will allow you to give it a meaningful name e.g. Customer Name. You can also set properties should as the minimum and maximum number of characters that you’ll allow your users to enter. Each tool has its own unique set of properties.
4. Information Window
The information window lets you know if there are any problems with your form. Any problems are reported here giving you the opportunity to correct before saving your form.
OK, enough with the theory, let’s get building.
OK, enough with the theory, let’s get building.
Adding the Customer Name Field
- Drag a Text Box from the toolbox onto the canvas.
- On the properties panel enter Customer Name into the Caption field. You’ll see that the caption for the tool on the canvas will change to reflect this.
A Quick look at a tool on the canvas
1. Hidden/Not Hidden It’s sometimes useful to have a tool on the form which is hidden by default and only made visible when a certain action happens. If you set the hidden property of the tool in the properties panel, then this icon will be highlighted.
2. Required/Not Required
For any type of input, you can specify by default if the field is mandatory or not, i.e. the user has to input a value before proceeding. If you set the required property of a tool in the properties panel, then this icon will be highlighted.
3. Formula present
Once you become familiar with WorkMobile, you’ll want to make your forms even more powerful by using formulas to carry out more advanced validation or calculations. If you’ve entered a formula into a tool, then the formula icon will be highlighted.
4. Remove
Shouldn’t really require explanation but for completeness, removes the tool from the canvas.
So, as you can see, the icons give the form designer some visual indication regarding the property configuration for each tool on the canvas.
2. Required/Not Required
For any type of input, you can specify by default if the field is mandatory or not, i.e. the user has to input a value before proceeding. If you set the required property of a tool in the properties panel, then this icon will be highlighted.
3. Formula present
Once you become familiar with WorkMobile, you’ll want to make your forms even more powerful by using formulas to carry out more advanced validation or calculations. If you’ve entered a formula into a tool, then the formula icon will be highlighted.
4. Remove
Shouldn’t really require explanation but for completeness, removes the tool from the canvas.
So, as you can see, the icons give the form designer some visual indication regarding the property configuration for each tool on the canvas.
Adding the Address Field
- Drag a Text Box from the toolbox onto the canvas.
- On the properties panel enter Address into the Caption field.
- Click Multiline in the Appearance section of the properties panel. An address is usually entered over a number of lines so this configures the text input box to behave differently and allow multiple lines of text to be added.
- Set the Max Length value in the Validation section of the properties panel from 50 to 300. This increases the number of characters the user can enter for the address from 50 to 300.
Adding the Visit Date Field
For the visit date, we could use a Text Box control again. However, this means more typing for the user and we’d need some way to ensure they’ve entered a valid date in a consistent format. For this reason, we’ll use a calendar tool which is better suited for the task.
- Drag a Calendar from the toolbox onto the canvas.
- On the properties panel enter Visit Date into the Caption field.
from the toolbox onto the canvas. Adding the Visit Type Field
- Again, we could simply use a text box here, however this company has 3 different types of visit that it makes which are installation, service and repair. It would make more sense therefore to allow the user to pick from a list of options. Not only does this require less typing again, it also means that the data you capture is consistent.
- Drag a Drop-down list from the toolbox onto the canvas.
- On the properties panel enter Visit Type into the Caption field.
- To add the potential options, you simply type each option into the Entries box located in the
Values section of the properties box. Each entry, hit the Enter key on your keyboard to start a new line. The Entries box should look like this:
from the toolbox onto the canvas.
Adding the Amount Field
Here, we want the user to enter a numeric value so we’re going to use a different type of tool that specialises in capturing numeric data – the Number tool. The number tool allows us to specify what type of number s are allowed, i.e. whole numbers only or numbers with decimal points. We can also define acceptable ranges i.e. must be greater than 0 and less than 10,000.
- Drag a Number tool from the toolbox onto the canvas.
- On the properties panel enter Amount into the Caption field.
- Because we want the user to enter the monetary amount into this box, select 2 Decimal Places from the Number Type selector in the Validation panel.
- We also don’t want the user to enter values less than 0 so type 0 into the Min Number field in the Validation panel.
from the toolbox onto the canvas.Adding the Signature Field
In order to capture out customers signature using the touch-screen, we simply need to use one of the media capture tools – not surprising called the Signature tool.
- Drag the Signature tool from the Media section of the toolbox onto the canvas
- On the properties panel enter Signature into the Caption field
from the Media section of the toolbox onto the canvasThat’s it. We’ve finished building our first WorkMobile form so let’s save it and move onto the next section.
To save your form, click the Save button on the top right of the screen.
To save your form, click the Save button on the top right of the screen.
One Last Thing
Before your users can see the form that you’ve built on their mobile device, there’s one last action that you need to carry out; that’s publishing the form.
Once you’ve saved your form you should see a screen like this:
Once you’ve saved your form you should see a screen like this:
- To publish your form, simply click the Form is Unpublished button.
- Your form should now be published.