Adding combo-box component for multi-selection of entries
Combo-box component can be configured with various configuration parameters. For the overall context see Introduction to Details Pane Templates.
Configuration for the property Class of an entry
{{#form-container legacyController=legacyController
$changeClass=false}}
{{#if editable}}
{{#responsive-grid-area}}
<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
{{check-box checked=$changeClass}}
<label style="padding-left:5px">Change Class:</label>
</div>
<div data-col="sm-8 xs-12 valign-center" class="editable-field">
{{combo-box
stateChanged=$changeClass
model=editModelArray
field="Class"
mode="select"
ariaLabel="Select Class"
}}
</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">
{{combo-box model=model field="Class" editable=false}}
</div>
{{/responsive-grid-area}}
{{/if}}
{{/form-container}}
Internationalization is supported. e.g. in German, all classes will be displayed in German in the combo-box and the drop down.
Allowed classes of the tables of the entries is also taken into account, please refer to Adding combo-box component with fixed data source at section “With Class property”.
You can also suggest a subset of classes by updating the template combo-box with the following block.
The source here is just as an example.
{{combo-box
stateChanged=$changeClass
model=editModelArray
field="Class"
mode="select"
ariaLabel="Select Class"
source="['Audio', 'Music']"
}}
Configuration for custom fields
customField property can also be used instead of field.
Edit mode
{{combo-box stateChanged=$changeMY$CUSTOMFIELD model=editModelArray field="MY/CUSTOMFIELD"
source="['Value1', 'Value2', 'Value3']"}}
Read mode
{{combo-box model=model field="MY/CUSTOMFIELD" editable=false}}
Configuration of DAVID/DISTRIBUTIONENDPOINTS custom field
It uses a select box.
Edit mode
{{select-box stateChanged=$changeDAVID_DISTRIBUTIONENDPOINTS model=editModelArray field="DAVID/DISTRIBUTIONENDPOINTS"}}
Read mode
{{select-box model=model field="DAVID/DISTRIBUTIONENDPOINTS" editable=false}}
Configuration for definitions
See Adding combo-box component and binding to dynamic data sources for the list of available definition fields and information about canCreate=true.
{{#form-container legacyController=legacyController
$changeAuthor=false
$changeInstrumentation=false
$changeEndcode=false
$changePresenter=false
$changeEditor=false as |form|}}
{{#if editable}}
<table class="modern-table">
<tbody>
<tr><td>{{check-box checked=$changeInstrumentation}}<label>Change Instrumentation:</label></td><td class="editable-field">
{{combo-box stateChanged=$changeInstrumentation model=editModelArray field="Instrumentation"}}
</td></tr>
<tr><td>{{check-box checked=$changeEndcode}}<label>Change Endcode:</label></td><td class="editable-field">
{{combo-box stateChanged=$changeEndcode model=editModelArray field="Endcode"}}
</td></tr>
<tr><td>{{check-box checked=$changePresenter}}<label>Change Presenter:</label></td><td class="editable-field">
{{combo-box stateChanged=$changePresenter model=editModelArray field="Presenter"}}
</td></tr>
<tr><td>{{check-box checked=$changeAuthor}}<label>Change Author:</label></td><td class="editable-field">
{{combo-box stateChanged=$changeAuthor model=editModelArray field="Author" canCreate=true}}
</td></tr>
<tr><td>{{check-box checked=$changeEditor}}<label>Change Editor:</label></td><td class="editable-field">
{{combo-box stateChanged=$changeEditor model=editModelArray field="Editor" canCreate=true}}
</td></tr>
</tbody>
</table>
{{else}}
<table class="modern-table">
<tbody>
<tr><td>Instrumentation:</td><td>{{combo-box model=model field="Instrumentation" editable=false}}</td></tr>
<tr><td>Endcode:</td><td>{{combo-box model=model field="Endcode" editable=false}}</td></tr>
<tr><td>Presenter:</td><td>{{combo-box model=model field="Presenter" editable=false}}</td></tr>
<tr><td>Author:</td><td>{{combo-box model=model field="Author" editable=false}}</td></tr>
<tr><td>Editor:</td><td>{{combo-box model=model field="Editor" editable=false}}</td></tr>
</tbody>
</table>
{{/if}}
{{/form-container}}