Create A SharePoint Birthday & Anniversary Slider Webpart

by Lucas 58 views
Iklan Headers

Hey everyone! Planning to add a bit of cheer and recognition to your SharePoint pages? Let's dive into creating a super cool Birthday & Anniversary Webpart (Slider). This guide walks you through how to display today's birthdays and work anniversaries on a SharePoint wiki page, complete with pictures, descriptions, and a sleek slider. We'll use lists, libraries, and a touch of conditional formatting to make it happen.

Setting Up Your SharePoint Lists and Libraries

First things first, we need to set up the foundation of our web part: the data sources. We'll use SharePoint lists and libraries to store the birthday and anniversary information. Let's get started.

Creating the 'Employee Directory' List

  1. Go to your SharePoint site and create a new list. Name it something like "Employee Directory." This list will store the core information about each employee.
  2. Add the following columns to the "Employee Directory" list:
    • Title: (Single line of text) – This will be the employee's name.
    • Date of Birth: (Date and Time) – The employee's date of birth. Make sure to set the "Include Time" option to "No."
    • Hire Date: (Date and Time) – The employee's hire date. Also, set "Include Time" to "No."
    • Picture: (Picture) – This column will hold the employee's profile picture.
    • Department: (Single line of text) – The employee's department.
    • Description: (Multiple lines of text) – A short description or any additional details you'd like to include.
  3. Populate the list with employee data. Make sure to include the necessary information for each employee, including their name, dates, picture, and any additional details you think would be great.

Setting Up the 'Anniversaries & Birthdays' List

  1. Create another list named "Anniversaries & Birthdays." This list will be used for the slider. This list will be automatically populated based on your "Employee Directory" list with today's birthdays and anniversaries.
  2. Add the following columns to the "Anniversaries & Birthdays" list:
    • Employee Name: (Single line of text) – This will hold the employee's name. You can make this a lookup column to the "Employee Directory" list if you'd like, but for simplicity, we'll just use a text field.
    • Event Type: (Choice) – This will specify whether it's a "Birthday" or an "Anniversary."
    • Date: (Date and Time) – The date of the event (either the birthday or the anniversary).
    • Picture: (Picture) – The employee's profile picture.
    • Description: (Multiple lines of text) – A description of the event. For birthdays, this could be "Happy Birthday, [Name]!". For anniversaries, it could be "Happy Anniversary, [Name] – [Years] years at the company!"

Using the Picture Library (Optional)

  1. If you prefer to store images in a Picture Library, create a new Picture Library (e.g., "Employee Pictures") and upload the employee profile pictures there. In the "Employee Directory" list, you would then use the picture library as a lookup column or a picture column, to reference the images. This helps with image management and organization.

By setting up your lists and libraries in SharePoint, you can store employee information in a structured way. You can easily manage and update employee data for birthdays and anniversaries. Now that the data is set, it can be easily displayed in the slider web part.

Creating the Web Part (Slider) with SharePoint Framework (SPFx)

Now comes the fun part: building the Birthday & Anniversary Webpart (Slider)! We'll use the SharePoint Framework (SPFx) to create a custom web part that dynamically displays birthdays and anniversaries. This part of the process involves some development work, so let's break it down step by step.

Setting Up Your Development Environment

  1. Make sure you have Node.js and npm (Node Package Manager) installed on your machine. These are essential for working with SPFx.
  2. Create a new project directory for your web part and navigate into it using your terminal or command prompt.
npm install -g yo gulp @microsoft/generator-sharepoint

Generating the SPFx Web Part

  1. Run the Yeoman SharePoint Generator to create the basic structure of your web part.
yo @microsoft/sharepoint

  1. When prompted, answer the questions as follows:

    • What is your solution name? (e.g., birthday-anniversary-slider)
    • Which baseline packages do you want to target for your component(s)? (Use the latest recommended version)
    • Where do you want to place the files? (Use the current folder)
    • What type of client-side component to create? (WebPart)
    • What is your Web part name? (e.g., BirthdayAnniversarySlider)
    • What is your Web part description? (e.g., Displays birthdays and anniversaries)
    • Which framework would you like to use? (React)

  2. This will generate the basic structure of your SPFx web part project. Navigate to the project folder.

