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
{{#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
{{#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
{{#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
<tr><td>Endpoints:</td><td class="editable-field">
{{select-box model=editModel field="DAVID/DISTRIBUTIONENDPOINTS" maxlength=1000}}
</td></tr>
Read mode
<tr><td>Endpoints:</td><td>{{select-box model=model field="DAVID/DISTRIBUTIONENDPOINTS" editable=false}}</td></tr>
Configuration of Distribution field
edit mode
{{combo-box model=editModel field="Distribution"}}
read mode
<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
{{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
{{select-box model=editModel field="XXX" source="['Value1', 'Value2', 'Value3']"}}