You are here:
Dropdown
The Dropdown UI control is a drop-down control that you can use in the HeaderLine control. You can use it as a standalone control and is available for the Consumer Goods Cloud solution. It supports both edit and visibility rights. The quick filter is modeled by using the Dropdown UI control.
Required Editions
| Available in Lightning Experience in Professional, Unlimited, and Enterprise Editions that have Consumer Goods Cloud enabled. |
In this scenario, the Dropdown UI control displays the list items that are defined within the control and the Business Logic filters the list depending on the selected item of the drop-down. The Dropdown UI control has these properties.
Attributes
| Attribute | Description | Required | Type |
|---|---|---|---|
| name | Refers to the name of the control. It must be unique. | Mandatory | String |
| datasource | Refers to the datasource that contains the items that are filtered. | Mandatory | List Object |
| width | Refers to the width of the control. It is defined as a numeric value and can be defined in px or em. By default, the value is 210px. | Optional | String |
| textLines | Defines after how many lines the text in the expanded quick filter must be truncated with ellipses. The allowed values are 1 and 2. | Optional | Integer |
| Bindings | Defines the container element that contains the resources and binding data. | Mandatory | |
| Items | Defines the items in the list. It is recommended to use a maximum of 200 items in the list. | Mandatory | |
| Events | Defines the container element that contains the name of the event which is called in the process/framework. | Optional |
Binding Target Properties
The Dropdown UI control supports these properties for the binding targets that are specified in the control.
| Target | Description | Binding Type | Required |
|---|---|---|---|
| label | Refers to the label that’s shown when no filter is selected. | Label | Mandatory |
| Headline | Refers to the headline of the drop-down control. | Label | Optional |
| Icon | Refers to the icon that’s shown in the control. | Image | Optional |
| IconSelected | Refers to the icon that’s shown when the drop-down is open. | Image | Optional |
| Editable | Refers to the editable property of the control. | Editable | Optional |
| Visible | Refers to the visible property of the control. | Visible | Optional |
Items
This table describes the properties of the binding targets that are supported by the Items attribute.
| Target | Description | Binding Type | Required |
|---|---|---|---|
| IsSelected | Refers to the selection state specified in the list items. | Boolean | Mandatory |
| ItemText | Refers to labels that are shown for the items. | Label or Text The label binding type is used for content that can be translated and text is used for already translated content. |
Mandatory |
| SpecialOption | Refers to the option used to define the clear item. If more than one option is marked as clear option, the first option is used and the remaining are ignored. An error is also logged. Here’s an example. |
Null or Text. For example, Clear. | Optional |
Events
The events triggered by the control are defined in this table. Events are triggered only if they are specified in the control.
| Event | Event Trigger | Required |
|---|---|---|
| DropdownOpeningEvent | The event is triggered when a CG Cloud offline mobile app user taps on the drop-down control. | Optional |
| ItemsSelectedEvent | The event is triggered when an item is selected or the filter is cleared. It shows an array of objects. | Optional |
Sample Contract
<HeaderLine>
<Dropdown name="Unique Name inside Modeler" dataSource="ProcessContext::SomeBo.filterList.Items[]" width="300px" textLines="2" >
<Bindings>
<Resource target="Label" type="Label" id="MyFilterLabelId" defaultLabel="Some Label" />
<Resource target="Headline" type="Label" id="MyFilterLabelId" defaultLabel="Some Headline" />
<Resource target="Icon" type="Image" id="MyFilterIconId" />
<Resource target="IconSelected" type="Image" id="MyFilterPressedIconId" />
<Binding target="Editable" type="Editable" call="ProcessContext::SomeBo.someFunction" />
<Binding target="Visible" type="Visible" call="ProcessContext::SomeBo.someFunction" />
</Bindings>
<Items>
<Bindings>
<Binding target="ItemText" type="Label" binding=".myLabelIdField" />
<Binding target="IsSelected" type="Bool" binding=".mySelectedField" bindingMode="TWO_WAY" />
<Binding target="SpecialOption" binding=".specialOption" type="Text" bindingMode="ONE_WAY" />
</Bindings>
</Items>
<Events>
<DropdownOpeningEvent event="MyFilterOpening" />
<ItemsSelectedEvent event="filterSelected">
<Params>
<Param name="pKey" value=".pKey" />
</Params>
</ItemsSelectedEvent>
</Events>
</Dropdown>
</HeaderLine>
A warning message appears while working on the corresponding Process contract for a ListObject (LO) bound to a Dropdown UI control in these scenarios.
- The value of the paging attribute is set as true for the LO.
- The paging attribute is not specified for the LO (and the default value is considered as true).
Also, momentum scrolling is supported for the Dropdown UI control. The scrolling doesn’t immediately stop and the drop-down list items continue to scroll for a while after the CG offline mobile app user finishes the scroll gesture and removes their finger from the Offline Mobile App device touchscreen.
<ListObject name="LoQuickFilter" generateLoadMethod="true" paging="false" schemaVersion="1.1">
<DataSource name="DsLoQuickFilter" />
<Item objectClass="LiQuickFilter" />
<Methods>
<Method name="beforeSaveAsync" />
<Method name="afterSaveAsync" />
<Method name="afterLoadAsync" />
<Method name="beforeLoadAsync" />
<Method name="afterDoValidateAsync" />
<Method name="beforeDoValidateAsync" />
<Method name="loadAsync" />
<Method name="saveAsync" />
</Methods>
</ListObject>