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

HTML

{{#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.

CODE

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

CODE

{{combo-box stateChanged=$changeMY$CUSTOMFIELD model=editModelArray field="MY/CUSTOMFIELD"
      source="['Value1', 'Value2', 'Value3']"}}

Read mode

CODE

{{combo-box model=model field="MY/CUSTOMFIELD" editable=false}}

Configuration of DAVID/DISTRIBUTIONENDPOINTS custom field

It uses a select box.

Edit mode

CODE

{{select-box stateChanged=$changeDAVID_DISTRIBUTIONENDPOINTS model=editModelArray field="DAVID/DISTRIBUTIONENDPOINTS"}}

Read mode

CODE

{{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.

CODE

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