This blog will show you in detail how you can create a birthday and anniversary web part using a search results web part with a custom Display Template and CSS. This web part uses the user profile birthday property which people can fill in their self. I’ve started testing with display templates and decided to try and create a display template to show upcoming birthdays. You will get the following output when you follow this blog correctly:
You can find the display template and css file at the end of this blog.
Start creating your birthday and anniversary web part
Mapping the birthday property to a managed property
The birthday property can be filled in on users profiles but they can’t be used in Search Result web parts out of the box.
Go to the Search Center in the Office 365 SharePoint Admin Center
Go to Manage Search Schema -> crawled properties and search for birthday
You can see that it hasn’t been mapped to a managed property.
Click on the property
![clip_image001[5]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0015.png "clip_image001[5]")
Add a mapping
Map this property to a RefinableDate which is available and click twice on OK
It can take up to 8 or 16 hours for this property to be available in your site.
Set up search results web part
Go to the site where you want to add the birthday webpart
![clip_image001[7]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0017.png "clip_image001[7]")
Add Web Part
![clip_image002[5]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0025.png "clip_image002[5]")
Add
![clip_image003[5]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0035.png "clip_image003[5]")
Edit Web Part and first change the following settings
And the following appearance
Click on apply and change the search query
There is 1 problem with this query. The full date of a user’s birthday is based on the year 2000. This means that my birthday is 22 december 2000 according to Microsoft. I was unable to create a search query which looks to the next 5 anniversaries based on the current date alone so I used the following command to count the number of days to the year 2000.
new-timespan -start “1/6/2000” -end $(get-date)
which gives me the following result
So my search query will look like “* RefinableDate00>{Today-5845}”
Note that I added 1 more day so the current date will also be listed!
You will need to change the days every year for the webpart to find the correct birthdays (let me know if you have a better search query 🙂 )
Go to the sorting tab
Click on OK and Save the web part
Upload display template files
Upload birthday.html
First change all the refinabledate properties in the birthday.html to the property you have specified:
![clip_image001[9]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0019.png "clip_image001[9]")
Go to site settings
![clip_image002[7]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0027.png "clip_image002[7]")
Go to Master pages
![clip_image003[7]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0037.png "clip_image003[7]")
Go to Display Templates
Go to Search
Enable the publishing features if you only see .js files
Upload the master page at this location with the default settings.
Don’t forget to publish and approve this document!
Upload birthday.css
Go to the style library
![clip_image001[11]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image00111.png "clip_image001[11]")
Create a new folder
![clip_image002[9]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0029.png "clip_image002[9]")
Upload the css document to this location.
Don’t forget to publish this version!
Set the css so it will be used at site settings -> Master Page (beneath Look and Feel) or add this using a script editor web part.
![clip_image003[9]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image0039.png "clip_image003[9]")
Set the display template for the search web part
Edit the Search Result Web Part
![clip_image001[13]](https://www.sharepointfire.com/wp-content/uploads/2016/06/clip_image00113.png "clip_image001[13]")
And use the Birthday Template
Hello,
Thanks for this, it has so far in my testing appeared to be really useful and I have the webpart loaded in a test sub-site although without the final steps the formatting is all wrong. Therefore, a couple of questions for clarification:
You mention “Enable the publishing features if you only see .js files” – What/Where am actually enabling?
Also, our requirement is to only show birthdays for today and the next x days (5 for example). Is this what this will provide or everyones birthday (that has one listed).
Many thanks, Colin
Hello Colin,
You can only add the downloadable files to the specified library when you have enabled the publishing feature located under ‘site collection features’ and ‘site features’, these are visible via site settings.
This currently shows a x number of people that have upcoming birthdays using the specified search query. You can change the query to only get results for 5 days. I suggest that you use the search tool from https://sp2013searchtool.codeplex.com/ and first try my query to see if you get results and then you can try to tweak the query like below:
* RefinableDate00>{Today-5845} RefinableDate00>{Today-5839}
Please let me know if this works 🙂
Kind regards,
Maarten
Will this not work with SharePoint Online? I don’t have the option for a “Search Results” Web Part?
I think you need Sharepoint plan 2 for this feature
Very good tutorial!
There is only one thing: The days you have to deduct are not counted till today, but to december 31. of the last year!
So the count should be: new-timespan -start “1/1/2000” -end “12/31/2017” =6574. If you want today’s date included, substract another 2 days, so 6576!
Hi, tested this is works like a charm. Was wondering how to translate the months (into Dutch)?
While this is very useful for displaying the birthday’s, it does not address showing the anniversary date of employees. At least not what most people looking for this are actually looking for, the ability to display the Hire Date along with the Birthday field.
Hi Daniel,
This can done using a custom user property which can be filled in by for example HR.
Kind regards,
Maarten