Updating Item Types in Generated Table

The v3.5.0 Designer's table wizard generates a row consisting of fields. In some cases you may want other items/widgets in your table. Follow the instructions below in order to update the items found in some of the columns of your table row. Download the sample form that is attached to this article to see a table in "before" and "after" states.

First Steps

First align the fields in the row so that each is relatively aligned left to left of the appropriate column header label. Do this to any fields that exists to the right of an item that you're changing. We need to do this because by default the items in a row are placed relative to the previous item and if we swap out items for different types there will be differences in size and potential for frustration with respect to positioning. By aligning items to their column headers this won't happen.

Now we have two options. We can either manually convert a field in the row to another item type, or we can delete a field and drop in a replacement from the pallette. If you are comfortable with the Designer's source view and editing XFDL and XForms markup, you will probably prefer the "converting" method because it is the quickest approach. We will talk about the steps required to take each approach.

Approach 1 - Manually Converting/Morphing an Item's Type

Select a field that you want to change and go to the source view. Modify the XFDL item and XForms control that it wraps. Depending on the item you are converting to (this is where it comes in handy to know your XFDL/XForms), you may need to add or remove options. For example, scroll bars are not needed in a radiogroup so remove scrollhoriz and scrollvert. The form schema validation that occurs when you try to leave the source view will also give you advice.

So in the attached sample form we converted the default DOB field:

Original DOB field

<field sid="DOB">

   <xforms:textarea ref="dob">

      <xforms:label></xforms:label>

   </xforms:textarea>

   <itemlocation>

      <width>100</width>

      <after>FULL_NAME</after>

      <alignl2l>HEADER_LABEL2</alignl2l>

   </itemlocation>

   <scrollhoriz>wordwrap</scrollhoriz>

   <scrollvert>fixed</scrollvert>

</field> 

To be a date picker (which is a combobox with a date format that wraps an xforms:input):

New DOB date picker

   <xforms:input ref="dob">

      <xforms:label></xforms:label>

   </xforms:input>

   <itemlocation>

      <width>100</width>

      <after>FULL_NAME</after>

      <alignl2l>HEADER_LABEL2</alignl2l>

   </itemlocation>

</combobox> 

Notice that the type of the XFDL item and that of the xforms control have both been changed. Also, scrollhoriz and scrollvert are not legal in a combobox so they have been removed. You can then use the Properties View to specify that the combobox has a format with a datatype of "date".

I like this approach because it retains the xforms ref attribute, positioning and size of the field.

Approach 2 - Replacing a Field With Desired Item

To do this method, select the item you want to replace and note the xpath reference found in the xforms:textarea's ref attribute. You can see this in the Properties View under Xforms->ref or in the Properties Window as "Data Element".

Delete the item! If you aligned items left to left of their column headers than the rest of the table should be unaffected. If not, it may become a mess. If this is the case "Undo" and go back to First Steps. Now drag the appropriate item from the pallette and drop it in the removed field's location in the table. If you are adding a popup, radiogroup or checkgroup, add choices to the item as normal using either the Properties Window or View.

Set the Xforms->ref of the new item to be that of its predecessor.

Relatively position the item so that it is after the previous item and left to left of its column header. Make the item the same width as its column header.

Now if you test the table in one of the preview panes (Viewer/WFS) you will probably notice that the tab order for your row is all screwed up. This is because the new item is placed as the last child of the table within the build order. Use the Outline View to move the new item so that it is after the item that is before it visually.

In the future, the Designer will probably either allow you to select the type of item you want for each column within the table wizard, or allow you to convert between item types programmatically. Until then, these easy steps should help.

Attachments: