jquerysharepoint-2013peoplepicker

SharePoint client side people picker group id


I have created client side people picker using hmtl and jquery as shown in following URL

https://www.c-sharpcorner.com/blogs/client-side-people-picker-in-sharepoint-2013

I can enter user as well group names, that's working fine. But I want to save users as well groups into SharePoint list. It's not working for group names. I want to identify whether it's user or group and if group I want to add it same as user shown in above url.

What I am looking is allow user to enter user as well groups. Once they hit save button all users and groups should be saved into SharePoint list item

Any help is appreciated.


Solution

  • Sample test demo:

    CustomPeoplePicker:
        <div id="peoplePickerDiv"></div>
        <input id="Button1" onclick="SaveItem()" type="button" value="button" />
        <script src="/_layouts/15/sp.runtime.js"></script>
        <script src="/_layouts/15/sp.js"></script>
        <script src="/_layouts/15/1033/strings.js"></script>
        <script src="/_layouts/15/clienttemplates.js"></script>
        <script src="/_layouts/15/clientforms.js"></script>
        <script src="/_layouts/15/clientpeoplepicker.js"></script>
        <script src="/_layouts/15/autofill.js"></script>
        <script src="_layouts/15/sp.core.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
            })
    
            function sharePointReady() {
                context = new SP.ClientContext.get_current();
                web = context.get_web();
                var schema = {};
                schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
                schema['SearchPrincipalSource'] = 15;
                schema['ResolvePrincipalSource'] = 15;
                schema['AllowMultipleValues'] = true;
                schema['MaximumEntitySuggestions'] = 50;
                schema['Width'] = '280px';
    
                this.SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', null, schema);
            }
    
            function SaveItem() {
                var ctx = new SP.ClientContext.get_current();
                var web = context.get_web();
                var list = web.get_lists().getByTitle("MyList");
                var listCreationInformation = new SP.ListItemCreationInformation();
                var listItem = list.addItem(listCreationInformation);
                var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
                // Get information about all users.
                var users = peoplePicker.GetAllUserInfo();
                // 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("Title", "Title");
                listItem.set_item("Requestor", finalusers);
                listItem.update();
                ctx.load(listItem);
                ctx.executeQueryAsync(
                    Function.createDelegate(this, function () {
                        console.log(listItem);
                    }),
                    Function.createDelegate(this, function (sender, args) {
                        alert('Query failed. Error: ' + args.get_message());
                    })
                );
            }
        </script>