"Hello world": form development basics

What you'll be learning:

How to set up your solution artifact folder.
How to write a very basic mobile form.
How to publish solution artifacts to the Mobilengine Development Cloud.
How to send a solution to mobile users through the Backoffice website.
How to submit data with a form.
How to access submitted data on the Backoffice website.

You're starting out on an epic journey with the Mobilengine dev environment - you'll be switching between client-side and server-side views even in this first few steps. You'll set up your solution artifact folder, write a form with a text box and a label, open and fill in the form on a mobile device, submit it to the Cloud, then view the submitted data on the Backoffice site.

A working mobile form requires three distinct steps from the developer:

Create a form in the Mobilengine form language, which is a domain-specific declarative language to describe user interface and behavior with controls and data binding.
Publish it to the Development Cloud using the Mobilengine Build Tool (mebt) that you can install following these steps.
Download the published form to the Mobilengine client application that is running on your iOS mobile device (see the installation instructions for more information).

This might sound like a mouthful, but this process will become second nature to you in no time.

Create the mobile form

Create a folder to save the solution artifacts (such as forms, reference table declaration files, workflow scripts, etc.) for your mobile solutions. Name it RockyJupiter.

It is important that you keep every solution artifact file that belongs to the same project within a single folder (or in subfolders of a single folder), because the mebt takes a folder as input and publishes everything it can identify as a solution artifact to the Mobilengine Cloud.
Start the text editor of your choice. Mobilengine developers use Notepad++ - using the NppExec plugin, you can integrate mebt.exe into Notepad++. This can save you a lot of time down the line.

The Mobilengine form language is XML-based, so an editor with XML syntax highlighting is recommended.
Enter the following code, or download vehicleInspection.fls.xml and open it in the editor.
vehicleInspection.fls.xml
```
<form id='vehicleInspection'
    menuName='Vehicle Inspection'
    platforms='ios'
    xmlns='http://schemas.mobilengine.com/fls/v2'>
    <textbox id="licensePlate"
        label="Enter the license plate of your vehicle"
        hint="Type here"/>
</form>
```
form is the required root element for Mobilengine forms. Each of its attributes listed in this sample is required:
- menuName determines the name of the form as it is displayed in the list of available forms on the mobile device
- platforms determines whether the form will run on iOS devices, Android devices, web browsers, or all three
- All elements of the form language are in the http://schemas.mobilengine.com/fls/v2 namespace. The most convenient way is to declare this as the default namespace on the root form element using the xmlns attribute.
form's single child node is textbox, which predictably declares a text box control in the form. label is the left-hand side label and hint is the starting text for the control.

In the form language reference guide, you can find everything you'll want to know (and, we hope, even more!) about both form and textbox.
Save the file as vehicleInspection.fls.xml in the RockyJupiter folder. Congratulations. You have created your very first mobile form.

You need to save all Mobilengine forms with the .fls.xml extension.

Publish the form, and download it to your mobile device

You are not altogether done yet, though. You'll want to publish the form to the Mobilengine Cloud to try it out on your mobile device.

Start the command line, navigate to the RockyJupiter folder, and use the mebt run . command to publish your solution as shown in this example:
```
c:\RockyJupiter>mebt run .
mobilengine srv 28.0 (Release) v28.0.38.19272
Executing run (compile and deploy to server):
Service url: https://tutorial.mobilengine.com/services/comex/v1/
User: petar.hoyt@gmail.com
adding 'vehicleInspection.form.xml'
Reset integration settings
Import form 'vehicleInspection'
Done.
```
If you use environment variables, you will only need to enter the path to the solutions folder (Since you were already inside the RockyJupiter folder, a . was all that you needed. If you want to keep your developer account password safe and not make it a mebt environment variable, you have the option to make the mebt prompt you for it every time you run a command.

To keep sensitive data safe, mebt only accepts https transport in server URLs.
Access the Backoffice website to check that your new form is in the Cloud: go to the Mobilengine Development Cloud URL listed as backoffice on your Developer Dashboard, and log in using the username and password of your developer account.

Figure 36. The login dialog at the Backoffice site

The Forms tab lists the mobile forms that are currently published. You should see your brand new vehicleInspection form here. Click the number in the Users column for the form to check and edit the users who receive the form.

Figure 37. The Forms tab of the Backoffice site, after you click on the number in the Users column.

If you use the run mebt command to publish forms and other artifacts to the cloud, the published material will automatically be assigned to every mobile user of your company, so you won't need to associate the forms that you publish with your mobile client user account. However, when you are going 'live' and publish to the Production Cloud, you'll have to assign forms to each user individually.
Enable push notification for all the mobile users of the Rocky Jupiter Transport Company, so that the forms that you assign to yourself will be automatically updated on your device every time the data in them changes. To do this, go to the Settings → Mobile synchronization tab on the Backoffice site, and select the Enable push notification check box. Click Save before you navigate away from the screen.

Figure 38. The Settings → Mobile synchronization tab on your Backoffice site
On your phone, log in to the Mobilengine app, and be impressed: the form has already been downloaded to your phone or tablet. Tap its name (the value in the formmenuName attribute) to open it.

Figure 39. Tap the name of the form in the sidebar

Submit the form to the server

When it opens, tap inside the text box in the top right corner of the form. Enter hello world (or a license plate number, or whatever you feel like), and tap Submit.

Figure 40. The open Vehicle Inspection form
You can keep track of form submission data on the Dev Cloud interface. On the Backoffice page, navigate to the Incoming data → Raw data screen, tap the Show button, and check that your form input got through in the results table.

Figure 41. The data you submitted with the form, as seen on the Backoffice site

To sum up, then: you're now familiar with how the Mobilengine application on users' mobile devices and the Mobilengine Development Cloud are related, how you can create and publish forms to the Cloud, access them with the mobile client app, and submit data using the forms back to the Cloud.

You'll build upon these foundations in the next section, to make your forms a bit more complex.

Related links

Your first mobile form, part 1

Up the controls: checkbox, popup, and photo