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:

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Go to Manage Search Schema -> crawled properties and search for birthday

Image may be NSFW.
Clik here to view.

You can see that it hasn’t been mapped to a managed property.
Click on the property

Image may be NSFW.
Clik here to view.

Add a mapping

Image may be NSFW.
Clik here to view.

Map this property to a RefinableDate which is available and click twice on OK

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Add Web Part

Image may be NSFW.
Clik here to view.

Add

Image may be NSFW.
Clik here to view.

Edit Web Part and first change the following settings

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

And the following appearance

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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 Image may be NSFW.
Clik here to view. )

Image may be NSFW.
Clik here to view.

Go to the sorting tab

Image may be NSFW.
Clik here to view.

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:

Image may be NSFW.
Clik here to view.

Go to site settings

Image may be NSFW.
Clik here to view.

Go to Master pages

Image may be NSFW.
Clik here to view.

Go to Display Templates

Image may be NSFW.
Clik here to view.

Go to Search

Image may be NSFW.
Clik here to view.

Enable the publishing features if you only see .js files

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Create a new folder

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

Set the display template for the search web part

Edit the Search Result Web Part

Image may be NSFW.
Clik here to view.

And use the Birthday Template

Image may be NSFW.
Clik here to view.

Download the birthday.html and .css

Image may be NSFW.
Clik here to view.

SharePoint birthday and anniversary web part display template and CSS 2.62 KB

Verify CAPTCHA to Downlaod

The post SharePoint birthday and anniversary web part using search results appeared first on SharePoint Fire.