Skip to main content
Skip table of contents

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

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

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

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

ColumnSectionColumnSection
Intensity0Era17
Category1Playtime18
Presenter2Target19
Production3Instrumentation20
Seasonal4Carrier21
Program5Fading22
Speaker6Language23
Style7Priority24
End8Product25
Tempo9ProductGroup26
Customer10MediumType27
ExtDevice11SendRights28
Project12Author29
Container13Editor30
MusicFormat14Broadcast31
MusicType15Motive32
Mood16Distribution33
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.