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

@João José Mendes, I have followed through your instructions thoroughly, I have even index the birthday column, but I cannot approve the API management pending dependencies. See snapshot below what it says even though I am a Global admin. Kindly assist with an updated birthday sppkg version and how to solve this error. Thanks in advance.

 

API errorAPI error

Hello,

 

Can someone share the latest sppkg file?

I am using sharepoint 2019 on premise and i have no idea how to build a sppkg.

 

Thx.

Please can we get a actual sppkg file. Would this be Tenant-Neutral?
WebPart does not render:

Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
[SPLoaderError.loadComponentError]:
***Failed to load component "e629ef30-a9ec-4713-b39a-2cfa8b323902" (BirthdaysWebPart). Original error: ***Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.8.6".

***INNERERROR:
***Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.8.6".
***CALLSTACK:
Error
at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-06-28.011/sp-pages-assembly_en-us_a0d4d2b53...)
at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-06-28.011/sp-pages-assembly_en-us_a0d4d2b53...)
at Function.e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-06-28.011/sp-pages-assembly_en-us_a0d4d2b53...)
at Function.e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-06-28.011/sp-pages-assembly_en-us_a0d4d2b53...)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-06-28.011/sp-pages-assembly_en-us_a0d4d2b53...

I am trying to install this solution and when I go to gulp build I am getting a

internal/modules/cjs/loader.js:638 throw error:

Error: Cannot find module '@microsoft/sp-build-web'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\user\sp-dev-fx-webparts\samples\react-birthdays\gulpfile.js:5:15)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)

@João José Mendes 

I'm also trying to add the webpart. Did all the steps:

  • npm install
  • gulp build
  • gulp bundle --ship
  • gulp package-solution --ship
  • Add and Deploy Package to AppCatalog
  • Go to API Management - from SharePoint Admin Center new experience, and Approve the Permission Require to Use Graph API SCOPES

The file is in the appCatalog, but the web part is not visible on the site. 

When I want to add the webpart on the page I don't see it in the list.

 

 

 

Never mind, I already fixed it.

 

Is it also possible to change the language within the webpart and show the items as a list in stead of as cards?

@memunati @João José Mendes how do you get the user's profile pictures to show up? 

@JSlei I'm also wondering that how can I get Profile picture of user shown to Webpart

 

Thanks,

Harry_G

@Harry_G so the photos are retrieved from SP user profile using 

/_layouts/15/userphoto.aspx?size=L&username=user@email.com

The app wasn't connecting to my list very well, and using F12 I saw that the user email was "undefined".

I rebuilt the Birthday list and it worked. Try doing that and make sure to use the exact columns.

@JSlei , Thanks for your Help , Now webpart working fine.

another Question is that, how we get all user's birthadys from AAD and update sharepoint list as it said timer function is already add in webpart to retrieve AAD user's birthday, but how its works?

Any Idea ?

 

Thanks,

Harry_G  

Hi @João José Mendes.

 

I've already deployed the webpart after list creation with fields. I applied some customizations (like language-related strings, because it should be shown in Spanish) and everything seems to work fine. However, I need to get users sync from AAD and I know you mention some Azure Function, but I'm really newbie in these topic; so, could you explain a bit more detailed how to get this function to work? Should I run/call/invoke from somewhere?

 

@memunati, Did you get this webpart to work using AD Sync?

 

Thanks in advance.

Hi,
In the "src" there are a folder called "SyncUsersBirthdaysFunction" that is Azure Function, Timer Trigger that be deploy to Azure.

The best way is using VSCode with Azure Tools Extension Installed.

Open the folder "SyncUsersBirthdaysFunction" with VSCode, Change the local.setting file and Update with ClientId and Client Secret, of the App Created in Azure and then go to Azure Tool on VSCode and select deploy and follow the instructions.

After installed, the function runs every 5 mins, you can adjust the trigger changed the file function.json.

Thank you!

@JSlei 

 

Hey!! I would like to reduce the size of the birthday box or just show it as a list. Is there a specific change? I tried setting the box card dimensions but it throws of the rest of the alignment like text and balloons. Please help.

@João José Mendes 

 

Hi Jose, can you reupload the video again? I don't know the birthday list parts, i uploaded the webpart in appcatalog and it shows but i'm stuck at the birthday list.  

@JSlei 

 

Hi, can you upload the picture to how to create list and connect it? 

Hi @Davaakhatan,

 

You have to create Birthday list manually, with fields specified by author. Internally, this WebPart requires list is located on root SharePoint sites, even if you are deploying it to something like '.../sites/AnotherSiteCollection'.

 

Just create the list in the way you normally do, test again and let me know if you have any doubts.

 

Regards.

@João José Mendes 

Dear, I was configuring and I get this error, I don't know why.

 

 

 

Please create an Index on list by column Birthday.

Thanks@João José Mendes 

 

I am concerned that I get this when I press F12 in the browser


Warning Using this tool exposes you to potential security threats that may cause other users to access your personal Office 365 data (documents, emails, conversations, and more). Make sure you trust the person or organization that has asked you to access this tool before continuing. Learn more here: https://technet.microsoft.com/en-us/library/bb794823.aspx