Creating a Person Selector: os:PeopleSelector

With the os:PeopleSelector tag, a developer can add a container-styled drop-down list that allows users to select from a group of people. The tag will also set a form field with the associated value from the drop-down. This tag should be added using syntax similar to the following:

<os:PeopleSelector group="${ViewerFriends}" multiple="false" max="10"
   inputName="viewerFriends"/>

The os:PeopleSelector tag has several attributes that may be assigned to it, as listed in Table 7-8.

Table 7-8. os:PeopleSelector attributes

Attribute

Description

group (string or object)

The group that should be displayed in the drop-down. This may either be an array of OpenSocial Person objects, or a DataContext key that refers to an array of Person objects. This field is required.

inputName (string)

The name of the input box that will be used to store the selected IDs.

max (number)

The maximum number of people that may be selected.

multiple (Boolean)

Whether multiple people may be selected.

onselect (string)

The JavaScript function to invoke when a new person is selected.

var (string)

The top-level DataContext key that is set with the selected IDs.

You add the os:PeopleSelector tag to a gadget using markup similar to the following:

<form action="inviteFriends" method="POST">
   <os:PeopleSelector group="${ViewerFriends}"
                      multiple="true"
                      inputName="viewerFriends"/>
</form>

Get Programming Social Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.