Birthday SPFx, Web Part, Azure Function, MSGraph, @PnP/pnpjs

Birthdays SPFx Web Part,

The solution consists of SPFx Reusable Birthday Control (Tiles), an SPFx Web Part that loads data from a SharePoint List, which is updated every day by an Azure function using the MS Graph API

The SPFx reusable Birthday control has

Birthday Card component that is use to create a Birthday Tiles control.


Screenshot 2018-11-25 at 16.09.58

Screenshot 2018-11-30 at 20.14.08

The Birthday tiles control receive the array of users that is passed by the web part for rendering the information about users birthdays.

Birthday Tiles reusable control , render method 

Screenshot 2018-11-25 at 16.33.13

the web part gets data from the SharePoint list and renders information about birthdays. 

Screenshot 2018-11-30 at 15.45.30


Screenshot 2018-11-25 at 16.58.22


The process to get birthdays consist in  an Azure Function that use @PnP/pnpjs library and MSGraph API to synchronise a SharePoint List located on tenant root site. The function create a list if it not exists.

The Azure function runs every day to get AAD users and the birthday date, on first run get all users but the next runs only get the changed users.

I use the, query to get users from AAD.

How it works ?

Delta query has two objects that are nextLink URL and deltaLink URL, the nextLink if filled has the skipToken to read the next page of users, the deltaLink if present has the deltaToken to be used in the next call to check if there are users that have changed since the last time the function ran.

When Function Start :

Screenshot 2018-11-29 at 22.35.23

Read Users and add, Update or delete user from SharePoint List.

Screenshot 2018-11-29 at 22.25.36

On SharePoint Tenant Root Site I have my list with the user birthdays that I use on my Web Part.

Screenshot 2018-11-25 at 18.37.43


Thank you for reading. 🙂



%d bloggers gostam disto: