Search This Blog

Sunday, July 2, 2017

People Picker- SharePoint 2013/2106 using JavaScript

People picker insert multiple(Name/Group) in custom list

Note : enable AllowMultiple=true and Select Yes-PeopleAndGroup field in custom list colum settings

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="/_layouts/15/clientpeoplepicker.js"></script>
    <script src="/_layouts/15/clienttemplates.js"></script>
    <script src="/_layouts/15/clientforms.js"></script>
    <script src="/_layouts/15/sp.core.js"></script>
    <script src="/_layouts/15/sp.runtime.js"></script>
    <script src="/_layouts/15/autofill.js"></script>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(getUserInformation, "sp.js");
        function getUserInformation() {

            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            var currentUser = web.get_currentUser();

            initializePeoplePicker('peoplePickerDiv');

        }
        // Render and initialize the client-side People Picker.
        function initializePeoplePicker(peoplePickerElementId) {

            // Create a schema to store picker properties, and set the properties.
            var schema = {};
            schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
            schema['SearchPrincipalSource'] = 15;
            schema['ResolvePrincipalSource'] = 15;
            schema['AllowMultipleValues'] = true;
            schema['MaximumEntitySuggestions'] = 50;
            schema['Width'] = '280px';

            // Render and initialize the picker.
            // Pass the ID of the DOM element that contains the picker, an array of initial
            // PickerEntity objects to set the picker value, and a schema that defines
            // picker properties.
            this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
        }
    function getUserInfo(PeoplepickerId) {
        var UsersID = "";
        var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"];

        if (peoplePicker.HasInputError) return false; // if any error
        else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users
        else if (peoplePicker.TotalUserCount > 0) {
            // Get information about all users.
            var users = peoplePicker.GetAllUserInfo();
            //var userInfo = '';
            //var promise = '';
            for (var i = 0; i < users.length; i++) {
                UsersID += users[i].DisplayText + "\n";
                UsersID += users[i].EntityData.Email;
            }

            //insert data to sharepoint
            var ctx = new SP.ClientContext.get_current();
            var web = ctx.get_web();
            var list = web.get_lists().getByTitle("System Authorization Request");
            var listCreationInformation = new SP.ListItemCreationInformation();
            var listItem = list.addItem(listCreationInformation);

            // Get user keys.
            var keys = peoplePicker.GetAllUserKeys();
            var finalusers = new Array();
            for (var i = 0; i < users.length; i++) {
                var arryuser = users[i];
                finalusers.push(SP.FieldUserValue.fromUser(arryuser.Key));
            }
            listItem.set_item("DirectManager", finalusers);
            listItem.update();
            ctx.load(listItem);

            ctx.executeQueryAsync(function () {
                console.log("inserted successfully");
                return UsersID;
            }, function (sender, args) {
                console.log("something went wrong");
                console.log('Err: ' + args.get_message());
                return UsersID;
            });

        }
    }
    function saveUserinList() {
        getUserInfo('peoplePickerDiv');
    }
    </script>
</head>
<body>
    <div id="peoplePickerDiv"></div>
    <button type="button" id="btnSubmit" onclick="saveUserinList()" style="margin-top: 10px;">Submit</button>
</body>

</html>


People picker Save to custom List (one more)
--------------------------------------------

step 1: create one TestList with AssigningTo - persona and Group column type
step 2: create one testPage add scripteditor webpart and insert below code.

