Reading User Profile Properties from InfoPath forms hosted in Office 365

So SharePoint knows everything about the employee’s in an organisation down to their shoe size, and now its time to utilise this information within InfoPath forms.

With on premise SharePoint its simple case of configuring data connections to use target applications within the secure store etc, with SharePoint online we unfortunately can’t communicate with SharePoint’s web services from InfoPath Forms Services so we have to take a different approach using client side code, here’s how:

Overview

Rather than using InfoPath to retrieve the data, we’ll use client side code that first reads from the User Profile Service (UPS) and then injects the properties into the form.

InfoPath form configuration

To successfully update the form we’re going to need a way to identify which input field our code is updating, the simplest way I’ve found is to make use of the title attribute:

  1. Within InfoPath Designer, open the properties of the input control that you wish to be updated, switch to the advanced tab, then update ScreenTip with the title as I have shown below.
    InfoPathTitle
  2. Publish the form as usual.
  3. Create a web part/publishing page to host the form.
  4. Add an InfoPath Form web part to the page and configure it to show the form.

The code

With the form containing a input field featuring a consistent attribute that we can target and being hosted in a SharePoint page we can now add code:

  1. Add a script editor web part to the page hosting the form
  2. Load the dependant libraries by adding the following to the script editor web part
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/_layouts/15/SP.Runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/SP.js"></script>
    <script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script>
     
  1. Modify the following code to match the name of the user profile property you would like to read for the current user (Overwrite PreferredName) and the title of the input field you would like to update (Overwrite Employee Name)
   <script type="text/javascript">
   SP.SOD.executeOrDelayUntilScriptLoaded(getUserDetails, 'SP.UserProfiles.js'); 
    function getUserDetails() {
        var clientContext = new SP.ClientContext.get_current();
        var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
        userProfileProperties = peopleManager.getMyProperties();
        clientContext.load(userProfileProperties);
        clientContext.executeQueryAsync(onSuccess, onFail);
    }
    // On success update our form.
    function onSuccess() {
    $( "input[title='Employee Name']" ).val( userProfileProperties.get_userProfileProperties()['PreferredName'] );
    $( "input[title='Employee Name']" ).blur();
        }
    // On fail add an alert with the error message.
    function onFail(sender, args) {
    alert (args.get_message());      
    }
    </script>

Notes:

  • We use SP.SOD.executeOrDelayUntilScriptLoaded to ensure that SP.UserProfiles.js has been loaded before running our function
  • The blur event is required to trigger any InfoPath rules associated with the field your updating, so may not be required for your form
  • This approach could easily be modified for standard SharePoint ASPX forms
  • I’ve recommended adding code to a script editor for ease of demonstration, for real world use your probably better off to saving your scripts to an assets library so they can be re-used and edited easily.