Using People Picker field in SharePoint Workflow initiation Form

In the SharePoint initiation form, if we need a field which takes alias and checks it against valid users and gives the name(just like the out of box people picker field) ,we can use the process given here.

 

 

In the initiation form if an initiation form parameter is selected as People/Group type, in the form it shows as dropdown list. The dropdown is populated with all the user values. If the number of users is large(which generally is),the initiation form will take too much time to load. Also the selection of any value from a very long dropdown is cumbersome.

If the field is a people picker ,then an alias can be entered and checked.

 

The plan is to take a people picker field and a hidden text field. The people picker field will give us all the functionality of selecting and checking names. The value from this field will be passed to the hidden text field which is binded to the initiation parameter.

Steps:

1.       Add an initiation form parameter of type text in the workflow.

2.       Save and publish the workflow.

3.       Open the aspx form associated with the workflow

4.       Here the initiation form field of type text can be seen. Add the following control in a new row

<SharePoint:PeopleEditor id="pplPicker" runat="server" allowempty="true" validatorenabled="True" onvaluechangedclientscript="SetPeopleValues()" MultiSelect="False" allowtypein="True">

</SharePoint:PeopleEditor>

<!-- onvaluechangedclientscript property calls the JavaScript function-->

5.       To add the JavaScript function add this header just before the <asp:content> tag with contentplaceholderid=PlaceHolderMain

<asp:Content    id="Content1"     runat="server"     contentplaceholderid="PlaceHolderAdditionalPageHead">

<script type="text/javascript">

    function SetPeopleValues()

{             

    //Retrieve the semi-colon separated list of user id's (in this case only one as Multiselect =”false”)  

     var people = document.getElementById('ctl00_PlaceHolderMain_InitiationForm_pplPickerID0EAAA_upLevelDiv').innerText; 

//Populate the text form field

    document.getElementById('ctl00_PlaceHolderMain_InitiationForm_ff11_1').value = people;  //'ctl00_PlaceHolderMain_InitiationForm_ff11_1' is the id of the text form field

}

  </script> </asp:Content>

6.       Now on the onclick event of the OK button add the function.

<input type="button" value="OK" name="btnSave" class="ms-ButtonHeightWidth" onclick="javascript:SetPeopleValues()

7.       Lastly put style="display:none" for the text form field.