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:
/rootNode/choice/fahrt%label%choice={"label"&co;"Lokale Verteilfahrt", "desc"&co;"Beschreibung", "imgClass"&co;"lokaleVerteilfahrt"}
This NLS Entry for one element will be rendered as follow:
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:
valueOnSelect=text,display=id-text[,image=global,codeSetImg,png]
following key-value properties are allowed for codeset enumeration:
| 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 |
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]