Coding the Web Part Logic

  1. Open the project in your favorite code editor (e.g., VS Code).
  2. Locate the web part's main React component file (e.g., BirthdayAnniversarySlider.tsx). This is where you'll write the code to fetch data from your SharePoint lists and display it in a slider.
  3. Import the necessary modules and libraries. You'll need to import modules to interact with SharePoint lists, display data, and render the slider. This will include the sp-pnp-js library to interact with SharePoint and any slider library you want to use (e.g. react-slick).
import * as React from 'react';
import { sp } from '@pnp/sp';
import '@pnp/sp/webs';
import '@pnp/sp/lists';
import '@pnp/sp/items';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
  1. Fetch the Data. Within the React component, use the sp library to fetch the data from your SharePoint lists.
async componentDidMount() {
  const today = new Date();
  const currentMonth = today.getMonth() + 1;
  const currentDay = today.getDate();

  try {
    const items = await sp.web.lists.getByTitle('Anniversaries & Birthdays').items.filter(
      `month(Date) eq ${currentMonth} and day(Date) eq ${currentDay}`
    )();

    this.setState({ events: items });

  } catch (error) {
    console.error('Error fetching events:', error);
    this.setState({ error: 'Failed to load events.' });
  }
}
  1. Render the Data. Render the fetched data in the slider component. Use the react-slick library to display each birthday and anniversary as a slide.
render() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <div className={styles.birthdayAnniversarySlider}>
      {this.state.error && <p>{this.state.error}</p>}
      {this.state.events.length > 0 ? (
        <Slider {...settings}>
          {this.state.events.map((event) => (
            <div key={event.Id} className={styles.slide}>
              <img src={event.Picture.Url} alt={event.EmployeeName} className={styles.image} />
              <h3>{event.EmployeeName}</h3>
              <p>{event.Description}</p>
            </div>
          ))}
        </Slider>
      ) : (
        <p>No events today.</p>
      )}
    </div>
  );
}
  1. Style the Web Part. You can add CSS to style your web part. In your component's *.module.scss file, add styles to ensure the slider looks good. You can also add styling for the images, text, and slide background.

Deploying and Using the Web Part

  1. Package and Deploy. Build and package the web part. Run the following command to bundle and package your solution.
gulp bundle --ship
gulp package-solution --ship
  1. Upload to SharePoint. Upload the generated .sppkg file to the App Catalog of your SharePoint site. This will make the web part available for use.
  2. Add the Web Part to a Page. Go to a SharePoint page, edit it, and add your web part to the page. Configure any properties if necessary. Now you should see the Birthday & Anniversary Webpart (Slider) in action!

Automating Data Population

To ensure your web part always displays the correct birthdays and anniversaries, you'll need a way to automatically populate the "Anniversaries & Birthdays" list with relevant information from the "Employee Directory" list. This can be achieved in several ways.

Using Power Automate (Recommended)

Power Automate is the easiest and most efficient way to automate this process.

  1. Create a new flow. Go to Power Automate and create a new flow.
  2. Trigger. Choose a trigger. The trigger should be a scheduled flow, that runs daily, weekly, or monthly, depending on how often you want to check for new events.
  3. Get Items. Use the "Get items" action to retrieve all items from the "Employee Directory" list. This retrieves the information about all employees.
  4. Filter. Use the "Filter array" action to filter the "Employee Directory" items for today's birthdays and anniversaries.
    • For birthdays: Check if the current month and day match the employee's birth date.
    • For anniversaries: Check if the hire date anniversary is today.
  5. Create Items. Use the "Create item" action to create items in the "Anniversaries & Birthdays" list for the filtered employees. Map the required fields from the "Employee Directory" list to the "Anniversaries & Birthdays" list. You'll need to populate the "Employee Name", "Event Type", "Date", "Picture", and "Description" fields.
  6. Test and Save. Test your flow to ensure it works correctly, and then save it. Once activated, Power Automate will automatically populate the "Anniversaries & Birthdays" list.

Alternative: SharePoint Designer Workflow (Deprecated)

