The Work anniversaries web part highlights your colleagues' work anniversaries, those that just passed and those coming up, based on their arrival date in Microsoft 365. Each card shows the years celebrated and the gap with the anniversary; an optional button lets your visitors send their wishes in Teams in one click.

This article describes the web part's use cases, its prerequisites, how to get started, its settings, entering content on the page and the best practices to follow.

📋 Contents

1. About the web part
2. Before you start: arrival dates in Microsoft 365
3. Add the web part to your page
4. Configure the web part
5. Enter the title and the wishes button on the page
6. Best practices
7. What changes from the previous version

1. About the web part

The Work anniversaries web part is made of an optional title and a grid of cards, one per collaborator. Each card shows:

• the collaborator's profile photo, or their initials if they have no photo;
• their name;
• the fields you choose, such as their job title;
• an anniversary badge, which shows the years celebrated and the gap with the anniversary;
• a wishes button, if you turn it on.

When you click a card, the collaborator's Microsoft 365 profile card opens. A card whose collaborator has no email address doesn't react to clicks.

Use cases

• Celebrate work anniversaries every week on the intranet home page.
• Announce the coming month's anniversaries on a department or site page.
• Recognize a team's seniority and loyalty, by restricting the web part to Microsoft 365 groups.
• Invite colleagues to send their wishes in Teams, in one click on the card.

How an anniversary is calculated

A collaborator's work anniversary falls every year on the day and month of their arrival date, starting with the first anniversary. The period you choose in the panel (see part 4) applies to these anniversaries, not to the arrival date itself: a collaborator shows when their anniversary falls in the past window or in the upcoming window.

• "Today" is the visitor's day, in their time zone, when the page loads.
• If the arrival date is February 29, the anniversary falls on February 28 in non-leap years.
• Each collaborator shows only once. Their badge places their anniversary closest to today within the active windows.
• Cards show first for past anniversaries, from the most recent to the oldest, then for upcoming anniversaries, from the nearest to the furthest.

💡 The first anniversary counts as soon as it approaches, even if the collaborator hasn't been in the organization for a year yet.

💡 A collaborator whose arrival date is still to come never shows in this web part. To present upcoming arrivals, use the Jint - Newcomers web part.

The anniversary badge

The badge shows the years the anniversary celebrates ("1 year", "3 years"), followed by the gap with today, in relative time: in days under 7 days, in weeks under 30 days, then in months.

⚠ When the anniversary is 7 to 30 days away, both included, the badge doesn't show the gap, but "Almost" followed by the years: for example "Almost 2 years". Two cards can therefore present their badge in two different ways.

When you hover over the badge, a tooltip gives the collaborator's arrival date: "Joined on", followed by the date in short format.

2. Before you start: arrival dates in Microsoft 365

The web part reads each collaborator's arrival date in their Microsoft 365 directory profile. Without an arrival date filled in the directory, a collaborator never shows.

Two conditions are therefore required:

1. Your collaborators' arrival dates are filled in the Microsoft 365 directory.
2. A tenant administrator has approved the permission to read the directory.

⚠ Without this permission, the panel shows "Directory permission missing: a tenant administrator must approve it.", and no other warning message. On the page, the web part shows "The content can't be shown right now.". In edit mode, you also see the error detail; your visitors don't.

⚠ If none of the collaborators the web part can show has an arrival date, the panel shows "No arrival dates are available for these collaborators: check that they are filled in the directory, and that a tenant administrator has approved the permission to read them."

💡 The web part shows the directory as it was at most 5 minutes ago: a newly filled arrival date can take a few minutes to appear.

3. Add the web part to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the web part, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Work anniversaries, in the "News, people, and events" category.
4. The web part is added where you want it, with its default values.

A newly inserted Work anniversaries web part carries the title "Celebrating their work anniversary". It shows the anniversaries of the past week and of the coming week, for all collaborators, with their job title and their anniversary badge, without a wishes button.

If nobody has an anniversary in the period, the web part shows "No anniversaries to show".

4. Configure the web part

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately, except a number typed in a field, which applies when you leave the field.

4.1 Design tab

Layout

The section has two groups: Grid and Profile card.

Setting	Values	Default
Profiles per row	Auto, Single	Auto
Spacing	Compact, Airy	Compact
Format	Portrait, Landscape	Portrait
Show photo	on or off	On
Size	Small, Large	Small

• Profiles per row: Auto shows as many cards per row as the section width holds, six at most. Single gives each card a whole row.
• Airy widens the gap between cards and the margins of each card.
• Size appears when Show photo is on. Large enlarges each card's photo.
• With the photo off, no card shows a photo.

⚠ If you choose Single while the format is Portrait, the format automatically switches to Landscape.

Web part height

Setting	Values	Default
Height (px)	with the slider or by typing, in steps of 10, up to 800 px	250 px

