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 https://sharepoint.stackexchange.com/questions/255938/sharepointgroupid-for-peoplepicker — bresleveloper, Nov 24 '19 at 04:37
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, Nov 24 '19 at 04:42
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, Nov 24 '19 at 13:53
I don't understand why people give down votes for valid questions :( — Dhaval K, Nov 25 '19 at 08:32
there was a movie with a line "not all beings are as unforgiving as you". but some are. i'll give my vote to the one that will find me that movie — bresleveloper, Nov 25 '19 at 15:26

score 2 · Accepted Answer · answered Nov 25 '19 at 07:04

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>

Yes JSOM is working fine. I am using SPServices to save list item. I believe it needs format like ";#" + userId + ";#" + userName. So I will need group id too. Is there any way we can get group id in same code. I am accepting this answer as it's working answer. Thanks — Dhaval K, Nov 26 '19 at 11:29

SharePoint client side people picker group id

1 Answers1