A good presentation makes the better chance to impress if you are the business person
and your business is online, it must be your application have a very rich user interface and ease of work, there is one way to express or share the information with the end-user
and your business is online, it must be your application have a very rich user interface and ease of work, there is one way to express or share the information with the end-user
A carousel is the best way to express, it will share the info by sliding one by one, each slide has different expressions end-user will be impressed by its attractive design slide.
a business owner can share the Deals and offers.
If you want to implement a carousel with ReactJS and interact with SharePoint List, then, this is the right place.
If you want to implement a carousel with ReactJS and interact with SharePoint List, then, this is the right place.
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-bootstrapnpm install bootstrap@4 --savenpm install @types/bootstrap@4 --save
npm install jquery --savenpm install @types/jquery --savegulp build
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
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
gulp build
gulp serve
Conclusion
To make your product nice and beautiful and informational and attractive the best way is to use the carousel slider, it takes some space and provides lots of information with each slide.
in the above block, we saw how we can implement a very beautiful and useful carousel with the help of ReactJS,
React JS provides flexibility with the optimized way of communication between communication SharePoint List and third-party APIS.
by following the above steps we can get a beautiful carousel with rich features
ReactJS provides lots of solutions for implementing carousel
one of these is the
react-responsive-carousel React Responsive Carousel
react-bootstrap click here to redirect
react-slick click here to redirect
Hope this will help full, please share your comments
Thank you :)
Comments
Post a Comment