Dropdowns for web edit

Published Jul 21, 2006

After going about 13 rounds with javascript and receiving a cut lip, broken ribs, and probably permanent brain damage, I finally got this script to work - many thanks to the persistence of Sally Booth and Claire Hanlon at Veale Wasbrough who came up with the idea in the first place. Normally you do not have the choice to use dropdown lists for WebPublisher edit forms. It's a textbox or textarea, or nothing. And you definitely cannot have those non-existent dropdown lists fill themselves dynamically with the field's validation list. This script changes all that. On page load, the script suppresses the textbox produced by WebPublisher, requests the validation list for the field via AJAX, creates a dropdown from the validation list, and syncs the dropdown selection to any value found in the now-invisible textbox, or adds the textbox value to the dropdown if a match is not found. Got it? Right. It'll make more sense in a picture show.

Fig. 1 - BEFORE Original Textbox with value "Smith, John".

Fig. 2 - AFTER Textbox now invisible, dropdown loaded with validation list, "Smith, John" selected.

I'll continue now for those interested in the technical details. Technical Details It is easy to get the XML validation list for a field from WebPublisher. For example, here is the validation list for the Product field from the Inmagic Support Knowledgebase: view xml. The query string parameters will tell you what you need for your own database: AC=validation_lists FN=[FieldName] TN=[TextbaseName] You use AJAX to fetch the XML, then write some script to walk the DOM and create an option object for each entry, which you then add to the select object in question. I use JSMX from www.lalabird.com to do the AJAX bit. That's the easy part. The hard part is suppressing the dynamically-generated textbox, which is given an ID/name on the fly by WebPublisher, depending upon where it appears in the form. In order to suppress the thing, the script must identify it. Fortunately edit inputs are generated in numerical order, so the textbox will be named EIx, where x is an integer and corresponds to the textbox's location among the other inputs. Rather than assume "it's the 3rd one down so it must be EI3", the script is able to locate it within a specially marked container tag and render it non-visible.

Fig. 3 - FORM DESIGN VIEW

[Author] is where WPP will insert HTML on the edit page. [Author] is wrapped by the div tag whose "DropdownOverride" class is a marker.

Fig. 4 - WPP EDIT VIEW [Author] has been replaced by WPP generated HTML. The script is able to find an input or textarea whose name is EIx within the container div tag marked "DropdownOverride".

The input EIx remains the "active" element, whose value WPP works with on submit. The dropdown itself will be ignored. Any selection change in the dropdown calls UpdateSelection() to update the EIx value even though EIx does not display, since the script set it to style="display:none;".