0

I use the following code to create row dynamically. Each row has a people picker field.

$("#add-new-msdetail").click( e => {
    var cnt = $('.form-group-5').length;
    var id =cnt+1;

    document.getElementById( "msdetail" ).innerHTML +=  
    `<br><br><hr/>
    <div class="form-group-6" id="TrackerDtl${id}">   
    <div class="form-item">
        <span>${id}</span>
        </div>                                                                                                                   
        <div class="form-item">                                                
            <label class="labelcl" for="shorttitle">Action(s)<span style="color: red;"> *</span></label>
            <textarea class="span6 form-control" rows="2" id="ctrlAction${id}" placeholder="Action name" required></textarea>                                                           
        </div>
        <div class="form-item">                                              
            <label class="labelcl" for="Description">Milestone(s) Description<span style="color: red;"> *</span></label>
            <textarea class="span6 form-control" rows="3" id="ctrlTxtDescription${id}" placeholder="Description" required></textarea>
        </div>

        <div class="form-item">
            <label class="labelcl" for="shorttitle">Recipient(s)<span style="color: red;"> *</span></label>
            <div id="ctrlpplRecipients${id}"></div>
            <input type="hidden" id="ctrlTxtRecipientID${id}" />    
            <label id="RecipientsInfo" style="display:none; color:red">Please enter a valid user</label>                                        
        </div>
        
        <div class="form-item">
            <label class="labelcl" for="shorttitle">Due Date<span style="color: red;"> *</span></label>
            <input class="form-control" type="date" id="ctrlDTDueDate${id}" style="border: 1px solid #b3b3b3;"/>
        </div>                  
                                                                                           
    </div>
    `;
initializePeoplePicker(`ctrlpplRecipients${id}`, true);
})

Each time a new row is added, the Recipients ppl picker control is created. However, only the last added ppl picker is allowed to search for user.

Other ppl picker controls don't allow enter value at all. for example, I have 3 rows and 3 ppl picker controls, only the last one allows me to input user name. It should allow to pick multiple users.

Here is the code to initialize ppl Picker control.

function initializePeoplePicker(peoplePickerElementId, allowMultipleValues = false) {
// Create a schema to store picker properties, and set the properties.  
var schema = {};
schema['PrincipalAccountType'] = 'User';
//This value specifies where you would want to search for the valid values
schema['SearchPrincipalSource'] = 15;
//This value specifies where you would want to resolve for the valid values
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = allowMultipleValues;
schema['MaximumEntitySuggestions'] = 50;

// Commented out the width set here in order to style people picker element via css without !important 
// 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);
    }

Inspecting the ppl picker elements, SharePoint does generate the code needed.

Comparing the working people picker control, only the latest control has <inputelementid="ctrlpplFRERecipients2_TopSpan_EditorInput" style="top: 225px; left: -1px; display: none;">. It is not available on previous ppl controls created earlier.

Not sure why this input element was removed. Pls advise.

1 Answer 1

0

Found the fix to this issue:

Need to use (appendChild (div), instead of using div.innerHTML+={new repeating section code}

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "TrackerDtl"+id);
newdiv.setAttribute("class", "form-group-6");           
            
newdiv.innerHTML =`{all the code to create row}'; 
var curdiv = document.getElementById('msdetail');
curdiv.appendChild(newdiv); 
initializePeoplePicker(`ctrlpplRecipients${id}`, true);

This article gave me the idea:

https://stackoverflow.com/questions/48794333/table-input-values-resetting-when-adding-rows-with-inputs-in-html-and-javascript?answertab=votes#tab-top

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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