<html>
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript" src="_layouts/15/clienttemplates.js"></script>
            <script type="text/javascript" src="_layouts/15/clientforms.js"></script>
            <script type="text/javascript" src="_layouts/15/clientpeoplepicker.js"></script>
            <script type="text/javascript" src="_layouts/15/autofill.js"></script>
            <script>
                var UserId;
                var listname = "TestList";

                $(document).ready(function () {
                    initializePeoplePicker("_UserName");
                });

                function initializePeoplePicker(peoplePickerElementId) {
                    var schema = {};
                    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
                    schema['SearchPrincipalSource'] = 15;
                    schema['ResolvePrincipalSource'] = 15;
                    schema['AllowMultipleValues'] = false;
                    schema['MaximumEntitySuggestions'] = 50;
                    schema['Width'] = '280px';

                    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
                }

                function saveUser() {
                    ensureUser();
                    $.ajax({
                        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listname + "')/items",
                        type: "POST",
                        async: false,
                        data: JSON.stringify({
                            __metadata: {
                                type: "SP.Data.TestListListItem"
                            },
                            AssigningToId: UserId
                        }),
                        headers: {
                            "Accept": "application/json;odata=verbose",
                            "Content-Type": "application/json;odata=verbose",
                            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                            "X-HTTP-Method": "POST",
                        },
                        success: function (data) {
                            alert("User Name is saved successfully");
                        },
                        error: function (error) {
                            alert(JSON.stringify(error));
                        }
                    });
                    //alert("Yes");
                }

                function ensureUser() {
                    var peoplePickerTopDivId = $('#_UserName').children().children().attr('id');
                    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerTopDivId];
                    var users = peoplePicker.GetAllUserInfo();
                    var arryuser = users[0];
                    if (arryuser) {
                        var payload = { 'logonName': arryuser.Key };
                        $.ajax({
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/ensureuser",
                            type: "POST",
                            async: false,
                            contentType: "application/json;odata=verbose",
                            data: JSON.stringify(payload),
                            headers: {
                                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                                "accept": "application/json;odata=verbose"
                            },
                            success: function (data, status, xhr) {
                                UserId = data.d.Id;
                            },
                            error: function (xhr, status, error) {
                            }
                        });
                    }
                    else {
                        UserId = 0;
                    }

                }
            </script>
    </head>
    <body>
        <div>
            <label>User Name:</label>
            <div id="_UserName" class="peoplepicker"></div>
        </div>
        <div>
            <button type="button" id="btnSubmit" onclick="saveUser()" style="margin-top: 10px;">Submit</button>
        </div>
    </body>

</html>

refer :https://www.c-sharpcorner.com/article/custom-people-picker-in-sharepoint-online/


---------------------------------------Another one-----------------------------------------


Step 2 : Paste below code.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://onlinesite/_layouts/15/clientpeoplepicker.js"></script>
<script src="http://onlinesite/_layouts/15/clienttemplates.js"></script>
<script src="http://onlinesite/_layouts/15/clientforms.js"></script>
<script src="http://onlinesite/_layouts/15/sp.core.js"></script>
<script src="http://onlinesite/_layouts/15/sp.runtime.js"></script>
<script src="http://onlinesite/_layouts/15/autofill.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getUserInformation, "sp.js");
      function getUserInformation() {

          var context = new SP.ClientContext.get_current();
          var web = context.get_web();
          var currentUser = web.get_currentUser();

          initializePeoplePicker('peoplePickerDiv');

      }
      // Render and initialize the client-side People Picker.
      function initializePeoplePicker(peoplePickerElementId) {

          // Create a schema to store picker properties, and set the properties.
          var schema = {};
          schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
          schema['SearchPrincipalSource'] = 15;
          schema['ResolvePrincipalSource'] = 15;
          schema['AllowMultipleValues'] = true;
          schema['MaximumEntitySuggestions'] = 50;
          schema['Width'] = '280px';

          // Render and initialize the picker.
          // Pass the ID of the DOM element that contains the picker, an array of initial
          // PickerEntity objects to set the picker value, and a schema that defines
          // picker properties.
          this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
      }

      function getUserInfo() {

          // Get the people picker object from the page.
          var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
          var displytext = "";
          // Get information about all users.
          var users = peoplePicker.GetAllUserInfo();
          var userInfo = '';
          for (var i = 0; i < users.length; i++) {
              var user = users[i];
              for (var userProperty in user) {
                  userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
                  displytext= user["DisplayText"];
              }
          }
          $('#resolvedUsers').html(userInfo);

          // Get user keys.
          var keys = peoplePicker.GetAllUserKeys();
          $('#userKeys').html(keys);
          document.getElementById("txtUser").value = keys;
          document.getElementById("txtUserName").value = displytext;
      }

</script>

<div style="background-color:red" id="peoplePickerDiv">

</div>
<div>
    <br />
    <input type="text" id="txtUser" />
    <input type="text" id="txtUserName" />
    <input type="button" value="Get User Info" onclick="getUserInfo()"></input>
    <br />
    <h1>User info:</h1>
    <p id="resolvedUsers"></p>
    <h1>User keys:</h1>
    <p id="userKeys"></p>
    <h1>User ID:</h1>
    <p id="userId"></p>
</div>

No comments:

Post a Comment