SharePoint client side people picker group id

Question

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.

Try to get deeper understanding in the people picker. here in the answers are some very useful links sharepoint.stackexchange.com/questions/255938/… — bresleveloper
Yes I understand it. I believe it's for restrict single group's users for people picker. But 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. — Dhaval K
Yes I understood that. Since that suppose to be default behavior I would bet that the code you copied is configured otherwise. Therefore with some research you would find it. Forgive me for the lack of time for testing it myself. — bresleveloper
I don't understand why people give down votes for valid questions :( — Dhaval K

Lee_MSFT Lee_MSFT · Accepted Answer · 2019-11-25T07:04:19

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>

SharePoint client side people picker group id

1 Answers