Dynamic population of combo-box data

 
In this document we have described a situation where you can dynamically populate a combo box. Assume you  have a form in which there is a text box, and you wish to replace the text box with a drop-down whose values are drawn from specified rows and columns in a code set table.

One way, of course, is to use the foreign key route, which is to make the attribute corresponding to the text box be a foreign key to the code set table. In some situations, however, this might not be viable.

Essentially, the problem boils down to two parts: one is constructing an appropriate part of the UDM to do the data retrieval, and the second is setting up the HTML template to use that data.

Assume that your table is named Codeset, and has columns code and description (and perhaps, other columns, but let's not consider that here). Suppose also that the text box in question is named myField, i.e., its tag looks like <input name="myField" type="text">. You may want to ensure that the value written into the cell represented by the text box is obtained from a corresponding cell in the code column of the Codeset table.

Suppose the root node of your UDM is named myUdm. First, create a UDM node, a child of the root, whose name (let's say) is allowedCodes, that will back the dropdown. This would be a list node that draws its content from the Codeset table. When you create the node, you can specify the appropriate retrieval criteria in steps 3 and 4 of the node addition wizard, to restrict the range of values you want to show in the dropdown. Also make sure that its code and description attributes are both retrieved, by checking the corresponding 'read' boxes in step 4, in the visuals table at the bottom. So the resulting UDM might look like this:

                            myUdm
                      |
                      |-- allowedCodes
                      | |-- code
                      | |-- description

Next, modify your HTML to make use of the content retrieved by the UDM. To do this, change the input tag for the text box as follows:

       <input name="myField" type="text" ...(other properties here)...>

becomes:

           <select name="myField">
             <list myUdm.allowedCodes as aCode>
               <option value=""></option>
            </list>
          </select>


The HTML template refers to the UDM tree's content, referring to its nodes using dot notation, with the node names strung out starting from the root. For example, in the list tag above, the notation myUdm.allowedCodes refers to the allowedCodes child of the myUdm node. The list tag iterates through all retrieved records, using aCode as the running variable, and the notation notation extracts the individual field of the record.