Textboxes and datepickers

What you'll be learning:

  • How to create, publish, and access a webform.

  • How to put a textbox into a webform and how to configure it.

  • How to put a datepicker into a webform.

Let's build the delivery task creation webform from the ground up, starting with its most important controls. You could argue that there are perhaps more essential details of a delivery task, but the name of the driver, the name of the client, and the associated dates seem like a pretty good starting point.

For now, make the name-entry controls simple text boxes - you'll be binding a list into these controls soon enough.

Create the webforms folder for your webforms. Inside it, create the newTask.fls.xml file with your favorite text editor, and put the code below inside it.

<form
  id='newTask'
  menuName='New Task'
  platforms='web'
  xmlns='http://schemas.mobilengine.com/fls/v1'>
  <textbox id='driver'
    label='Assigned Driver'
    text='(enter the name of the driver)'
    width='30 em'/>
  <textbox id='client' label='Client'
    lines='3'
    width='30 em'/>
  <datepicker
    id='POdate'
    label='Purchase Order date:'
    dateFormat='(dtf yyyy "-" MM "-" dd)'
    width='30 em'/>
  <datepicker
    id='dueDate'
    label='Delivery due:'
    dateFormat='(dtf yyyy "-" MM "-" dd)'
    width='30 em'/>
</form>

A bit of context: The webforms language is XML-based, and uses SQLite-like syntax for queries (more on this is a minute). Webform files have the .fls.xml extension, and elements inside them are in the http://schemas.mobilengine.com/fls/v1 namespace.

The id and menuName attributes are mandatory for the required node element <form>. These identify the webform within the solution artifacts, and in the UI, respectively. The namespace declaration, and the platforms='web' attribute is also mandatory, but that's about all the attributes the <form> element can have.

The id attribute is not required on child elements, but you can't address an ID-less control in a workflow script, and its values won't be sent to the cloud when the form is submitted.

A textbox element declares a text box control for text input. None of its attributes are required:

  • The value in label is the non-editable text that the browser displays next to controls

  • width sets the width of controls in the form. It only takes em units.

  • lines determines how many lines the text box will have. 1 is the default.

  • The value in text is the optional starting text for the text box. The default is an empty string.

Unlike the mobile form language, webforms have separate date- and timepickers. The dateFormat attribute, that defines the format used to display and parse a date value, is something a datepicker control, understandably, can't live without.

Time to try out your new creation. Save the form and publish it via the Mobilengine Build Tool as you did countless of times before.

To actually see the form, log in to the backoffice site, and click the Go to webforms link in the top right.

Accessing the webforms interface

Figure 155. Accessing the webforms interface


Only users with an account that has webforms access can see webforms.

When you're on the site, click New Task in the Webforms group in the top left-hand corner.

Click the name of the form in the Webforms list to open it

Figure 156. Click the name of the form in the Webforms list to open it


When the form is good and open, see just what you've been up to so far.

Your first webform controls

Figure 157. Your first webform controls


Neat.

Without a workflow script to handle the submitted data, this form is useless, but don't lose heart. Let 'Build it first, make it work later.' be your motto, and head on to the next section.