How to get input values from mgt-people-picker when a FORM is submitted

Question

I'm using mgt-people-picker from within an ASP.Net Razor application, using a ProxyController to get all the data from the Graph API. Everything is working fine.

Now I want to get the infos from a Form I've created, containing a people list, from the mgt-people-picker element :

From my ASP.NET backend, once the form is submitted; I have all the info from my inputs, except the mgt-people-picker element.

Anyone knows a simple solution to get the list of people form the input text, issued during the POST action ?

Or should we use a javascript trick ?

Answer 1

Ok, if anyone has the same issue, here is the solution, after a LOT of investigations.

You have to use the template of <mgt-people-picker> with data-type=selected-person. In this template section, you need to add

• An <mgt-person> with the correct properties (That I've found in the source code)
• An <input type=hidden /> to store the values:

<mgt-people-picker>
    <template data-type="selected-person">
        <input type="hidden" value="{{person.userPrincipalName}}" name="people" id="people" />
        <mgt-person view="oneLine" person-details="{{person}}" fetchImage=true></mgt-person>
    </template>
</mgt-people-picker>

From within your backend handler, you will get all the persons selected in the Request.Form["people"] property

public void OnPost()
{
    foreach (var personSelected in Request.Form["people"])
        Debug.WriteLine(personSelected);

}

The solution is elegant and easy to use & understand. Unfortunatelly, the documentation lacks details on the customization, especially on templates :)