Drop Down List Control
The Drop-Down List control allows you to select an item from a list of values.
See the following resources for more information:
- See for information on using a rule on a view to load related values in the same SmartObject based on the value of a selected field.
- See for an example of using a default value and filtering the control with data from another control.
- See for an example of using a SmartObject as the data source for the control.
- See for more information about using the control with the Initialized event to improve the user experience when a view or form is loaded, for example to populate a drop-down list with data in the background while the rest of the view is available for data entry.
Try it yourself!
- Create a .
- Drag the control onto the canvas. You can find the control in the Input section of the Toolbox.
- Add a data source to your control. To do this, configure the Type under the of the section.
- Configure the rest of the as required.
- Run the view.
When you click on the ellipsis next to Data Source Type in the control's , the Configure Data Source page opens. You can use a SmartObject or a .
Fields | Description |
---|---|
You can create a to be used in the drop-down list. Select the option and click the ellipsis next to List Items to configure the list. See for an example | |
List Items | Click the ellipsis next to List Items to configure the list of static values for the control. |
Use a SmartObject as data source | A SmartObject can be used as data source. |
SmartObject | Select this option if you want to use a SmartObject as the data source. |
Method | The method that you want to use to populate the control. |
Value | The SmartObject property that you want to use as the value in the control. |
Cache the data | Select this option if you want to cache the SmartObject data to allow for client side filtering when the view or form is offline. |
The to be used. | |
Show items from the selected SmartObject | Select this option if you want to show items from the parent SmartObject in the control. |
Display | The SmartObject property to be used as a display member. Select the item. |
Show items from an associated SmartObject | Select this option if you want to show items from an associated SmartObject in the control. |
Lookup SmartObject | An optional SmartObject that you want to use as the source of the display values. Click on the ellipsis to select the SmartObject. |
Lookup Method | The method that you want to use to executed on the lookup SmartObject when retrieving the display values. |
Source Join Property | The SmartObject property on the original SmartObject that is used to join the original SmartObject with the Lookup SmartObject. |
Lookup Join Property | The SmartObject property on the lookup SmartObject that is used to join the original SmartObject with the Lookup SmartObject. |
Display | The SmartObject property to use as a display member. Select the item by clicking on the ellipsis. |
Filter the data according to another control's value | Select this option if you want to filter the data according to another control's value. |
Parent Control | Specify the control to use to filter the data. |
Parent Join Property | The SmartObject property on the parent control that is used to filter the data. |
Child Join Property | The SmartObject property on the current control that is used to filter the data. |
You can configure a Boolean (Yes/No) property as the default value on the Configure Data Source page. When you create data for this property, the value that you configure as True is shown as the default.
The image below shows a view using the Default property of the Marital Status SmartObject to display the default value of Single. See the section for information on how to use the default value with the control.
- Create a SmartObject called Marital Status with a Default property of type Yes/No to use as the default value.
- Generate an and create the records as shown below. Configure the Single value as True and the rest as False.
- Create another view to use the Marital Status SmartObject, for example an Employees Item view.
- Edit the view and drag a Drop-Down List control onto the canvas.
- Click the ellipsis next to Type in the Data Source section of the control's , and then select the Marital Status SmartObject as the data source for the control and the Default property in the Default Value field.
- Save the configuration.
- Run the view and note that Single is selected.
When you use a default value on the control, a When the view/form initializes rule is created executing a change event on the control, for example When a control [Drop-Down List] on the view/form raises an event [Changed]. If you want to edit the change event, you must edit the When the view/form initializes rule.
When you select to Use a static list of values in the control on the Configure Data Source page and you click the ellipsis, the Fixed List Configuration page opens. You can configure the static list on a or unbound control. When the control is bound, use this page to configure a Value-Display pair where the value of the Value field is stored in the SmartObject, while the value of the Display field is displayed in the control. This is useful for example when you have a product code and product description; you will enter the code in the Value field and the description in the Display field.
When the control is unbound, you can configure static values for both fields. You can use the value of the control with conditional logic, for example, to show/hide other controls according to the selection in the list.
The Value field and Display field values can be the same or they can be different. You can also select the default to display when the control is populated.
The image below shows the configuration of different values to store in the SmartObject and to display in the control.
The image below shows the display values with Autumn as the default value.
- It is recommended to have unique values for the Value field
- The control can contain multiple defaults. If you use the with the control, you can select multiple defaults
- When you use the view's Clear method, the control reverts to the default value, not a blank value
- If you use the Value or Display fields in a rule you must add a condition to your rule to ensure that a loop context is built to retrieve the selected item values. Using the seasons example from the images above, you may want to show a message to the user when they select an item to inform them that the value saved to the SmartObject differs from the display value (which they select) if they want to use it at a later stage. In this scenario, the rule is configured as per the images shown below.
Rule showing For-Each Looping condition
Message using the Display and Value fields of the static drop-down list
You have the option to cache the SmartObject data to enable client-side filtering. This is especially useful when you use a form on a mobile device and you need the data to be available if the device is offline. The control's data set is populated on initial load (from the server), any other changes to the underlying data source's data does not reflect in the current session until another server call is forced to update the data set. To enable the caching of data, select the Cache the data option on the page.
You don't have to configure anything except select the Cache the data option to enable caching. The rules are automatically configured by the server. You can, however, remove these rules and place them somewhere else depending on your needs. This is an explanation of how caching is applied by the system.
Below is a diagram of how the caching is applied in the background to enable client-side filtering.
When you select the Cache the data option, the following two actions are added to the When the View executed Initialize rule event:
- Load [Region Drop-Down List] list control cache with data
- Populate [Region Drop-Down List] list control with cached data
The following steps refer to the diagram shown above and describe what happens in the background when caching is applied:
When you access a form on a mobile device, the view initializes and the rule action to Load list control cache with data executes as shown in point 1. Next, the rule action to populate list control with cached data executes as indicated in point 2. You can select updated data from the drop-down list on the form. When the device goes offline, you can still access the information in the drop-down list.
If you select the options Cache the data and Filter the data according to another control's value on the Configure Data Source page,
the following action is added to the When the View executed Initialize event;
- Load [State Drop-Down List] list control (child control) cache with data
- Populate [State Drop-Down List] list control (parent control) with cached data
- If you filter the cached data, you can remove the filter to reset the list
- When the device is offline and additional records are added to the data set, these are only available once the cached data is retrieved from the server again
You can find the control in the Input section of the Toolbox.
The control interacts with other controls through rules. When you bind properties between different controls, you can use the data to populate properties or set values. Use the following examples for when to use the control with other controls through rules:
- Populate a list control with data: You can populate the control if it has a SmartObject-based data source
- Set a control’s properties: You can configure the settable properties of the control with this action
- Show/Hide: The Visible property allows you to show or hide the control through rules
- Enable/Disable: The Enabled property allows you to enable or disable the control through rules
- Data Transfer: You can transfer multiple values to the control using a semi-colon delimited list in the
- Set Focus: You can use the in the to set focus to the control in runtime
The following events are available on the control:
Rule Events:
- When [control] is Changed: This event executes when the control is set to a new value that is different from the previous value. You can use this event to trigger actions when the control is changed, for example when an item is changed, then set the properties of another control. See for information on using a rule on a view to load related values in the same SmartObject based on the value of a selected field.
- When [control] is Initializing: While you can see this event in the Rule Designer, it has been deprecated. Instead use the .
- When [control] is Populated: This event executes each time the control is loaded. You can execute a rule condition or action when the control loads such as set focus to the control.
- When [control] is Set: This event executes each time the control is set to any value regardless of if the previous value is the same. You can use this for updating cascading controls.
- When you add the control to a List view for filtering purposes, especially when using the same data source as the view, be sure to map the control when you configure the filter as shown below. You do this to keep the correct data source context and enable the filtering to execute correctly.