This visualizer component uses the jQuey UI autocomplete widget. It can be applied to choices and leaf enumerations.

Setting it up on a choice node

...

In the XUI-Editor go to the appropriate node and create a XUI Component if necessary. Select "Style" > "Choice" and set the "Visualizer type" to advancedComboBox. The component itself will be configured with a HTML escaped JSON String in the NLS file. For Example:

...

For layouting the widget there are several CSS Classes applied to the component to format it to your needs.

Setting it up on a leaf enumeration

...

In the XUI-Editor go to the appropriate node and create a XUI Component if necessary. Select "Style" > "Leaf" and set the "Visualizer type" to advancedComboBox. The component can be configured by specifying a configurationString in the field "configurationString" in the following format:

...

key	values	comment
valueOnSelect	text, id	Defines the value which will be displayed in the input field on selection.
display	text, id, id-text, text-id	Defines how the codeset will be rendered in the selection list.
image (optional)	form/global, [imageName], [fileType]	Defines how the image source will be handled form: takes the actual form's image location as base global: takes the general image location as base (e.g. "_images") imageName: pattern of the image name (e.g. "state") fileType: type of the image file (e.g. "png") image=global,codeSetImg,png -> images/codeSetImg_20.png

For layouting the widget there are several CSS Classes applied to the component to format it to your needs. To apply images to a single entry there is a div rendered with a special class applied: [codesetname]_[id]