The People Chooser Widget displays a list of contacts so that you can select them and share your content. It also enables you to add new contacts to the existing list and update contact information. This The widget uses Prototype library to get data.
- Import contacts from address book of Yahoo, Gmail etc, using a third part widget called Plaxo Widget.
- Group contacts using tags.
- Select contacts with whom you want to share content.
- Add new contacts with information like address, phone number,alternate email id etc.
- Update existing contact information.
Add this code to the head section of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
@import '<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>';
</style>
<script src="/dekohportal/dwr/engine.js"></script>
<script src="/dekohportal/dwr/util.js"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","peopleChooser","peopleChooser.js")%>">
</script>
The basic syntax to initialize the widget is
<script type="text/javascript">
//<![CDATA[
new PeopleChooser({callback:handlePeopleChooserOnClose,preSelectedContactIdList:'contactDehokIds',showPublicContact:true,fileSeparator:'\\'}); //I had removed this for running of this page ---> preSelectedContactIdList:contactDehokIds,
function handlePeopleChooserOnClose(){
}
//]]>
</script>
Place the following code inside the HTML code. Ensure that you put the Javascript code after the div element in the page so that the element gets registered in the DOM.
<div id='contactDehokIds'></div>
| Options | Since | Description | Default |
|---|
| fileSeparator | V1.0 | File separator. Must be specified for OS other thanWindows | '//' (for Windows OS) | |
| Options | Since | Description | Default |
|---|
| className | V1.0 | CSS class theme name | 'dekoh |
| returnTxtFieldId | V1.0 | Textfield to be filled by the selected buddies | - |
| trayTopMessage | V1.0 | Message to be displayed on top of dialog box. | 'Select buddies to share the content' |
| multiSelect | V1.0 | - | true |
| title | V1.0 | Title of dialog box | 'People Chooser' |
| width | V1.0 | Width of dialog box | 600 |
| height | V1.0 | Height of dialog box | 520 |
| showPublicContact | V1.0 | If 'true' shows default shareable contacts in the list like 'Share to All' etc. | false |
| resizable | V1.0 | - | false |
| preSelectedContactIdList | V1.0 | Array of already selected contacts eg. already shared list of contacts | - |
| callback | V1.0 | If 'returnTextField' is not given, then the callback function is invoked with the selected contacts. | empty function | |
| Function | Parameters | Description |
|---|
| P_addContactFromPlaxo | - | Opens Plaxo Address Book Chooser and adds selected contacts in buddy list. |
| P_addContactToList | Contact object | Adds given contact in existing buddy list. |
| P_addGrpContacts | - | add all contacts in the selected group |
| P_addIndvContact | DekohId or email id | Adds single contact in the existing list |
| P_addOrModifyContact | IsNewContact boolean value pEmailOrDekohId, p_fName:First name, p_lName: Last name, p_cName: Display name, locList: array containing address,city,state,zip,country information. Groups: array of group names, p_Phone: array of phone nos, emailList: array of email-ids | If IsNewContact is 'true', it creates a new contact and adds it to the list. if 'false', it updates the existing contact. |
| P_checkifDataHasChanged | - | Sets timeout for the contact list to be loaded from Plaxo and saves the list if it is not empty. |
| P_closeWindowDialog | - | Closes PeopleChooser window. |
| P_emptyList | - | Empties buddy list. |
| p_GetAllContacts | - | Populates the list with existing buddies. |
| P_listSort | ContactList: an array of contacts descending with a boolean value | sort the buddy list by contact name in ascending or descending manner depending on 2nd parameter. |
| P_listSortToggle | - | Will toggle between list sort ON-OFF. When 'on', the display list will always be alphabetically sorted. Else, in the order how the user adds the contacts |
| P_loadList | - | Loads/Reloads buddy list. |
| P_markAll | bselect: boolean value, if true selects all displayed buddies. If false, deselects all displayed buddies. | Deselects/Selects all the displayed buddies based on boolean value passed. |
| P_openAddContact | displayAddContactDialog: if true, displays dialog box, if false closes it. isNewContact: if true, opens dialog box for adding new buddy and if false opens it for updating buddy info. contactMem: contact object | Opens a new dialog to accept input for adding a new contact |
| P_openAddGroup | bAddGroup: if true, opens dialog. If false closes the same. | Opens a new dialog to accept input for saving the current listed contacts as a new group |
| P_populateGroups | - | Populates group names in the drop-down list. |
| P_returnSelected | - | - |
| P_saveNewContact | - | Saves new contact and add to the currently displayed list |
| P_saveNewGroup | - | Saves the currently selected contact list as a new group. |
| P_saveThisContact | - | Saves email id or dekoh id whichever specified as new buddy and adds it in buddy list. |
| P_setMesage | type: message type. value can be 'error','info' etc. message: message to be displayed. | Displays message at the bottom of dialog box. |
| P_updateContactsToGroup | arrContacts: an array of contacts, group name: name of the group | Updates the client side contacts array with new group addition |
The DWR method mapping XML is given in web.xml as
<init-param>
<param-name>config-peoplechooser</param-name>
<param-value>widgets/peopleChooser/dwr-peopleChooser.xml</param-value>
</init-param>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="peoplechooser">
<param name="class" value="dekoh.portal.widget.peoplechooser.PeopleChooser"/>
<include method="getAllContacts"/>
<include method="addOrUpdateContact"/>
<include method="addContactToGroup"/>
<include method="getContactsForGroup"/>
<include method="getAllGroups"/>
<include method="addNewContact"/>
</create>
<convert converter="bean"
match="dekoh.portal.widget.peoplechooser.PeopleObject"/>
<convert converter="bean"
match="dekoh.portal.widget.peoplechooser.ContactObject"/>
</allow>
</dwr>
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
- ClassName: dekoh.portal.widget.peoplechooser.PeopleChooser
| Method Name | Functionality |
|---|
| getAllContacts | Returns list of 'ContactObject' that has a'Contact' object that represents an existing contact for the currently logged user and a map of URLs of icons for that particular contact. |
| AddOrUpdateContact | Checks if the given dekohId or E-mail address is already present, if so it updates the 'Contact' with info. Passed as parameters else it creates the new 'Contact' and adds the same in the AddressBook of the currently logged in user. |
| addContactToGroup | Updates all contacts which are passed as argument with the given group name. |
| getContactsForGroup | Returns list of 'Contact' objects belongs to given group name. |
| getAllGroups | Returns array of group names which are created by currently logged in user. |
Dekoh Portal Ver 0.4.2 or later.
