Adding combo-box component and binding to dynamic data sources
For using a combo-box for editing definition lists you have to configure the Details Pane Template accordingly.
Since DPE 2.8.25, we have removed the need to specify "source=legacyController.definitionSource" in the configuration, it will automatically use the definition source if the field is a known definition field.
At the moment, we use dynamic sources only for definitions.
Combo box Configuration Example
The user selects the value of definition list fields from a list of values. For some fields the user has the possibility to enter any value.
The user can also quickly find the desired value from the list by typing in some text.
(Please replace XXX by the desired field name)
Code
{{combo-box model=editModel field="XXX"}}
Allowing free text, too
In addition to selecting and finding the desired value the user can enter any value that is not inside the definition list 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" canCreate=true}}
Full configuration example
In this full example we have included a combo box with free text for the definition list field Author and another one without free text for the definition list field Language.
Also notice that we have added the value when the Details Pane is not in edit mode (read-only mode) so that the user can visualize the values after saving his changes.
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"}}
</div>
<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
{{label-helper value=editModel.Author label="Author:"}}
</div>
<div data-col="sm-8 xs-12 valign-center" class="editable-field">
{{combo-box model=editModel field="Author" canCreate=true}}
</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">
{{model.Language}}
</div>
<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
Author:
</div>
<div data-col="sm-8 xs-12 valign-center">
{{model.Author}}
</div>
{{/responsive-grid-area}}
{{/if}}
{{/form-container}}
Available definition fields
In DigaSystem all these definition fields should be configured without free text (no canCreate property in the combo box).
Except for Author, Editor, Broadcast, Motive and Distribution, which can be configured with free text by default.
You can set the parameter distinct="true" on the combo-box for the fields "Author" and "Editor", which will lead to reading the values from existing ones in the database table instead of reading them from definition lists.
Column | Section | Column | Section |
---|---|---|---|
Intensity | 0 | Era | 17 |
Category | 1 | Playtime | 18 |
Presenter | 2 | Target | 19 |
Production | 3 | Instrumentation | 20 |
Seasonal | 4 | Carrier | 21 |
Program | 5 | Fading | 22 |
Speaker | 6 | Language | 23 |
Style | 7 | Priority | 24 |
End | 8 | Product | 25 |
Tempo | 9 | ProductGroup | 26 |
Customer | 10 | MediumType | 27 |
ExtDevice | 11 | SendRights | 28 |
Project | 12 | Author | 29 |
Container | 13 | Editor | 30 |
MusicFormat | 14 | Broadcast | 31 |
MusicType | 15 | Motive | 32 |
Mood | 16 | Distribution | 33 |