Skip to main content

Step-by-step guide to create a carousel with ReactJS and SharePoint List

Step-by-Step Guide to Create Carousel with ReactJS and SPFx in SharePoint

Step-by-Step Guide to Create Carousel with ReactJS and SPFx in SharePoint

By Vishal Thakur

Introduction

Carousel is a beautiful control for any kind of web or app solution. It provides a rich user experience by spreading information in the form of media or images. In this blog, I am going to tell you how we can implement and deploy the carousel with the help of React JS in a SharePoint modern site, with the help of SPFx WebParts.

You only need to follow very basic steps to do it. Don't be afraid; this is the right blog to implement a carousel with ReactJS and interact with a SharePoint List.

Steps to Create a Carousel with ReactJS and SPFx

1. Create a SharePoint List

If you are an experienced developer, this is nothing new for you, but for beginners, it is as easy as drinking a coconut. Below is an example of the list I created:

SharePoint List Example

In the above image, you can see the list I created, and in the below image, you can see the columns which I used for the list:

  • Title: Single Line of text
  • Description: Multiline of Text
  • RedirectURL: Hyperlink
  • ImageURL: Hyperlink
SharePoint List Columns

2. Install All the Dependencies

First of all, you need to run the yo command to install the framework. After executing the below command, select ReactJS as the framework:

yo @microsoft/sharepoint

After success, you need to run some more commands step by step:

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

3. Copy the Instruction and Code

Once all is done, open the TSX file from the solution and copy the below text and paste it into the import section:

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

Need to write an interface for the list's columns so that when we trigger the API, all the mapping should be done automatically:

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

After that, we need to implement a collection of this list item:

export interface ISliderCarouselDemoState{
    value : ISliderCarouselListItem[];
}

Just after we add a constructor and initiate default states of collection:

constructor(props){
    super(props);
    this.state = {
        value: []
    }    
}

Implement an API that interacts with the SharePoint List and retrieves the data collection:

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){ 
                try{                    
                    this.setState(({ 
                        value: item.value                    
                    }));                    
                }
                catch(err){                
                }
            }
        });
    } catch (error) {        
        console.log('error in service ', error);    
    }
}

Once this API is done, need to call it with ReactJS event, in our case, we call it with component Did Mount Event:

componentDidMount = () => {        
    this.getCarouselListContent();
}

Now it's time to Bang-Bang, copy the below content in the render method:

public render(): React.ReactElement<ISliderCarouselDemoProps> {
    let collection = this.state.value;
    console.log('Collection ', collection);
    return (
        <div className={ styles.sliderCarouselDemo }>
            <Carousel>    
                {collection.length> 0 && collection.map((data, index) =>{ 
                    return(            
                        <Carousel.Item>
                            <a href={data.RedirectURL['Url']}>
                                <img
                                    className="d-block w-100"
                                    src={data.ImageURL['Url']}
                                    alt="First slide"
                                />
                                <Carousel.Caption>
                                    <h3>{data.Title}</h3>
                                    <p>{data.Description}</p>            
                                </Carousel.Caption>
                            </a>    
                        </Carousel.Item>    
                    ) 
                })}
            </Carousel>
        </div>
    );
}

The below image shows you how the final code looks like:

Final Code Example

4. Build and Deploy the Solution

All is done, now you need to build the solution and deploy it on your site collection app catalog:

gulp build
gulp serve
gulp bundle --ship
gulp package-solution --ship

Conclusion

By following the above steps, you can create a beautiful carousel with rich features using ReactJS and SPFx in SharePoint. I hope this guide makes your task easy. Kindly share your comments so that I can improve my blogs. Thank you! :)

Related Articles

Comments

  1. Bro if possible , please share the code link ,I am not able to fetch data from list , collection count is 0, there is no data to show .

    ReplyDelete

Post a Comment

Popular posts from this blog

Power Apps modern driven app Interview Question and answer

Power Apps Modern Driven App: Questions and Answers Power Apps Modern Driven App: Questions and Answers Power Apps modern driven apps are low-code/no-code platforms that enable users to create custom applications. Below are some common questions and detailed answers to help you understand their capabilities and applications. Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without extensive coding. These apps are built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens: Serve as the user interface for the app, including layouts, ...

SPFX Interview question for 2023

SPFx Interview Questions for 2023 SPFx Interview Questions for 2023 Author: Vishal Thakur Question 1: What is SharePoint Framework (SPFx)? Answer: SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating client-side web parts and extensions for SharePoint Online and SharePoint 2019. It is based on modern web technologies like JavaScript, TypeScript, and React, providing a rich and responsive user experience. Question 2: What are the key advantages of using SPFx for SharePoint development? Answer: SPFx offers several advantages, such as: Responsive and mobile-ready web parts and extensions. Seamless integration with SharePoint data and services. Support for modern web development practices and tools. Easy deployment and hosting options. Enhanced security and isolation through the SharePoint app model. Question 3: Can you explain ...

Interview Questions of SPFx SharePoint

SPFx Interview Questions and Scenarios SPFx Interview Questions and Scenarios By Vishal Thakur What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development. It integrates seamlessly with SharePoint data and extends Microsoft Teams. SPFx allows developers to use modern web technologies and tools in their preferred development environment to build responsive and mobile-ready experiences. Scenario-Based Questions Scenario 1: External API Integration Scenario: Your team is developing an SPFx web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question: How woul...