SOLVED

Employee Birthday Calendar Web Part

Copper Contributor

Hi, I am new to SharePoint and I am trying to implement an employee birthday calendar on SharePoint using the web-part here https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-birthdays.

Following the instructions on the link, I have created a Birthdays list and have deployed the Birthday web part to SharePoint online, I am currently stuck at connecting the Birthdays list and the Birthday web part so that the web part can fetch the Birthdays data from the list. 

Any idea on the next step to take? I have surfed the internet and could not find anything helpful.

70 Replies

Hi @memunati  ,

 

Please can you give me more details about your problem ?

Can you send me print screens about you birthday list and the webpart ?

 

 

Thank you.

João Mendes

Hi @João José Mendes ,

Attached below is a screenshot of the Birthday list,

b-day web part.PNG

below is a screenshot of the deployed Birthday web-part

b-day deployed.PNG I want to connect both the web-part and the list so that when I add the Birthdayweb-part to a page as shown below, it will display the Employees' Birthdays.

b-day page.PNG

Thanks.

 

Annotation 2019-04-15 155825.jpgAnnotation 2019-04-15 160032.jpgHi @memunati ,

 

 

Please check if your birthday list has this columns: See image :

 

The birthday date must have 2000 on year,  for example:    4/17/2000, 4/17/2000, etc...

 

Add Webpart "Birthday"  to you Page. edit page and add webpart .

 

Thank you.

João

 

 

 

 

 

birthdays.png

@João José Mendes , 

I've updated the list to this

b-day update.PNG

and updated the Birthday list to

image.png

However, the web part is still not showing the Employees' Birthdays in the Announcement page

@memunati :

 

the column  "Display Name" the Birthday column is only date not date and time....

Annotation 2019-04-15 172501.jpg

 

Do you deploy de app in appcatalog ?

Annotation 2019-04-15 172101.jpg

Do you added the web part to the page ? The Web Part is in the list of WebParts ?

 


please do F12 and go to console to check there are any arrors .

 

Thank you.

Thank you for your help so far @João José Mendes ,

 

I have done all that you noted in the replies and videos. Using the information below, image.png

I only changed the TenantURL in the local.settings.json file as shown in the image below

image.png

 

Also, in the Birthdays table, the userAADGUID column is empty

image.png

Could these be what's wrong? Do I need the userAADGUID for it the work? Do I have to assign values to all the variables in the local.settings.json file?

Hello @memunati,

 

The WebPart have two option:

1-  the birthdays list can be automatically created and filled width user information there are on Azure AD , for that there are an Azure Function (timer function) must be installed on Azure.  and the field "userAADGUID" . is used for sync only , don't have impact to display birthdays.

 

2-  You can create the Birthdays list manualy and add item to it. and the field birthday must have the year in 2000. only that.

 

 

 

@memunati  have you changed the code ?

 

You don't need to change the code... you only have to create a birthday list with the correct named columns . and install the sppkg. in appcatalog  -> deploy and add the webpart to a page.

 

please download the last sppkg

https://sitenanuvem-my.sharepoint.com/:u:/g/personal/joao_j_mendes_sitenanuvem_pt/Ebl4y_iQ619Ppfq55r...

 

and install in appcatalog and deploy add the webpart to a page.

@João José Mendes, Your explanations about how to get this working is really nice, but I am also having the same challenge as Memunat, as I did followed your steps closely, What am I missing?. See my screenshot below.

 

However, I also have a question.

For every staff birthday, do I have to manually enter the date each time there is an upcoming birthday? or does it resolve automatically (i.e All I just do Is to enter all the staff names, Birthdate and all other columns)?

 

Screenshots

 

AppCatalogAppCatalog

Birthday List ViewBirthday List View

 

Birthday List SettingsBirthday List Settings


Birthday Webpart not retrieving list ItemsBirthday Webpart not retrieving list Items

 

 

The list of birthdays must be created in root site of tenant. Https://xxx.sharepoint.com

