Adding a combo box editor

Predefining values through a combo box editor allows you more control over page content and provides a more efficient mechanism for populating templates and cartridges in the editing interface.

Predefining values through a combo box editor allows you more control over page content and provides a more efficient mechanism for populating templates and cartridges in the editing interface.

Combo box editors affect the value of a string property. For example, you might use a combo box to provide image options:

</ComboBox> To add a combo box editor:

1. Insert a <ComboBox> element within <BasicContentItemEditor>. 2. Specify additional attributes for the combo box editor:

Description Attribute

Required. The name of the string property that this editor is associated with. This property must be declared in the same template as the combo box editor.

propertyName

If set to true, this attribute allows Experience Manager users to specify custom string values. By default, combo boxes are not editable.

editable

If set to false, the combo box displays in Experience Manager but the value cannot be changed by the user. By default, combo boxes are enabled.

enabled

This attribute allows you to specify a more descriptive label for this field in Experience Manager. If no label is specified, the property name is used by default.

label

If usePrompt is set to false, the first ComboBoxItem in the list is used as the displayed value. If the first ComboBoxItem is not set as the default

usePrompt

property value, it is not saved if the content administrator exits the Edit View without selecting a value.

Description Attribute

By default, this attribute is set to true, and a prompt displays at the top of the combo box editor.

Specifies a custom prompt. The default prompt is "Select one..."

prompt

Specifies the maximum number of rows appearing in a drop down list before a scroll bar displays. The default value is 5.

rows

Controls with width in pixels of the editor. The default value is 300.

maxWidth

3. Specify one or more menu options for the combo box by adding <ComboBoxItem> elements. <ComboBoxItem> takes the following attributes:

Description Attribute

Required. The string value to assign to the associated property if this <ComboBox¬ Item> is selected.

data

This attribute allows you to specify a more descriptive label for this option in the drop down list. If no label is specified, the value for data is used by default. You

label

must either specify a label for all of the combo box items or none of them. You cannot have labels for some items and not others.

Note: If you choose to make a combo box editable, you should not use the

label attribute for combo box items. Instead, the combo box should display the raw value of the string so that users entering custom values can see the expected format of the string property.

4. Optionally, set a default value in the corresponding <ContentItem> property. For example, to specify the image of wine being poured

(/images/WineDemoImages/one-record-banner-wine-being-poured.jpg) as the default choice for a combo box with propertyName="image_src":

<String>/images/WineDemoImages/one-record-banner-wine-being- poured.jpg</String>

</Property>

Note: Ensure that the default value for the property is one of the options defined for the

combo box in a <ComboBoxItem> element.

The following example illustrates a combo box with a custom prompt ("Please select an image"): <EditorPanel>

glass.jpg" label="Empty glass with strawberries"/>

</ComboBox>

</BasicContentItemEditor> </EditorPanel>

The following example depicts a combo box configured as "editable." The combo box displays the image options specified in the <ComboBoxItem> elements, but also allows a Experience Manager user to enter an image URL.

</ComboBox>

</BasicContentItemEditor> </EditorPanel>

The following example shows a combo box configured with a default value. The selected value when the editor is first instantiated is /images/WineDemoImages/one-record-banner-green- grapes.jpg, which displays with the label "Green grapes" in the drop-down menu. Experience Manager users can choose to select a different image.

 <ContentItem>

<Name>New One Record Banner</Name>

 <Property name="image_src">

<String>/images/WineDemoImages/one-record-banner-green- grapes.jpg<String/>

</Property> </ContentItem>

 <EditorPanel>

</ComboBox>

</BasicContentItemEditor> </EditorPanel>

Related Links

Adding a string property on page 26

String properties are very flexible and can be used to specify information such as text to display on a page, URLs for banner images, or meta keywords for search engine optimization.

Adding a string editor on page 35

You add a string editor to enable configuration of string properties. The string editor displays in the Experience Manager interface as a text field or text area depending on the configuration.

In document Endeca Content Assembler. Experience Manager Developer's Guide Version 2.1.x March 2012 (Page 37-40)