The height sets how many whole rows of cards the web part shows. Cards that don't fit move to the following pages, which your visitors browse with the pagination: a chevron on each side and dots in the center, five at most. On mobile, they change pages with a swipe. If all the cards fit on one page, the pagination doesn't show.

⚠ The minimum height is the larger of 150 px and the height of one whole row of cards. If the card grows (format, photo, displayed fields), the height rises to this minimum on its own.

Background

Setting	Values	Default
Background	Color, Image	Color
Background color	a palette color or a custom code	White
Choose an image	a SharePoint image	a default image
Mark as decorative	on or off	On
Alternative text	a text	empty
Focal point	a point of the image	the center

• Color: the background takes the chosen color. Texts without a color of their own placed on this background, such as the title, automatically switch to black or white, whichever contrasts best.
• Image: the background shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.

💡 Below the image, the panel reminds you of the recommended format: "Recommended: JPG, PNG or WebP, at least 1920 × 1080 px, under 1 MB."

⚠ If the background image is deleted or moved, the panel shows "Image not found: it may have been deleted or moved. Choose another one." and the web part shows on a white background.

Appearance

The Appearance section sets the border, shadow and corner radius of the web part and of its cards, as well as the cards' background and text color.

By default, the web part follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

Then choose the scope of your settings: Web part for the web part as a whole, Cards for the cards. The section opens on Web part. Each scope has its own border, its own shadow and its own corner radius.

Setting	Values	Default
Border	on or off, then Subtle, Medium, Marked or a custom width from 1 to 10 px, and a Border color	Off
Shadow	on or off, then Light, Medium or Strong	On, Medium
Corner radius	on or off, then Soft, Medium, Marked or a Custom radius from 0 to 50 px	On, Medium

For the Cards scope, two settings are added:

Setting	Values	Default
Background	a palette color	White
Text color	a palette color	Black

4.2 Content tab

Accessibility

The Accessibility section has no setting. As soon as the panel opens, it measures the contrast of the cards' text, named Card, with their background. It shows the Ratio and the Overall readability: Excellent, Good or Insufficient.

If readability is Insufficient, click Fix: each color that is too weak is replaced by the closest palette color that gives enough contrast.

As long as no card shows, the section says "No card to check for now."

Title

Setting	Values	Default
Show title	on or off	On

The title is entered and formatted directly on the page (see part 5). Turn Show title off to show the cards only.

Work anniversaries

The Work anniversaries section sets the period: a past window and an upcoming window, around today.

Setting	Values	Default
Recent anniversaries	on or off, then a duration: 1 week, 1 month, 3 months, 6 months or Custom	On, 1 week
Upcoming anniversaries	on or off, then a duration: 1 week, 1 month, 3 months, 6 months or Custom	On, 1 week
Number of days	from 1 to 365	7

• The list of durations appears when its window is on; Number of days, when the duration is Custom.
• Each window counts from today, the day itself included. 1 month, 3 months and 6 months are calendar months.
• Recent anniversaries shows the collaborators whose anniversary just passed; Upcoming anniversaries, those whose anniversary is approaching.

⚠ If you turn both windows off, the web part shows all collaborators who have an arrival date, each placed by their anniversary closest to today. The section reminds you: "No active window: all collaborators are shown."

⚠ If none of the collaborators the web part can show has an anniversary in the chosen windows, the panel shows "None of these collaborators has a work anniversary in the chosen period." This message doesn't show when the directory gives no arrival date: the message about arrival dates shows instead (see part 2).

Wishes button

Setting	Values	Default
Wishes button on the card	on or off	Off

When it's on, the section shows: "Click the button on a card to change its text and style. For visitors, the button opens a Teams chat with the card's collaborator."

• When they click the button, your visitors open a Teams chat with the collaborator, in a new tab. Clicking the button doesn't open the profile card.
• A collaborator without an email address has no button.
• The button's text and style are set on the page (see part 5).

Source (groups and people)

Setting	Values	Default
All collaborators	on or off	On
Groups and people shown	people and Microsoft 365 groups	none
Include external accounts	on or off	On

• Groups and people shown appears when All collaborators is off. The web part then shows the chosen people and the members of the chosen groups, subgroups included.
• With Include external accounts off, guests and accounts from other organizations are left out, even when chosen by name.
• A disabled account never shows.
• If a group can't be read, the web part still shows the other chosen people and groups.

⚠ If you turn All collaborators off without choosing anyone, nobody shows anymore. The section warns you: "No group or person chosen: nobody is shown."

Displayed fields

Setting	Values	Default
Displayed fields (drag to reorder)	an ordered list of fields	Job title, Arrival date

The Add a field menu offers, in this order: Job title, Department, Location, Arrival date, Company name, Employee ID, Employee type, Manager, Street address, City, State, Postal code, Country or region, Business phone, Email, Fax number.

