How to build and deploy Employee Directory web Part on SharePoint page.

Custom web parts can provide your SharePoint pages with unique and valuable features. In this article, we’ll show you how to create and deploy Employee Web Part on SharePoint.

First, we will create an employee directory web part.

Employee Directory Web part:

SharePoint Online Employee directory web part using SharePoint Framework (SPFx) and Microsoft Graph API to show Azure Active Directory (AAD) users. There is no out-of-the-box (OOTB) web part for the “Employee Directory” or “Staff list” web part on SharePoint online modern experience pages. Show and search users from your organization, through Microsoft Graph.

SharePoint Framework

Employee Directory app is based on SharePoint Framework (SPFx) and may be hosted on SharePoint Modern Page, Classic Page, and Microsoft Teams. This approach means that you can use the same application on multiple platforms without restrictions. SharePoint Framework app runs in a browser in the context of the current user.

Microsoft Graph

Employee Directory web parts consume Microsoft Graph API to get information about user details from Azure AD, presence status from Teams, and schedule from Outlook. Interaction between Microsoft Graph and Web Part based on native client built into SharePoint Framework. Consuming flow is the following:

Web Part requests token from Azure AD to interact with Microsoft Graph
Azure AD provides a token according to the permissions granted for the solution
Web part requests data from Microsoft Graph
Microsoft Graph provides data

The following permissions are required for the Employee Directory app so that the web parts work correctly:

Directory.Read.All
User.Read.All
Presence.Read.All
Calendars.Read

The first two permissions (Directory.Read.All and User.Read.All) are necessary to get information about users and manager/subordinates relationship. Presence.Read.All permission is required to get the current presence status of the user in Microsoft Teams. The last Calendars.Read one is required to read data from a user calendar.

Web Parts:

Employee Directory

The main web part for searching and displaying information about employees in your organization.

Data Source

Employee Directory web part supports both Azure AD and User Profiles as a data source.

Custom Columns

Web parts are able to display custom columns.

Prerequisites:

Open Node.js Command prompt and run it as administrator.
Install yeoman and gulp by running the following command.

npm install – g yo gulp

Install SPFx version by running the following command.

npm install – g yo gulp

To list out the npm modules installed run the following command.

npm list –g –depth=0

This will list out the npm modules with versions.

Employee Directory Webpart Building:

Create a folder for Employee Directory SPFX webpart.
Navigate to the folder.

Create a solution by running the following command

yo @microsoft/sharepoint

Open the solution in the VS Code Editor by “code .”

Navigate to config-> serve.json
Set the initial Page as your SharePoint tenant

Navigate to src -> components -> IEmployeeDirectoryProps.ts
For webpart content access import the Webpart Context and define new property

import { WebPartContext } from “@microsoft/sp-webpart-base”; context: WebPartContext;

Navigate to Employee Directory Webpart.ts and define the property inside the render function

To access different information of users using the webpart, create a file inside the components folder called IUsers.ts.
Define more properties inside the IUsers.ts file.

Create another file inside the components folder called IEmployeeDirectoryState.ts
In this file, define two properties users and searchFor.

users which basically holds the array of users which we defined in IUsers.ts searchFor is used to search the employee which we will use in tsx file.

Go to EmployeeDirectory.tsx file
Import IUser.ts, IEmployeeDirectoryState.ts, IEmployeeDirectoryProps.ts, MicrosoftGraph and MsGraphClient.

Import properties from office-ui-fabric-react.

Define state property in the react component as second property.
Add constructor with props and state.

Now inside the render method we have default codes with html tags. Remove those codes and implement the following codes as shown below.

In the render method we defined three properties using office ui fabric react

Text Field – which is used to enter the values

Primary Button – used to search the values entered in the TextField using API

Details list – used to show the information about the users

In the DetailsList we have to define the columns which we are going to show the information about users.
Implement usersListColumns as shown below.

Details List property will only get executed when state. Users is not equal to null and this.state.users.length > 0
Implement the functions _onSearchforChanged, _getSearchForErrorMessage, _Search and componentDidMount.

In the above functions we are calling another function _fetchUserDetails to get the user details we are searching. We will implement this function in the next step.
getSearchForErrorMessage function will get executed in case the input value is invalid character, value = null, value.length = 0.
Implement _fetchUserDetails function.

After the function gets executed iterate through the response we got from the API.

Then call set state method as shown below.

Go to File -> Save

Now we are done with building the Webpart.

Building the solution:

Once we are done with building the webpart. Run the following commands to build and bundle the solution.

gulp build
gulp bundle –ship
gulp package-solution –ship

This will create a folder called sharepoint in your SPFX folder that you created for this webpart. Navigate to the folder sharepoint -> solution -> .sppkg file.

Now we will start to deploying webpart

Deploying Webpart:

Click on the app launcher and select admin

Select Show all and navigate to SharePoint under Admin centers.

Click on More Features

Select Apps and Click Open

Click on Upload and upload .sppkg file we created.

Once the file is uploaded, a popup will show.
Select the option Only enable this app. Click Enable app.
Navigate to Advance -> API access and approve the Pending requests.

Now we deployed the Employee Directory Webpart in your tenant successfully.

Now Go to SharePoint site and the page in which you want to add the webpart.

Edit the page and select the layout. Add Employee Directory Webpart.

The Employee Directory Webpart has been build and deployed successfully.

Interested to work with our company? Let's get in touch!

We love to hear from you about your project.

Have a project? Let’s talk.

Note: Give us a call or leave a message, we endeavour to answer all enquiries within 24 hours on business days.