The webpart only show the upcoming birthday based on current date. The number of birthdays to show is defined in a webpart property.



@João José Mendes, Thanks to your feedback, I really appreciate it. But here is my process.

 

I am not using the root site because my site is in this path: https:\\xxx.sharepoint.com\sites\intranet , and it is a modern communication site that already has many contents.

 

Question: Are you saying that I create the birthday list here: https:\\xxx.sharepoint.com and include my birthday webpart here: https:\\xxx.sharepoint.com\sites\intranet and all will be ok?

 

Question: Will it show the staff birthdays when next year reaches with the inputs already in the birthday list or do I have to do a flow for recurrence?

@dotunman210 

 

The webpart can be added in any site , it read the birthdays from a list created in Root Tenant site.

 

You only have to add the users one in the list,

 

the web part works with month and day is independent of the year!!  the it get's the current month and day to get the upcoming birthdays.

 

Thank you.

 

 

@João José Mendes, thanks, will revert ASAP if I can showup the list in the page

@João José Mendes, I have re-created the list with 3 items sample in my root tenant (which is in classic experience) and added the webpart in my modern communication site, but still did not show up. I have absolutely followed the instructions. Something is not right.

 

Could it be that the local.settings.json was suppose to point the TenantURl variable to my tenant site https://xxx.sharepoint.com instead of yours? I am just inquisitive to know why it did not work.

 

My List location: https://xxx.sharepoint.com/Lists/Birthdays/AllItems.aspx

My Classic tenant is https://xxx.sharepoint.com/

My Modern Communication site: https://xxx.sharepoint.com/sites/Intranet

 

Kindly advice

@dotunman210 

 

Only have to install de sppkg in appcatalog, deploy and add webpart to a page in any site.

First create the list called Birthdays in root tenant site, with the right column names and de date must have 2000 on year.

 

Please send me print screens of your list definition, list items . 

 

and see the console log is there are errors,  in browser, F12 -> console 

 

For me and other user sthe webpart is working correct.

thank you!

 

 

@João José Mendes, thanks, see my screeshots below.

 

Console log 1Console log 1Console Log 2Console Log 2List Setting DefinitionList Setting DefinitionList Item DefinitionList Item DefinitionBirthday - Date onlyBirthday - Date onlyDisplay Name Column - titleDisplay Name Column - title

@dotunman210 

 

The problem is that the app was not given consent . Try  the deploy and grant consent to the app in appcatalog.

 

Screenshot 2019-04-17 at 12.38.01.png

 

First Delete the app from appcatalog,  add the sppkg  download the latestd version here : https://sitenanuvem-my.sharepoint.com/:u:/g/personal/joao_j_mendes_sitenanuvem_pt/Ebl4y_iQ619Ppfq55r...

 

Select the App, and select deploy option in ribbon. 

 

Screenshot 2019-04-17 at 12.46.46.png

 

Click Deploy! 

 

 

1 best response

Accepted Solutions
best response confirmed by memunati (Copper Contributor)
Solution

Hello @dotunman210.

 

Please create on list of birthdays an Index by column "Birthday" is need to sort and filter birthdays.

 

I found that the webApiPermissions required to use Graph API was missing on webPart. and is that the problem.

 

I changed and create a new package. sppkg.  Please Install the new sppkg, 

https://sitenanuvem-my.sharepoint.com/:u:/g/personal/joao_j_mendes_sitenanuvem_pt/Ebl4y_iQ619Ppfq55r...

 

and deploy you will see the consent panel and a message to inform to go to manage api management to aprove the API permissions.

 

 

Screenshot 2019-04-17 at 21.13.13.png

 

go to:

 

SharePoint Admin Center -  https://xxxx-admin.sharePoint.com  and change to new . SharePoint admin center and go to :  

 

API management and aprove the permissions that are in pending status.

 

 

Soon I will update a detailed documentation and new code and package on REPO. 

 

Thank you.

 

 

 

View solution in original post