Single select

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.

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.

The appearance configuration properties for the Single select view are shown in the following table:

The behavior configuration properties for the Single select view are shown in the following table:

The Static list has the following name value pairs. This is the result at run time:

The Single select view has the following properties:

• General > Common > Labelis Item.
• General > Common > Control ID is Item.
• Configuration > Behavior > Placeholder is Select Item.
• Configuration > Items > Item lookup mode is Items From Static List.
• Configuration > Items > Static list has the following entries:
  • Name is .50, and Value is Apple.
  • Name is .75, and Value is Orange.
  • Name is .25, and Value is Banana.

The Integer view has the following properties:

• General > Label is Quantity.
• General > Control ID is Quantity.

The Decimal view has the following properties:

• General > Label is Total.
• Behavior > Decimal places is 2.
• Events > Value formula has the following entry:

  @{Item}*@{Quantity}

  where Item is the control ID of the Single select view, and Quantity is the control ID of the Integer view.

At run time, you see the following screen:

Select an item and enter a quantity, and click OK. This is the result: Because the Name field in the Single select view has a numerical value, you can determine the total by the quantity and the item that is selected. The value in the Total field is the unit price (the Control ID of the Single select view) multiplied by the quantity (the Control ID of the Integer view).

The coach or page has a Single select view with following configuration properties:

• Configuration > Behavior > Label is Grocery List.
• Configuration > Behavior > Placeholder is Select Item.
• Configuration > Items > Item lookup mode is Items From Service.
• Configuration > Items > List items service is Retrieve Items Service.

  Note: To create a service flow, click New beside the List items service option.

• Configuration > Items > Item selection data has the following settings:
  • Value property is name.
  • Display property is value.

The service flow is called Retrieve Items Service and has a start event, a server script, and an end event wired together. The server script has the following code to initialize variables:

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";

This is the result at run time:

This is the list of selectable items. The list of items is retrieved from the service flow. The Display property option under Item selection data determines the property that is displayed in the list. If you enter name as the Display property, you will see Item 0, Item 1 etc in the selection list.

When you select an item, the selected item appears in the Item field. The value in the Item field is determined by the Display property option under Business data mapping, which is also the property that is used as the output of the Single select view.

The Customer business object has the following structure:

• An ID parameter of type String.
• A firstname parameter of type String.
• A lastname parameter of type String.

The cust[] list object has the following default values:

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

The coach or page has a Single select view with the following properties:

• General > Label is Name.
• General > Binding is output.firstName.
• Configuration > Behavior > Placeholder is Select a name.
• Configuration > Items > Item lookup mode is Items From Config Option.
• Configuration > Items > Item input data is Customer[].
• Configuration > Items > Item selection data has the following settings:
  • Value property is ID.
  • Display property is firstName.
• Configuration > Items > Output business data has the following settings:
  • Value property is ID.
  • Display property is firstName.

The Text view has the following properties:

• General > Label is Text.
• General > Binding is cust.listSelected.firstName.

This is the result at run time: When you make a selection, the name that you selected is populated in the Text view: