Hello everyone ,
I hope, You are well and doing good.
What is CQWP?
SharePoint Content Query Web Part (CQWP) is a powerful tool to display aggregated content from various SharePoint pages, lists and libraries .
Note : More Information regarding cqwp
Now i am here to explain you how to get List item from SharePoint list and library and display it in Content Query Web part with attractive manner and user friendliness.
Now, i have a question .How can i make it attractive manner ? Right . Let me Explain You. I want to tell you that , In attractive manner means put some animation,Give effect with sliding etc etc.
Business Requirement :
I have one share point list name with NewsList. Now i want to display data in “Newslist” on my home page with sliding effect. E.g I have 5 records in NewsList and I have to display Top 3 records in CQWP . Only one record display in one slide.Slider has to be automatically working . Display field of NewslIst is “Title”, “Date” and “NewsContent” . If “NewsContent” is more than 40 Characters , than Only 40 characters can be in slider and must be a link Read More… Below that.
I Hope , Everyone is clear with Requirement. Now i am going to describe solution to fulfill this requirement. There is two way : 1)Add Script Editor to with content query web part and load necessary .js file to share point . 2) Add and load .js file using XSL . I have prefer second way for get output Solution : Step :1
- You have to create one list or library in your share point site.
- After that you have to select content Query Web part in your page where you want to implement slider
Note: If you are working on TeamSite than you have to activate two features to use CQWP . 1) SharePoint Server publishing infrastructure.(Site level) 2) SharePoint server publishing(Web level) But if you are using Publishing Site than no worry . Two features automatically activated by share point.
- Now, You have to configure such setting to get list records in CQWP.
Step : 1
Steps to open CQWP Tool Part : Edit Page –> Click on Edit Web part –> Tool part is open in left side of your page
Now you have to set path of resource from which you want to take data and show it in to CQWP. Either it is list or Library.
Step : 2
You have to Export webpart.
Steps to export webpart.
Edit Page -> Edit Webpart ->Click on Export Button ->Web part exported successfully in your local macNow you h
Open Exported .webpart file in share-point designer or in other tool like note or notepad++.
Step : 3
You have to change value of two properties in .webpart. You have to change value of this properties if you are using your custom “itemstyle.xsl” or “contentquerymain.xsl” . if you are using default file than you have not to change it.
Set your itemstyle.xsl file path in itemslLink and contentquerymain.xsl in Mainxsllink. You can see in image .
Close the.webpart fie and upload webpart in sharepoint.
Edit Page -> Insert -> Click on webpart ->Click on upload webpart -> select webpart -> Click on Upload
Step : 4
Now open Itemstyle.xsl To put your login for slider.
I had use Jassor.slider to display data with sliding . You can use any other slider to display data.
Here , Create your custom template to display data in ItemStyle.xsl. i have created SliderTemplate . Here CurPos and LastRaw is two parameter to give some css or display data in some manner.
This Two parameter is define in contentmain.xsl.
Note :Why is it necessary to create and call “removemarkup”?
If you are direct get data from body field in announcement list than you can get string with some html tag and special character which is not understandable by non-technical person. So we have to remove this type of tag and special character
So i have to remove this type of tags using “removeMarkUp” template. you can use it as per your requirement.
Now Open your site . open Wenpart Tool panal . and check your custom template is present or not.
If Template is displayed in drop down . That means you have successfully configures custom template to the web part. You can see slider on page with necessary data.
Kindly contact me if have any query regarding this post.
Happy Coding 🙂