Carousel is the 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 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 SharePoint List.
Building Carousel which interacts with dynamic content is a modern approach, that is easy as we make a cupcake. you need to follow a few steps and you get it
If you are new and learn from the basics please review the below URL and understand the step by step implementation
if you are familiar with the basic ReactJS and all required libraries, this is the right place for that
Introduction
we implementing a carousel with ReactJS and office 365/SharePoint List with the help of Bootstrap and TypeScript in SPFX
Steps
- Create a SharePoint List
- Install all the dependencies
- Copy the instruction and Code
- build a solution
- run the solution on the workbench mode
Create a SharePoint List
if you experience developer so it is nothing for you, but for the new one, it is easy just drink a coconut
in the above image, you can see the list I created and in the below image you can see the column which I used for the list- Title: Single Line of text
- Description: Multiline of Text
- RedirectURL: Hyperlink
- ImageURL: Hyperlink
Install all the Dependencies
first of all, you need to run the yo command to install the framework below command after the execution of this please select ReactJS as a framework
yo @microsoft/sharepoint
after success, 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
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 column 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 retrieve 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 its 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
Now, its time to open an interface ts file
export interface ISliderCarouselDemoProps {
description: string;
listName : string;
absoluteURL : any;
spHttpClient : any;
}
see below image for reference
after that, we need one more change for the Dynamically set List Name from the property panel
Need to open, Web part.ts, please refer below images
all is done, need to build a solution and deploy it on your site collection app catalogue
gulp build
gulp serve
gulp bundle --ship
gulp package-solution --ship
Conclusion
by stepping the above steps we can get a beautiful carousel with rich features
Thank you :)
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 .
ReplyDeleteNice
ReplyDelete