• An added field goes to the end of the list. Drag a field by its handle to change its place, or click its cross to remove it.
• Each card shows one line per field, below the name, in the order of the list. If a collaborator's profile has no value for a field, their card doesn't show that line.
• The Arrival date field shows as the anniversary badge.

4.3 Visibility tab

Audience

Turn on Custom audience to restrict the web part to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

Turn on Hide when there's nothing to show so that your visitors don't see the web part when nobody has an anniversary in the period, instead of the "No anniversaries to show" message. If the anniversaries couldn't load, the web part stays visible.

Setting	Values	Default
Custom audience	on or off, then people and groups	Off
Schedule visibility	on or off	Off
Display start	on or off, then a date and a time	Off
Display end	on or off, then a date and a time	Off
Hide when there's nothing to show	on or off	Off

⚠ If you turn on Custom audience without choosing anyone, no one sees the web part anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", the display dates, or "Hidden when empty".

5. Enter the title and the wishes button on the page

The title

Click the title: it becomes editable and a toolbar shows above it. It sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style. Click outside the title to confirm.

By default, the title is "Celebrating their work anniversary", H4, black, 20 px and bold. If you erase the title, your visitors don't see it.

💡 As long as the web part follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.

The wishes button

When Wishes button on the card is on, each card shows the button in edit mode. Click the button on a card to enter its text: a toolbar shows.

⚠ As long as you haven't entered anything, the button shows "Congratulate 🎉" as a placeholder, visible to you only: your visitors don't see the button. Enter the button's text to publish it. The only exception: a button set to Icon only shows even without text.

The text and style are shared by all cards: changing the button on one card changes it on all the others. Each change applies to the whole text of the button.

Setting	Values	Default
Button style	Filled, Outline, Text	Filled
Icon	No icon, Icon left, Icon right, Icon only	No icon
Choose icon	Arrow, Chevron, Add, Open, Document, Email, Calendar, Announcement, Team, Play	Arrow
Font size	from 8 to 120 px	16 px
Fill color	a palette color	your SharePoint site's primary color
Corner radius	from 0 to 50 px	6 px

• Choose icon appears with an icon on the left, on the right or alone.
• Fill color colors the background of a Filled button and the border of an Outline button. A Text button has neither background nor border.
• The toolbar also sets the font, the text color (white by default), bold, italic, underline and alignment.
• With Icon only, the button shows its icon's name on hover. If you go back to another choice, the button's text comes back as it was.

⚠ In edit mode, the button doesn't open any Teams chat, and clicking a card doesn't open any profile card. Test them on the published page.

6. Best practices

Have arrival dates filled at the source

The web part only shows collaborators whose arrival date is filled in the Microsoft 365 directory. Check with your Microsoft 365 administrator, or with your onboarding process, that each account has its date.

Choose a period that suits your headcount

In a large organization, a 1 week window is enough to fill the web part. For a team, prefer 1 month. The panel warns you when nobody has an anniversary in the chosen period.

Enter the wishes button's text

If you turn on Wishes button on the card, enter its text on the page: without text, your visitors don't see the button.

Adapt the height to the number of cards

Cards that don't fit in the chosen height move to the following pages. On a home page, increase the height so your visitors see all the cards at a glance, without changing pages.

Keep cards short

Two or three fields are enough, for example Job title, Department and Arrival date.

Check the cards' contrast

If you customize the cards' background or text color, check the Accessibility section: aim for Good at least.

7. What changes from the previous version

If you used the previous version of the web part (see the article Professional Anniversaries web part):

• The web part is now called Jint - Work anniversaries in the catalog, in the "News, people, and events" category.
• The web part shows the anniversaries coming up and those that just passed, with two windows set separately: Recent anniversaries and Upcoming anniversaries.
• A badge combines seniority and the gap with the anniversary; the arrival date shows on hover.
• A collaborator whose arrival date is still to come never shows, the first anniversary counts as soon as it approaches, and an arrival on February 29 is celebrated on February 28 in non-leap years.
• The panel warns you when nobody has an anniversary in the period, when no arrival date is available or when the directory permission is missing.
• The source is set to All collaborators, or to chosen people and groups, subgroups included.
• ⚠ External accounts are now included by default. Turn off Include external accounts to leave them out.
• You choose the Displayed fields on each card, and their order.
• The Teams button becomes an optional Wishes button, off by default, whose text, style and icon you choose.
• When you click a card, the collaborator's Microsoft 365 profile card opens.
• The height is set with a slider and sets the number of rows of cards per page, with pagination. The card is set separately: profiles per row, spacing, format and photo.
• New: a color or image Background, an Appearance (border, shadow, corner radius) linked to the Jint theme for the web part and for its cards, and an Accessibility section that checks the cards' contrast.
• The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience, schedule its display and hide it when it has nothing to show.