Working with Person or Group and DateTime using Jquery/client object model – Part 1

Client object model for SharePoint introduced in SharePoint 2010 and it has been helping developers to accomplish many tasks without writing server side code and deployment of same etc.  And that too with minimum efforts.

I like this new way of writing code at client side and am exploring JavaScript client object model and use of jquery.

I have observed that many developers face issues while working with Person or Group and Date Time fields. So I will explain code for working with these fields using JavaScript client object model and jquery, for list operations like insert/update.

 I want to insert/update data in list using custom form.

I created custom list name - MyTasks with following field:

·        Title – Single line of text

·        Description – Multiple line of text

·         AssignedTo – People or Group (User or Group)

·         DueDate - Date Time fields.

For custom form I created – Simple aspx page by opening site in designer and applied master page for consistent look and feel.

 Now I create custom form as below .



 

Code for above form

I have to add element around People picker field for using SPFindPeoplePicker function in

SPServices-0.7.2.js

Add reference for Jquery and SPServices Jquery library on  page.

After this Add below code for Insert operation:

 

 

 

 

 

In above code I have used SPFindPeoplePicker function in SPServices JS for getting people picker value this function is doing super awesome job for me .

 Function checks for element with display name we passed and gets complete object of people picker in that particular row.

One more thing this people picker accepts User as well as Group value – I have written code considering user will be added to this fields every time.

For group we need to modify code as below:

ppAssignedTo.dictionaryEntries[0].SPGroupID + ";#" + ppAssignedTo.currentValue;

.currentValue – gives display name

ppAssignedTo – object  retruns almost all thing you required for user or group field.

 

Click on Submit button it should save your data in List.

  

Continued - Working with Person or Group and DateTime using Jquery/client object model – Part 2