<forms:combobox>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox
ATTRIBUTES
EXAMPLES
forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker forms:variableinput
Layout
layout:divider layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<forms:combobox>` </...>

Allows the user to select from a range of options.

Content

The options that will appear in the ComboBox, after any options populated from the datasource. Any other markup inside the tag (HTML, text and [? ?] expressions) is a per-row template: it is rendered once per datasource row with the as variable in scope and shown in place of the plain title, for example an icon beside the label. The title still drives searching.

Attributes

- `allowReorder`
bool
Whether selected tags can be reordered by dragging them.

Default = true
- `as`
string
The name of the variable to be registered for each option. For example, as="myvar" will let you reference $myvar inside the control.
- `autoFocus`
bool
Auto Focus

If true, this control will attempt to focus itself after the page has loaded. Note that only one element may be focused on the page at a time.
Default = false
- `createColumn`
string
The field of createcomponent the typed text is saved into, for example post_category_title.
- `createComponent`
string
The component new entities are created in when the user types something which isn't in the list, for example \Components\Website\Posts\Categories.

The user must hold save permission on the component; creation is refused otherwise.
- `createValues`
array
Additional fixed values applied to entities created through createcomponent, as a column => value array. Use it to scope new entities, for example to a parent.
- `dataColumn`
Sets the data column

The datacolumn links the form item to a key used when getting or saving from a component (as defined by the parent form).
- `disabled`
bool
Disable Input

Disables the input, preventing user interaction
- `hasPrimary`
bool
Whether the first selected option is treated as the primary one. The first tag is badged, and tags can be dragged or promoted to first place.

Only applies when multiple is set.

Default = false
- `height`
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `id`
string
Most form items need a unique id so that they can submit data to the server. No two form items may have the same id. For situations where multiple form items submit to the same field, see the name attribute. Id's that begin with contact_ will automatically save Contact information to the Contact database as long as the user has entered enough identifying information (ideally Name and Email). Check the Contact Fields page for correct field names.
- `keyAs`
string
The name of the variable to be registered for each option's key.
For arrays of entities from the database (for example getAll()), the keys will be incrementing integers starting at 0.
- `maxSelections`
int
The maximum number of options that may be selected. 0 for no limit.

Default = 0
- `multiple`
bool
Allows more than one option to be selected. Selected options appear as tags inside the box, and the value submitted is the selected values in order, comma separated.

Default = false
- `name`
string
Sets the name of the form item. Most of the time, the id attribute will suffice. However, with form items that post multiple values into an array, each item will need to have the same name, followed by []. For example three controls with name="data[]", will all post into 'data'.
Radio buttons belonging to the same group will have to share the same name.
An empty name="" leaves the item unnamed, so the browser never posts it to the server (e.g. card fields a payment gateway tokenizes in the browser).
- `primaryDataColumn`
string
The datacolumn which stores the primary selection, when it is held in a column of its own rather than being implied by the order of the submitted list. When set, the control also submits the first selected value to that column.

Only applies when multiple and hasprimary are set.
- `saveState`
bool
Restore state on reload

Whether the value of the input persists when the page is revisited.
Default = false
- `showValueOption`
bool
If the value not a contact of the datasource or in the list of options, should it be allowed
- `transformations`
Value Transformations

Sets the value transformations to be applied to the value of the form item as a comma separated string.
- `tree`
bool
Renders hierarchical options as an indented tree with expand / collapse controls.
Set automatically when datasourcerecursive is used.
- `validations`
Validations

Sets the validations to be applied to the value of the form item as a comma separated string.

Eg: validations="mandatory"

When no validations attribute value is set, the form item is optional.
- `width`
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Examples

Specify Default Option

Demonstrates the tablist default selecting an option.

HTML:

<forms:combobox value="option2"> <forms:option value="option1">Option 1</forms:option> <forms:option value="option2">Option 2</forms:option> </forms:combobox>

Run Example

Specify Default Option via Query String

Demonstrates the selection of an option specified through the query string.

HTML:

<forms:combobox value="[? $_GET['combobox'] ?]"> <forms:option value="option1">Option 1</forms:option> <forms:option value="option2">Option 2</forms:option> </forms:combobox>

Populate From Data Source

Demonstrates the populating the combobox options from a datasource.

HTML:

<forms:combobox datasource="\Components\Website\Pages::getChildren('/features/')" as="page" datatitle="$page['page_title']" datavalue="$page['page_id']" />

Add To Data Source

Building on the previous example, adds an empty option to prompt the user to make a selection, and a second option not included by the data source.

HTML:

<forms:combobox datasource="\Components\Website\Pages::getChildren('/features/')" as="page" datatitle="$page['page_title']" datavalue="$page['page_id']" validations="mandatory"> <forms:option value="">Please Select</forms:option> <forms:option value="/custom-page/">A Custom Page</forms:option> </forms:combobox>

Populate from Custom Field

Fill the values of a Combobox from a Custom Field

HTML:

<forms:row label="Select Relevant Industry Category"> <forms:combobox id="contact_industry" datasource="\Components\Settings\CustomFields::getOptions('\Components\Customers\Contacts', 'contact_industry')" as="industry" datatitle="$industry" datavalue="$industry" /> </forms:row>

Products Filtering

Products filtered by category and brand comboboxes.

HTML:

<ajax:event id="product_filter_changed_ajaxevent" updateregions="products_ajaxregion" /> <forms:form> <forms:combobox id="category_combobox" datasource="\Components\Commerce\Products\Categories::getChildren(null)" datasourcerecursive="\Components\Commerce\Products\Categories::getChildren($category['product_category_id'])" as="category" datatitle="$category['product_category_title']" datavalue="$category['product_category_id']" onchangeajax="product_filter_changed_ajaxevent"> <forms:option value="">- Select a Category -</forms:option> </forms:combobox> <forms:combobox id="brand_combobox" datasource="\Components\Commerce\Products\Brands::getAll()" as="brand" datatitle="$brand['product_brand_title']" datavalue="$brand['product_brand_id']" onchangeajax="product_filter_changed_ajaxevent"> <forms:option value="">- Select a Brand -</forms:option> </forms:combobox> </forms:form> <ajax:region id="products_ajaxregion"> <data:repeater datasource="\Components\Commerce\Products::getAllForCategoryAndBrand($category_combobox.value, $brand_combobox.value)" as="product" emptymessage="No products found"> [? $product['product_title'] ?]<br /> </data:repeater> </ajax:region>