Adding combo-box component with fixed data source

Combo-box component can be configured with various configuration parameters. For the overall context see Introduction to Details Pane Templates.

Combo-box with different source inputs

Combo-box accepts sources in different formats. These sources are then displayed in the drop-down-list from which a selection can be made.

With Definition Lists:

Please see Adding combo-box component and binding to dynamic data sources

With Array:

The user can provide its own list of options for the drop-down to select from.

Code

XML

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}} 
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				{{label-helper value=editModel.Language label="Language:"}}
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{combo-box model=editModel field="Language" source="['English', 'German', 'Spanish', 'French']"}}
			</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}      
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				Language:
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{model.Language}}
			</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

Combo-box with a filter

You can provide a list of options to filter the source. This can be handy if you want to make use of the AllowedClasses Parameter for some tables (if you use it everywhere you could just set the source to tableInfo.AllowedClasses).

When the Parameter AllowedClasses isn't specified for a table, no filter will be applied and the user can choose from the list defined in the source.

Code

XML

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}} 
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				{{label-helper value=editModel.Class label="Class:"}}
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{combo-box model=editModel field="Class" source="['Audio', 'Music', 'Cart', 'Graphic', 'Video']" filter=tableInfo.AllowedClasses}}
			</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}      
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				Class:
			</div>
            <div data-col="sm-8 xs-12 valign-center">
				{{model.Class}}
			</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

Combo-box for Custom fields

The user can create custom fields (if not existing) from the drop-down list, whose values are passed as the "source" to the component.

Code

XML

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}} 
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				MyCustomField:
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{combo-box model=editModel customField="my/customField" ariaLabel="my custom field" source="['Value1', 'Value2', 'Value3']" canCreate=false}}
			</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}      
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				MyCustomField:
			</div>
            <div data-col="sm-8 xs-12 valign-center">
				{{combo-box editable=false model=model customField="my/customField"}}
			</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

Combo box for custom fields only support sources constructed as Arrays.

Every customField property passed to the component must contain "/" (forward slash) somewhere between the first and last character. i.e. "custom/field", "test/field", "te/st" are valid names, whereas "test" and "customField" are not.

Other Configuration Settings

Allowing free-text

In addition to selecting and finding the desired value the user can enter any value that is not inside the source if canCreate property is set to true in the configuration as follows:

(Please replace XXX by the desired field name)

Code

XML

{{combo-box model=editModel field="XXX" source="['Value1', 'Value2', 'Value3']" canCreate=true}}

Select mode

In select mode, the combo-box behaves like normal select-box where user is bound to choose a value from the source. Select mode can be configured by setting mode to "select":

(Please replace XXX by the desired field name)

Code

XML

{{combo-box model=editModel field="XXX" source="['Value1', 'Value2', 'Value3']" mode="select"}}