Single select
Generates a drop-down list. You can populate the list either statically or by using a service.
Data binding
Set or modify the data binding for the view in the General properties. The view can be bound to an ANY type.
Configuration properties
Under Configuration, set or modify the appearance and behavior properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
Appearance configuration property | Description | Data type |
---|---|---|
Width | The width of the view. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. | String |
Size | The size of the text in the view, the size of the label text, and the amount of padding around the text. For example, to make the text and label more readable on smart phones, you can set this configuration option to Large to compensate for the small screen size. | String |
Label placement | The position of the label. | String |
Label width | The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. | String |
Behavior configuration property | Description | Data type |
---|---|---|
Tab index | The tabbing sequence index of the form control. The tab indices start at 1 and can be set sparsely. For example, you can use 1, 5, 10. | Integer |
Placeholder | Text that is displayed before a selection is made. | String |
The items configuration properties for the Single select view are shown in the following table:
Item configuration property | Description | Data type |
---|---|---|
Item lookup mode | The method used to populate the
list of items that the user can select from. Note: Make sure
the correct option is selected, otherwise the list will not be populated
correctly.
|
String |
List items service | The service used to populate the list of items that appear in the selection list. The service is used when the Item lookup mode is Items From Service. The service is a service flow with appropriate Ajax access that provides the selection list based on the data provided by the Service input data business object. You can use this option as an alternative to binding the view to a list object. | Service flow |
Service input data | A business object that provides the input data that is passed to the service flow that populates the selection list. This option is used when the Item lookup mode is Items From Service. | ANY |
Item input data | A business object list that populates the selection list. This property is used only if the Item lookup mode is Items From Config Option. | ANY[] |
Item selection data | In the Display property field, set the business object property to display in the selection list. If no values are specified for the data mapping properties, the default values are name for Value property, and value for Display property. | SelectDataMapping |
Output business data | When the view is bound to a complex type, the property that the user selects is passed to the property specified in Display property and to the property that is bound to the view. | SelectDataMapping |
Static list | A static list of items to populate the selection list. Use this option only for a static list. Do not specify a variable for this option. For a variable list, use the Items From Config Option lookup mode. | NameValuePair[] |
The selection state is copied to the listSelected property in the input business object list. You can retrieve the selection by binding a view to this property. See Example: Populating items by using a list business object.
Example: Populating items from a static list
This example uses a Single select view with the label Grocery list and the Item lookup mode set to Items From Static List
Name | Value |
---|---|
Item 1 | Bread |
Item 2 | Milk |
Item 3 | Bananas |
Item 4 | Rice |
Example: Calculating totals using items from a static list
This example uses the value of the Name field in a static list to calculate the value of another field.
The Coach has a Horizontal Layout that contains a Single select view, an Integer view and a Decimal view. The coach also has a Button view.
- is Item.
- is Item.
- is Select Item.
- Items From Static List. is
- Name is .50, and Value is Apple.
- Name is .75, and Value is Orange.
- Name is .25, and Value is Banana.
has the following entries:
- Quantity. is
- Quantity. is
- Total. is
- is 2.
where Item is the control ID of the Single select view, and Quantity is the control ID of the Integer view.@{Item}*@{Quantity}
has the following entry:
The Button view has the label OK.
Example: Populating items from a service flow
This example uses a service flow with Ajax access to initialize a list that is used as the selection list.
Note: By default, Ajax access is allowed only to trusted callers. To run the coach within Process Designer, go to the Overview tab in the service flow and change the Ajax access to Allow calls from all callers.
- is Grocery List.
- Select Item. is
- Items From Service. is
Note: To create a service flow, click New beside the List items service option.
is Retrieve Items Service.- Value property is name.
- Display property is value.
has the following settings:
tw.local.results = new tw.object.listOf.NameValuePair();
tw.local.results[0] = new tw.object.NameValuePair();
tw.local.results[0].name = "Item 0";
tw.local.results[0].value = "Milk";
tw.local.results[1] = new tw.object.NameValuePair();
tw.local.results[1].name = "Item 1";
tw.local.results[1].value = "Bread";
tw.local.results[2] = new tw.object.NameValuePair();
tw.local.results[2].name = "Item 2";
tw.local.results[2].value = "Bananas";
tw.local.results[3] = new tw.object.NameValuePair();
tw.local.results[3].name = "Item 3";
tw.local.results[3].value = "Rice";
Example: Populating items by using a list business object
This example uses a cust[] list object of type Customer to populate a list of first names in the selection list. When the user selects a name, the selection is displayed in a text box. The client-side human service has the private variables cust and output, both of type Customer.
- An ID parameter of type
String
. - A firstname parameter of type
String
. - A lastname parameter of type
String
.
var autoObject = [];
autoObject[0] = {};
autoObject[0].ID = "000";
autoObject[0].firstName = "Pierre";
autoObject[0].lastName = "de Fermat";
autoObject[1] = {};
autoObject[1].ID = "001";
autoObject[1].firstName = "Isaac";
autoObject[1].lastName = "Newton";
autoObject[2] = {};
autoObject[2].ID = "002";
autoObject[2].firstName = "John";
autoObject[2].lastName = "Venn";
autoObject
- is Name.
- is output.firstName.
- Select a name. is
- Items From Config Option. is
- is Customer[].
- Value property is ID.
- Display property is firstName.
has the following settings:- Value property is ID.
- Display property is firstName.
has the following settings:
- is Text.
- is cust.listSelected.firstName.
Events
Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. The Single select view has the following types of event handlers:
- On load: Activated when the page loads. For example:
console.log(me.getItemCount());
- On change: Activated when the bound data changes. For example:
${SingleSelect2}.reloadServiceItems(me.getSelectedIndices());
- On service items: Activated when the called service returns a list of
items. Activated only if Item lookup mode is set to Items From
Service.
console.log("SingleSelect1 item service retrieved items successfully");
- On service error: Activated when the called service returns an service
error. Activated only if Item lookup mode is set to Items From
Service
me.clearItems();
Methods
For detailed information on the available methods for the Single select view, see the Single select JavaScript API.
Additional resources
For
information about how to create a coach, see Building coaches.
For information about
standard properties (General, Configuration, Positioning, Visibility,
and HTML Attributes), see View properties.