Populate a drop-down list

What you'll be learning:

  • How to query a reference table in a webform control

'Why exactly was this lengthy digression necessary?', you might ask. Well, because you want to let your users select the drivers in the form from a list instead of having to type their names in. The drop-down list control needs choices that can only come from data-binding. The concept is not trivial, and it's essential to webforms (as well as mobile forms), so you really can't learn about it enough.

Now that you've seen how a drop-down list works, it's time to get your feet wet actually making one. Replace the driver text box in your form with a drop-down control.

Since you'd like to bind columns of a reference table into the driver control, you need a reference table declaration, and an input file with reference data. Fortunately, you don't need to make either one of these from scratch. You've used the exact same drivers reference table before: download its declaration and input table, and save them in the webforms folder.

When you've taken care of the reference table, it's time to get down to business with the form itself:

<form id='newTask'
  menuName='New Task'
    label='Assigned Driver:'
    choices='{SELECT u.userid, u.name FROM drivers u}'
    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'/>

As you would expect based on what you know about drop-down lists in webforms, the choices, keyMap, and textMap attributes are in the driver drop-down's driver's seat.

The query in choices is basically an SQLite SELECT statement, and returns both columns of the drivers reference table. Note the alias u used both after the SELECT and the FROM operators. When you query a reference table or a column in a table expression, or when you query any other table value in general, the webforms language requires a table alias.

The keyMap attribute determines that the rows in the query result can be uniquely identified by their userid field.

The textMap attribute specifies that the name fields of the query result rows will be displayed to the user as the choices in the control.

Save and publish the new form. Don't forget to include the input table for the drivers reference table when you publish through the mebt. Navigate to the webforms site or refresh the browser if it's already open, and check out your shiny new drop-down list.

Your first working drop-down control in a webform

Figure 168. Your first working drop-down control in a webform

While you're in the drop-down mindset, insert a second one right below the first. This one will let the admin pick the type of packaging for the cargo from the list of containers in the cargoTypes reference table. Ready?

<dropdown id='loadType'
  label='Type of Cargo'
  choices='{SELECT c.cargo_type FROM cargoTypes c}'
  width='30 em'/>

Since the cargoTypes reference table has only one column, there is no head-scratching about the name of the column that you put into the choices query statement, the keyMap, or the textMap attributes of the loadType dropdown.

Save the form, make sure that you include a worksheet for cargoTypes in the Excel file that you reference in the command line, and publish.

The admin can now select the container type for delivery tasks

Figure 169. The admin can now select the container type for delivery tasks

The webform in its present state is still not functional, but you're making sure that when it gets going, it's going to be a real pro.

In the next section, you'll add another data-entry element, and access a system parameter to make your form even sexier.