Create a slider with the ReactJS and Bootstrap with Dynamic Content of SharePoint List

Create a Dynamic Carousel Slider with React JS and SPFx

Author: Vishal Thakur

A good presentation increases the chances of impressing your audience. If you are a business owner with an online presence, your application must have a rich user interface and be easy to use. One effective way to share information with end-users is through a carousel slider. It allows you to present information in an engaging, slide-by-slide format, making it visually appealing and interactive.

Introduction

Building a carousel that interacts with dynamic content is a modern approach and as easy as making a cupcake. In this blog, I will show you how to implement a carousel using React JS and Bootstrap in SharePoint/Office 365 SPFx, which interacts with a SharePoint List.

Steps to Follow

If you are new to this, please review the basics by following the guide below:

Implement a Basic Carousel with ReactJS and Bootstrap 4 in Just 10 Minutes

Create a SharePoint List

If you are an experienced developer, this will be straightforward. For beginners, it’s as easy as drinking a coconut. Below is an example of the list I created:

The columns used in the list are:

Title: Single Line of Text
Description: Multiline of Text
RedirectURL: Hyperlink
ImageURL: Hyperlink

Install All the Dependencies

First, run the following command to scaffold the SPFx project:

yo @microsoft/sharepoint

After selecting React JS as the framework, run the following commands to install the required dependencies:

npm i --save react-bootstrap
npm install bootstrap@4 --save
npm install @types/bootstrap@4 --save
npm install jquery --save
npm install @types/jquery --save
gulp build

Copy the Code

Once all dependencies are installed, open the TSX file and add the following imports:

import Carousel from 'react-bootstrap/Carousel';
import "bootstrap/dist/css/bootstrap.css";
import * as jQuery from 'jquery';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

Next, define an interface for the list columns:

export interface ISliderCarouselListItem {
  Title: string;
  Description: string;
  ImageURL: [];
  RedirectURL: [];
}

Then, implement the API to interact with the SharePoint List:

private getCarouselListContent = () => {
  try {
    let requestUrl = `${this.props.absoluteURL}/_api/web/Lists/GetByTitle('${this.props.listName}')/Items`;
    this.props.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse): Promise<ISliderCarouselDemoState> => {
      if (response.ok) {
        return response.json();
      }
    }).then((item) => {
      if (item != null) {
        this.setState(({
          value: item.value
        }));
      }
    });
  } catch (error) {
    console.log('error in service ', error);
  }
}

Conclusion

By following the above steps, you can create a beautiful and functional carousel slider that interacts with a SharePoint List. React JS provides flexibility and an optimized way to communicate with SharePoint Lists and third-party APIs.

For more advanced carousel implementations, you can explore the following libraries:

I hope this guide helps you. Please share your feedback in the comments section.

Thank you! :)

For more tutorials, visit my blog: The Ultimate Resources.

The Ultimate Resources

Search This Blog