While SharePoint Designer is being phased out, it can be used for a simpler approach, although Power Automate is better.

  1. Create a workflow. In SharePoint Designer, create a new workflow on the "Employee Directory" list.
  2. Set Conditions. Set conditions to check the date of birth and hire date against the current date. If either matches today's date, the workflow continues.
  3. Create Item Action. Use the "Create item" action to create items in the "Anniversaries & Birthdays" list. Populate the relevant fields with data from the "Employee Directory" list.
  4. Publish. Publish the workflow to activate it. However, keep in mind that SharePoint Designer is being deprecated, so it's best to migrate to Power Automate.

Automating the data population step guarantees that the Birthday and Anniversary Slider always displays accurate, up-to-date information. It eliminates manual data entry, saving time, and making the web part a reliable source of information.

Enhancements and Customizations

Now that you've got the basics down, here are some ideas to elevate your Birthday & Anniversary Webpart (Slider):

Include more details

  1. Add more fields. Expand the employee information shown in the slider by adding more fields. For instance, you could display the employee's job title, department, or any other relevant details. This adds a personalized touch.
  2. Show the years. Calculate and display the number of years for anniversaries. You can do this in your SPFx component using JavaScript. This provides instant information about the employee's duration at the company.

Customize the Slider

  1. Choose slider options. Customize the slider's appearance. Experiment with different themes, animations, and transition effects. This helps tailor the look and feel of the web part to match your brand.
  2. Add custom styles. You can add custom styling to the slider components. Add custom CSS to style the images and text. Customize the appearance of each slide to match your brand.

Improve User Experience

  1. Add links. Make the slider interactive by adding links to the employee's profile or contact information. You can add a link to the employee's profile in SharePoint. This enhances the user experience by making it easy to learn more about each employee.
  2. Implement filters. Implement filters to show birthdays and anniversaries by department or other criteria. This enables users to find specific information quickly.

Implementing these enhancements can improve the functionality and appeal of the Birthday & Anniversary Webpart (Slider), creating a more enjoyable experience for your users and boosting the recognition of your employees.

Troubleshooting Tips

Building a web part can sometimes come with a few challenges. Here's how to handle some common issues:

Data Not Displaying

  1. Verify Data Sources. Double-check your SharePoint lists and libraries. Ensure the columns are set up correctly, and the data is entered accurately. Make sure the "Anniversaries & Birthdays" list is populated by Power Automate or another automation method.
  2. Check the Code. Carefully review your SPFx code, especially the sections that fetch data and render the slider. Make sure your code is error-free and the data is mapped correctly. Check for typos, incorrect variable names, and missing imports.
  3. Inspect the Console. Use your browser's developer tools to check the console for any errors. The console logs can provide detailed information about what's going wrong.

Slider Not Working

  1. Slider Configuration. Review your slider's configuration settings. Make sure that the slidesToShow, slidesToScroll, dots, and infinite settings are properly configured.
  2. Dependency Issues. Ensure that your slider library is correctly installed and imported in your SPFx project. Sometimes, problems can arise from version compatibility issues. Reinstall the library or check its version.

Deployment Issues

  1. Permissions. Make sure you have the necessary permissions to deploy web parts to your SharePoint site. You must have sufficient rights to upload and install the app package.
  2. App Catalog. Check that your web part is correctly uploaded and deployed to the app catalog. The web part won't be available if the app isn't properly deployed.
  3. Clear Cache. Sometimes, the browser's cache can cause issues. Try clearing your browser's cache and cookies, and then refresh the page.

By keeping these troubleshooting tips in mind, you can easily resolve most issues and successfully implement your Birthday & Anniversary Webpart (Slider), resulting in a functional and engaging solution for your SharePoint site.

Wrapping Up

Creating a Birthday & Anniversary Webpart (Slider) is a fantastic way to celebrate your employees and enhance engagement on your SharePoint site. By following this guide, you'll be able to build a custom web part using SPFx, fetch data from SharePoint lists, automate data population with Power Automate, and customize the slider to fit your needs. With a little effort and creativity, you can create a valuable tool that recognizes and celebrates your team members' special occasions. This web part will not only add visual appeal to your SharePoint pages but also foster a more connected and appreciative work environment. Happy coding, and happy celebrating!