Skip to main content

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

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
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.




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 { SPHttpClientSPHttpClientResponse } 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{
    Titlestring;
    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(requestUrlSPHttpClient.configurations.v1)
      .then((responseSPHttpClientResponse) : 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.length0 && collection.map((dataindex=>
  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 {
  descriptionstring;
  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



Hope this will help full, please share your comments

Thank you :)


Comments

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (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 1: How would you approach implementing this functionality in an SPFx web

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s

Top20 - SharePoint Framework (SPFx) Interview Questions

1.  Which tool we can use to generate a SharePoint Framework (SPFx) solution? Developers can use  Yeoman to generate SharePoint Framework (SPFx) solution, it is a client-side scaffolding open-source tool to help in web-based development. 2. How developer can ensure that the solution deployed was immediately available to all site collections in SPFx?  To ensure the availability of the deployed solution on all the site collections developer has to configure  skipFeatureDeployment: true  in package-solution.json {     "solution" : {       "name" : "theultimateresources-deployment-client-side-solution" ,       "id" : "as3feca4-4j89-47f1-a0e2-78de8890e5hy" ,       "version" : "2.0.0.0" ,       "skipFeatureDeployment" : true     },     "paths" : {       "zippedPackage" : "solution/theultimateresources-deploy-true.sppkg"     }  }