Microsoft MVP Logo

Yesterday I posted how to add forms to your SharePoint 2013 style workflows. That post came from a project I'm doing for someone. One of the more significant changes to workflow in SharePoint 2013 is that you don't use server side code on the SharePoint box... custom logic is implemented using expressions or by calling a remote web service. With a form, you have to use JavaScript to capture all the values and submit them to the workflow instance using the workflow API in the client side object model (CSOM).

One of the things I needed to do in a recent workflow form was to let the user pick a person and pass the selected person's login name (aka: claim ID) over to the workflow as a string. Of course the sample code they stub out or you handles simple text boxes & the date/time picker, but while they give you the JavaScript code for the date/time picture and working with regular text input fields, they don't give you anything for the PeopleEditor control... and that stinks because this thing is damn hard to work with.

Here's how I do it with JavaScript. Add a PeopleEditor control to the page like so:

Document Reviewer: <SharePoint:PeopleEditor AllowEmpty="false" ID="docReviewerUser" runat="server"
                              ValidatorEnabled="true" MultiSelect="false"  />

Add a reference to the jQuery library to the page as well (What? You aren't using jQuery? What? How's that 5.25" floppy treating you grandpa?). Now for the tricky part. The PeopleEditor control is rendered out in this nasty implementation of hidden input controls, maybe there's a TextArea control if you are using a specific browser, then there are a bunch of nested SPANs and DIVs that don't have specific a NAME or ID that's easy to find. So... you have to get creative.

Now there are plenty of posts online talking about reading/writing to this control, but none really gave me exactly what I needed, so I had to roll up my sleeves and what follows is how I pulled the value out and stuffed it into the params array that the sample code creates for you:

// get reviewer loginname
var html = $("#ctl00_PlaceHolderMain_docReviewerUser_upLevelDiv");
params['DocReviewerLoginName'] = $("#divEntityData", html).attr("key");

And there you have it... this will pull the claim ID of the person you selected in the PeopleEditor and pass it along as a string to the workflow as an argument. Of course this doesn't just apply to a SharePoint 2013 workflow... this technique works if you need that value outside of a workflow as well.

Comments powered by Disqus