Users of your Rocky Jupiter Deliveries webform can now pick any delivery entry or entries they like, and make changes to them. (For now, let's ignore the fact that you'll need a workflow script to make those changes take effect.)
However, the editing part of your form gives your users simple text boxes to make their changes. For the address line, that's perfect, but there are a fixed set of drivers, statuses, and clients, so the user would be better off with a drop-down list of the available choices: no accidental mistyping, for one thing.
You'll also agree that the Due Date editing field should be a datepicker control.
This is what you'll be crafting in this section.
This really should be a piece of cake: all you need to do is copy the
driverFilter , clientFilter,
loadFilter, and statusFilter drop-down controls in the
taskList table header, and rename them.
Wait a second. The drop-down lists in the header are filter controls - their default value
is None. In the editing part of the form, you need to retain and
display the original values that come from the assignments reference table.
Use the selectedKey property of the drop-down control to specify this
original value as the default value for the
drop-down.
...
<row>
<cell>
<dropdown id='editedDriver'
choices='{SELECT u.userid, u.name FROM drivers u}'
keyMap='{userid}'
textMap='{name}'
selectedKey='{edit.driver}'/>
</cell>
<cell>
<dropdown id='editedClient'
choices='{SELECT c.client_name FROM clients c}'
keyMap='{client_name}'
textMap='{client_name}'
selectedKey='{edit.client}'/>
</cell>
<cell>
<dropdown id='editedLoad'
choices='{SELECT c.cargo_type FROM cargoTypes c}'
keyMap='{cargo_type}'
textMap='{cargo_type}'
selectedKey='{edit.load_type}'/>
</cell>
<cell>
<textbox id='editedLoadAddress' text='{edit.load_address}'/>
</cell>
<cell>
<textbox id='editedDeliveryAddress' text='{edit.unload_address}'/>
</cell>
<cell>
<datepicker id='editedDueDate'
dateFormat='(dtf yyyy"/"MM"/"dd)'
date='{edit.due_date}'/>
</cell>
<cell>
<dropdown id='editedStatus'
choices='{TABLE status ("Assigned";
"Confirmed";
"Loaded";
"Completed";
"Cancelled")}'
keyMap='{status}'
textMap='{status}'
selectedKey='{edit.status}'/>
</cell>
<cell>
<removebutton text="Cancel edit" />
</cell>
</row>
...
As
you can see in the code above, the drop-down lists all have a query statement in their selectedKey properties, which return the relevant values as
they were passed into the taskEditor table using the addbutton.
The new taskEditor table now includes the editedDueDate
datepicker control, its date property also data-bound to the relevant
column in taskEditor.
Make sure that you give every control in the taskEditor table an id. You'll be using
the input in them to update the assignments reference table in the
database, and the workflow script that you create to handle this needs ids
to target form controls.
Save, publish, and access the webform online. Use the Edit button to
insert one or more rows into the taskEditor table, and check that the
original values have been retained, but the possibility of editing typos has been
eliminated.
Figure 185. The drop-down lists and their original values now appear in the
taskEditor table control
Good job. Now, for a little helper variable that will make this same code a bit
tighter, and your life as a Mobilengine developer a lot easier.