Populate a Picker Using a List

 

Suppose you need to select multiple records from a list and place them into a picker control. How would you do that?

 

In my “SmartObjects as Data Sources for Drop Downs” posts, I refer to a SmartObject (SmO) which is a list of month names. The table in the SmartBox has three columns: ID, Month Name, and Ordinal.

Suppose you need to select multiple months and record those in a picker, like this:

picker

How does one wire that up?

The List View 

Start by creating a List View of your SmO. Since I only want the month names, I’ll set the layout to generate the view from my Month Name field. The only other setting I’ll make is to configure the Sorting Options to sort the list by Ordinal in ascending order, to give us our January through December list.

The Picker Control 

In the layout, I’m going to drag a picker control onto the canvas. In its properties, the first thing I’m going to do is configure its Data Source:

picker-data-source

Notice the Identifier: field does NOT point to the ID — it points instead to the Month Name field. Setting it this way allows the Data Type of the picker to be set to Text, not to Autonumber.

Here’s a look at the Detail and Picker sections of the control’s properties:

picker-properties

Notice also that the Allow Multiple field is checked, and a delimiter is specified.

There’s nothing special about our list control, so let’s move on to the rules.

Rules

You should already have a rule in place for When the View executed Initialize. Leave that rule alone and create a new rule for When the View executed List item click. Create a Transfer Data Action, and configure it as follows:

Mapping Destination:

picker-rule-transfer-data-1

Context Browser:

picker-rule-transfer-data-2

Look closely at the mapping destination for the picker control. It is set to contain:

  • The picker control (and by this I mean drag the entire picker control from the right — not just a property),

  • The delimiter (it is a semicolon (“;”) by default, but you can change this value in the control’s properties); using the picker’s delimiter attribute offers use of the chosen delimiter instead of simply hardcoding a semicolon.

  • A space

  • the Month Name value from the SmO

  • The delimiter again.

This is the secret sauce to making the picker display its previous contents plus the newly selected value.

Your rule definition should resemble this when completed:

picker-rule-definition

Save your changes and run your View.

Run Your View

When your View first loads, the picker control should be blank, and the list is loaded, but nothing is highlighted:

picker1

Now click on a month in the list. You should see the picker refresh to display the month you clicked!

Picker after one click

Now click on another month — you should see the picker refresh and display BOTH of your selected months!! How cool is THAT?!

Picker after two clicks

 

2 Comments

  1. I’ve edited this post slightly. In the instructions for configuring the Transfer Data rule, I should have noted that dragging the picker control onto the field means dragging the entire picker control — not just a particular property. That’s been corrected.

    Like

  2. Another edit — I’ve changed the rule for the picker slightly to use the control’s delimiter property instead of a hardcoded delimiter. Because duh.

    Like

Comments are closed.