1

I have created a Form on SharePoint using SPD, where I have used SharePoint PeoplePicker to get the User automatically.

Below is the code:-

    $(document).ready(function () {

        // Specify the unique ID of the DOM element where the
        // picker will render.
        initializePeoplePicker('temp');
       //How can I use class here.
       //initializePeoplePicker('classnamehere')

    });


// 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'] = false;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '180px';

        // 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);
       $("temp_TopSpan").removeAttr("style").attr("style","width:180px");

    }

The above code works fine for the unique Id.

How can I run this function for a class instead if ID. Because I am Adding new rows in the table dynamically and each new row with 2nd column should have peoplepicker div.

  • Client People Picker adds "TopSpan" string to the Id of div and not class. So you have to use ID only. For your case you can use counter for Ids like temp1, temp2, temp3, etc. That will be easy for you. – Ganesh Sanap Nov 8 '18 at 6:02
  • Thanks @GaneshSanap for the help. On new row add button I added the following line initializePeoplePicker('temp' + newRowCount); where newRowCount is the index of the row, which bought peoplepicker in the new row. – BBRK Nov 8 '18 at 8:05
  • Great... Is it working as expected? – Ganesh Sanap Nov 8 '18 at 10:41
  • Yes, @GaneshSanap it is working as expected. – BBRK Nov 8 '18 at 10:46
0

The client side people picker internally has the following components:

  1. An input text box to enter names for users, groups, and claims.
  2. A span control that shows the names of resolved users, groups, and claims.
  3. A hidden div element that autofills a drop-down box with matching query results.
  4. An autofill control.

Client People Picker adds "TopSpan" string to the Id of hidden div and not class.

So you have to use only ID to get the resolved users or any other details from people picker.

For your case you can use counter for Ids like temp1, temp2, temp3, etc. That will be easy for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.