The Single Select control is used to create a dropdown list of items that can be populated statically or retrieved through a service.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is commonly used to create a list of items that can be either populated statically, or retrieved though a service.
Behavior
Tab Index Form control tabbing sequence index. Tab indices start at 1, and may be set sparsely.
Placeholder Text to be displayed before a selection has been made
Items
Item Lookup Mode Start Empty, Items From Service, Items From Static List, Items From Config Option. Must select one of these options, and configure its respective options (List Items Service, Service Input Data, or Static List) otherwise the single select will not populate.
List Items Service Service to populate item selection
Service Input Data Data to be passed to the AJAX service that populates the select list items
Item List Bound list of items to populate selection
Data Mapping Set which property to take as the selection value, and which to display in the selection. If unset, display will default to "value" property, and value will default to "name" property
BusinessData Mapping Refers to the Binding when bound to a complex type. Set which property to take as the selection value, and which to display in the selection.
Static List Static list of items to populate selection. Note: "value" is used as the display property
Appearance
Size Default, Large, Small
Width Width in px, %, em; for example: 50px, 20%, 0.4em, if no unit is specified, px is assumes
Label Placement Placement of the label; Note: Labels on the left will change the specified width of the control
Example 1
These are the configuration option settings...
This is the result...
Example 2
When either using a Static List to populate the control, or if leaving the Data Mapping blank, the Single Select by default uses the value property as the display value.
For example, if using the following configuration options...
This will be the result...
Example 3
The Single Select control can be used to determine an amount based on the selection.
Here are the configuration option settings...
Since the Name has an amount associated with it the total will be determined by the quantity and selection made.
The formula for the Total is the Unit (Control Id for the Single Select) multiplied by the Quantity (the Control ID for the Integer control).
Example 4
This example goes over how to use an AJAX service to populate the Single Select control. Make sure to leave the input of your Ajax service named 'data' and the output named 'results'.
The Item Lookup Mode needs to be set to Items From Service
If the AJAX service you want to use is already created, you can select it by clicking Select..., or if the AJAX service has not been created click New..., for this example the AJAX service has already been created and is attached to the List Items Service.
Within the AJAX service there is a Server Script.
This is the result...
Events
With the single select control, there are 4 types of event handlers:
- On Load When the page loads
- On Service Items When there is an item service return
- On Service Error When there is a service error
- On Change When there is a change
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
- Author: Erick Quintanilla, Courtney Silva
- Date Created: June 6, 2015
- Date Modified: October 30, 2015
Comments