Use of SharePoint ClientPeoplePicker, people picker, people editor, set initial value, js, jQuery, and C# boh ways

SharePoint newly introduced ClientPeoplePicker PeopleEditor, PeoplePicker control, that is really good control in terms of customer experience.

We will see today that how we should use SharePoints People Picker.

instead of using below tradition people picker that introduced before SharePoint 2010 / MOSS

<SharePoint:PeopleEditor ID=”spPeoplePicker” runat=”server” SelectionSet=”User” />


and setting javascript to fetch uses while typing on control Microsoft have done this or we can say Microsoft baought it and fit it in sharepoint 2013 release.
we can use ClientPeoplePicker

Assuming audience have basic knowledge of SharePoint coding.

<SharePoint:ClientPeoplePicker ValidationEnabled="true" ID="pplDemoPraveen" runat="server" VisibleSuggestions="5" AutoFillEnabled="True" AllowEmailAddresses="true" Rows="1" AllowMultipleEntities="false" CssClass="ms-long ms-spellcheck-true" Height="85px"  />



C# Code to get SPUser:


if( pplDemo.ResolvedEntities.Count > 0)
{
SPUser oUser = oWeb.SiteUsers[((PickerEntity)pplDemo.ResolvedEntities[0]).Key];

             if (oUser != null)
             {
               // do your stuff.
             }
}


Now see How can we get selected value from JavaScript / jQuery / client side
I am putting sample to get json details which you can get and its format, you can pick what ever details you want.

// value from first input field in client people picker div
var data = $("Div[title='YourPPLPicker'] > input" ).val(); 
var json = JSON.parse(data);

// and now you can see the properties
alert(json[0].DisplayText);

/*
    [
    {
    "Key":"i:0#.w|Domain\\userLogin",
    "Description":"Domain\\userLogin",
    "DisplayText":"Praveen, P",
    "EntityType":"User",
    "ProviderDisplayName":"Active Directory",
    "ProviderName":"AD",
    "IsResolved":true,
    "EntityData":
        {"Title":"Arch",
        "MobilePhone":"+91-88",
        "SIPAddress":"",
        "Department":"",
        "Email":"Praveen@domain.com"
        },
    "MultipleMatches":[],
    "AutoFillKey":"i:0#.w|Domain\\userLogin",
    "AutoFillDisplayText":"Praveen P",
    "AutoFillSubDisplayText":"",
    "AutoFillTitleText":"xyz@xyz\nActive Directory\xyz\\xyz",
    "DomainText":"userLogin.local",
    "Resolved":true,
    "LocalSearchTerm":"xcv"
    }
    ]
*/

For more details please refer 

https://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.clientpeoplepicker_members.aspx



--
Comments & Feedback are welcome, and yeah don't forget to share make short link wherever needed.
.