Carousel is a popular control used in many web applications. We can develop it manually it in SPFx Webpart using bootstrap or using javascript & CSS. Writing these controls manually is cumbersome. We need to manage each event manually.
Instead of creating these controls manually, we can use PnP controls.
PnP has a set of popular controls like Carousel, Charts, DatePicker, FilePicker, GridLayout, Map, Progress, and many more. We can use it easily with a few steps.
So, In this article we will see how to use Carousel Control of PnP in SPFx Webpart?
Carousel control renders passed elements with the ‘previous/next element’ option.
To use PnP controls in our application we will use This library provides a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. This library provides controls for building web parts and extensions.
In this article, we will build a sample SPFx application to render SharePoint List Data as PnP Carousel control. Which will look as below,
So let’s start step by step implementation …
- Go to the SharePoint Site
- Create a list. here I am creating a list Carousel
- Now in this list, we will enter some data so that you can create any field and then add data. for now, I am adding data in the Title field.
Now we will start creating a new solution so for that follow below steps, if you want to learn in detail then refer SPFx Development Step By Step article.
- Open the command prompt and create a directory for SPFx solution.
- Go to the above created directory
- Execute
yo @microsoft/sharepointto create the solution -
It will ask some questions about creating a solution so give an answer as shown below image:
- After successfully creating solution, open solution in VS Code, you can use a shortcut to open it using
code .command on command prompt.
The project structure will be as shown below image:
After successful completion of the creation webpart we will install the @pnp/spfx-controls-react library using the below command.
npm install @pnp/spfx-controls-react --save
Now we will update the following files step by step.
1. [webPartName]Props.ts
Move to the src/webparts/components/I[webpartName]Props.ts file.
We will create one property SiteUrl to get the current SharePoint Site Url.
export interface IPnPReactCarouselProps {
description: string;
siteUrl: string;
}
2. [webPartName]WebPart.ts
Move to the src/webparts/components/I[webpartName]WebPart.ts file.
Now we will modify the render() method to pass the current context.
public render(): void {
const element: React.ReactElement = React.createElement(
PnPReactCarousel,
{
description: this.properties.description,
siteUrl: this.context.pageContext.web.absoluteUrl
}
);
ReactDom.render(element, this.domElement);
}
3. [webPartName].tsx
Move to the src/webparts/components/I[webpartName].tsx file.
Here, We will get SharePoint list data using REST API so we have to add jQuery So install jquery using npm i jquery command.
Now import jQuery and Carousel control.
import * as jquery from 'jquery';
import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay } from "@pnp/spfx-controls-react/lib/Carousel";
Now we will create a method to get SharePoint list item and will store it in an array and will use this array to render data in render() method so will declare a global array after all import statements.
let listItems : any = [];
public getListData() {
jquery.ajax({
url: this.props.siteUrl + `/_api/web/lists/getbytitle('Carousel')/items?$select=Title`,
type: "GET",
headers: { 'Accept': 'application/json; odata=verbose;' },
success: resultData => listItems = (resultData.d.results as []).map((o:any)=> o.Title),
error: error => {
console.log(JSON.stringify(error));
}
});
}
public componentDidMount() {
this.getListData();
}
Now we will render the data in the render method. In this function, we will pass carousel properties as per our requirements. In, element property, we will pass our array data to render in the carousel. For all properties details, you can refer to this.
public render(): React.ReactElement {
return (
{ console.log(`Next button clicked: ${index}`); }}
onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
/>
);
}
Now we will serve this application using gulp serve command.
This will serve our application on
SharePoint-SiteURL + /_layouts/15/workbench.aspx
Once it successfully served on the localhost, we can deploy it on the SharePoint site.
We can deploy this solution on SharePoint site using two commands : gulp bundle --ship and then gulp package-solution --ship command. Refer SPFx Application Deployment article for more details.
Great ✨✨✨!!! We have successfully installed and used Carousel Control Of PnP in SPFx.
You can find the complete source code of this application at the end of the article GitHub repository.
This application will give the following output.
Output
GitHub Repository
https://github.com/chandaniprajapati/spfx-pnp-carousel
If you like this project, mark a ⭐ on GitHub Repository
Summary
In this article, we have step-step seen How to use Carousel Control Of PnP in SPFx Webpart ?.
I hope you like this article, share it with others. Give your valuable feedback and suggestions in the comment section below.
You may also like the following articles...
Sharing is Caring.
Happy Coding 🙂
Nice article chandini
Thanks 🙂