Wednesday, January 15, 2014

SharePoint - Check People Picker con jQuery

Se si vuol controllare il valore inserito in un People Picker utilizzando jQuery, facciamo così!

Controllando l'HTML source della pagina, vediamo che al People Picker corrispondono molto elementi, ma quando l'utente scrive il nome per inserire l'utente, non scrive in un input o in una textarea, ma... in un DIV con l'attributo contentEditable = true.

Possiamo quindi controllare il dato in un New/Edit form prima di salvare l'item tramite la funzione js PreSaveAction().

Prima di tutto, creiamo un custom form (new o edit) e cerchiamo la riga corrispondente alla colonna People da controllare. Nell'HTML, individuiamo la TD che contiene il controllo SharePoint e aggiungiamo all'attributo "class" un nome che ci aiuterà ad identificare il campo desiderato (ad es "check-this-pp").
Se abbiamo da controllare più People Picker, usiamo classi diverse.

Ora, aggiungiamo i riferimenti a jQuery e il codice seguente, in fondo alla pagina:

function PreSaveAction(){

var checkPP = $(".check-this-pp div[contentEditable='true']").text();
if(checkPP == ""){
alert("Warning: Insert User in People Picker before saving item.");
return false;
}
return true;
}

Salviamo e andiamo a controllare.

Apriamo il form, nel Browser. 
Non inseriamo nomi nel People Picker e clicchiamo su Save.
Il form darà il messaggio del nostro codice js e non continua.
Inseriamo un nome e clicchiamo su Save.
Il form si ricarica correttamente (eseguendo quindi il controllo del nome, individua l'utente e, se l'utente esiste, salva il form).
Ancora un'ultima prova: apriamo il form di edit (con il codice inserito), vedremo il nome dell'utente.
Se lo cancelliamo e clicchiamo su Save, il form restituisce il warning per l'inserimento dell'utente.