Back to Projects

Employee Anniversary Web Part

Employee Anniversary Web Part

Employee Anniversary Web Part

React
TypeScript
Styled Components
SPFx

A SharePoint web part that displays upcoming employee anniversaries.

Key Features

  • Displays upcoming employee anniversaries
  • Users can see the name, photo, and anniversary date of each employee
  • Users can click on an employee to see more information about them
  • Page editors can configure the web part to display the anniversaries in different ways

Project Progress

100%

Overview

This project was built as part of a larger suite of employee web parts that we were building for a client. We ended up building a suite of employee web parts that became part of our IP and they ended up being products we sold almost every SharePoint project we worked on.

This project utilized a SharePoint list of employees with columns for employee, hire date, photo, and birthday. We used the SharePoint list so it was easier for site admins to manage the data instead of having to try and work with other systems or databases across teams.

Companies loved seeing the upcoming anniversaries of their employees displayed on their SharePoint sites, and the web part was extremely flexible so it could be used in a variety of locations on the page and configured to display as a list or a grid of cards.

Employee Anniversary Web Part

Technical Details

Architecture

  • Frontend: React, TypeScript, Styled Components, SharePoint Framework (SPFx), Fluent UI React
  • Deployment: SharePoint Online
  • APIs: SharePoint REST API

Features

Feature 1: Highly Configurable Display Options

The web part had many configuration options in the property pane that allowed the page editor to configure the web part to display the anniversaries in different ways.

  • Layout: Grid or Filmstrip
  • Orientation: Horizontal or Vertical
  • Maximum number of items to display
  • Days to look ahead for anniversaries

Employee Anniversary Web Part Edit Mode

Development Process

Lessons Learned

  • This project was a great learning experience in thinking in reusable components and patterns for in React. Many of the components used here were used in our other employee web parts.
  • There was a lot of whiteboarding and planning to make sure we were building a configurable and reusable web part that could be resold to a variety of clients in any industry.

Conclusion

This was a great project and one of many that I built for the consulting firm for a specific client that eventually became internal IP for the firm. It even became part of a larger suite of employee web parts that we repeatedly sold to many clients in a variety of industries.