How to populate SharePoint form fields with profile information

In this article, we will show you how to retrieve information from a user profile and prepopulate form fields with it.

Editing user profile properties

If you’re a global administrator in Microsoft 365 and want to modify user profiles, add or change their properties, navigate to Admin Center.

If you’re a regular user in Office 365 and want to update your profile information, navigate to Delve.

If you’re an administrator of SharePoint 2019 on-premises, navigate to User Profile service.

Note

Administrators can create custom profile properties, populate them with PowerShell, and configure synchronization with Active Directory.

For more information, check out Microsoft's article on how to manage user profile properties.

Accessing current user profile properties

You can retrieve current user profile properties with the following code:

function updateCurrentUserInfo() {
    pnp.sp.profiles.myProperties.get().then(result => {
        let props = result.UserProfileProperties;

        for (let i = 0; i < props.length; i++) {
            switch (props[i].Key) {
                case 'Manager':
                    fd.field('Manager').value = props[i].Value;
                    break;

                case 'Department':
                    fd.field('Department').value = props[i].Value;
                    break;

                case 'Title':
                    fd.field('JobTitle').value = props[i].Value;
                    break;

                case 'CellPhone':
                    fd.field('Mobile').value = props[i].Value;
            }
        }
    });
}

fd.spRendered(() => {
    // executes updateCurrentUserInfo on form load
    updateCurrentUserInfo();
});

Accessing Person field user profile properties

You can also retrieve user profile properties for a user selected in the user field:

function updateUserInfo() {
    let employee = fd.field('User').value;

    if (employee && employee.Key) {
        pnp.sp.profiles.getPropertiesFor(employee.Key).then(result => {
            let props = result.UserProfileProperties;

            for (let i = 0; i < props.length; i++) {
                switch (props[i].Key) {
                    case 'Manager':
                        fd.field('Manager').value = props[i].Value;
                        break;

                    case 'Department':
                        fd.field('Department').value = props[i].Value;
                        break;

                    case 'Title':
                        fd.field('JobTitle').value = props[i].Value;
                        break;

                    case 'CellPhone':
                        fd.field('Mobile').value = props[i].Value;
                }
            }
        });
    }
}

fd.spRendered(() => {
    // executes updateUserInfo on field change
    fd.field('PersonFieldName').$on('change', updateUserInfo);
});

Use Graph API to access user profile properties

You can use Microsoft Graph API, which is already included on your forms to access user profile properties from Azure Active Directory.

For example, the following code will allow you to retrieve and populate fields with information from the current user’s profile:

fd.spRendered(() => {
    graph.me().then(props => {
        fd.field('JobTitle').value = props.jobTitle;
    });
});

And the following code can be used to retrieve profile properties for a user selected in Person field:

fd.spRendered(() => {
    fd.field('PersonFieldName').$on('change', user => {
        if (user && user.EntityData && user.EntityData.Email) {
            graph.users.getById(user.EntityData.Email)().then(props => {
                fd.field('JobTitle').value = props.jobTitle;
            });
        }
    });
});

Important

In order to retrieve user profile properties with Graph API, you first need to make sure that the Microsoft Graph app has the permissions to access data on your tenant.

For this, make sure to install Microsoft 365 CLI (you’ll need to install Node.js first in order to do that).

Connect it to your Office 365 tenant from the command line:

m365 login

And then use the following line to give Microsoft Graph the required permissions:

m365 spo serviceprincipal grant add --resource "Microsoft Graph" --scope "User.Read"