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}}

With Class property

Class values depend on the allowed classes of the tables of the selected entries, for more information, refer Allowed Classes in Database/Table Configuration. You can suggest a subset of classes by updating the template combo-box with the following block. In this example, we allow only Audio, Music, Cart, Graphic and Video entry classes. Note that if the table of entries has for instance the allowed classes Audio and Cart, only Audio will be suggested in the combo-box, overwriting your source.

If you remove the source in the template below, all classes that are allowed for the given entry table (by default all classes are allowed if not defined) will be available.

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']"}}
			</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.

Configuration of DAVID/DISTRIBUTIONENDPOINTS custom field

It uses a select box.

Edit mode

CODE

<tr><td>Endpoints:</td><td class="editable-field">
                    {{select-box model=editModel field="DAVID/DISTRIBUTIONENDPOINTS" maxlength=1000}}
			  
                    </td></tr>

Read mode

CODE

<tr><td>Endpoints:</td><td>{{select-box model=model field="DAVID/DISTRIBUTIONENDPOINTS" editable=false}}</td></tr>

Configuration of Distribution field

edit mode

CODE

{{combo-box model=editModel field="Distribution"}}

read mode

CODE

<tr><td>Distribution:</td><td>{{combo-box model=model field="Distribution" editable=false}}</td></tr>

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 box

The select-box behaves like a combo-box where user is bound to choose a value from the source.

(Please replace XXX by the desired field name)

Code

XML

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