Display SharePoint Online List Items using a Content Search web part

In this SharePoint search tutorial, we will discuss how to display all SharePoint Online list items using a content search web part. By using the content search web part, you can display search results that can be easily formatted by using a custom display template.

In my SharePoint Online site, there is a list as “Demo Product Details” which has below columns.

• Title
• ProductDetails
• ProductName
• ProductManinImage

I want to display the “Title”, “ProductPicture”, “ProductName” and “Product Details” in the SharePoint web part page using a Content search web part.

Here I am using a Publishing site. I have created a web part page and named as “DisplayListItem”.

Edit the page then add the “Content Search” web part which comes under “Content Rollup” of Categories section.

When the “Content Search” web part will successfully add to the SharePoint web part page, we will see the items which I have recently modified in the SharePoint site.

Retrieve and Display List Items using SharePoint Online Content Search web part

Now we will see how to display list items from a particular list using the “Content Search Web part” in SharePoint Online web part page.

Click on edit web part of the content search web part. Click on the “Change query” below the “Search criteria” like below.

The “Build Your Query” page, first check it is in “Advanced mode” or “quick mode”. If it is in “Advanced mode” then “Switch to the Quick Mode” from the right side corner of “BASICS” page. The “Quick Mode” page contains

Select a query : From the dropdown select “Documents(System)”

Restrict by the app: In the “Restrict by app” dropdown field select the “Specify a URL”. One input text box will arise, give the particular list URL in the text box which items you want to retrive.

Restrict by tag : Select “Donot restrict by any tag”.

Go to the “Advanced Mode”.

In the “Advanced mode” page remove the red column highlighted things, except the list URL delete all the thing in the “Query Text”. Click on “Test Query”

We can see all the list item in the “Relevent Results” in the “Search result preview” click on Ok. Then in the “Properties” page click on “Apply” and “OK”

We can able to see all the list item with the title filed in the web part page.

Use SharePoint Online List GUID to display items from a particular list

Now we will see by passing the guid how we will get the Particular list items.

For that first go to the particular list, list settings in the top we can able to see “List=%7B4D42C965-B4C6-46DE-99D4-82B97DAD7E1C%7D” with the list url. From this url we will get our list “GUID”.

convert the %7B to { and %7D to }. So our
“GUID” will be {4D42C965-B4C6-46DE-99D4-82B97DAD7E1C} .

Go to the web part page. Edit the web part. Add the “Content Search web part”. Go for the “Edit” the “Content search web part”. Click on “Change Query” and go to the “Build Your Query” Basics page.

In the “Quick mode page” in the “Select a Query” field select the “Item related to current user”. In the “Restrict by app” field select “Current site”. Now click on “Switch to Advanced Mode”.

The “Advanced Mode” contains some of the below field.

Select a query: By default the “Local SharePoint Result(System)” will be selected. If not select the “Local SharePoint Result(System)”.

• Keyword filter: In the Keyword filter the “Query from the search box” will be selected.
• Property filter: First click the “Show all managed properties”. Select the “ListID” from the dropdown. In the second dropdown select the “Contains”. In the third dropdown list select the “Manualvalue”. After seleccting the manual value one text box will come give the list “GUID”. Click on “Add property filter”.
• Query Text: In the Query Text we will see the List ID will be added automatically. To check the Query click on “Test query”. In the “SEARCH RESULT PREVIEW” we can able to see all the SharePoint online list item. Click on OK then all item will appear in the Web part page.

Display multiple columns in Content Search Web Part

Now we will see how to display more columns on the web part page using the content search web part.

In the below example I am showing you how to display “Title”, “ProductName”, “ProductImage” and “ProductDetails” in the web part page.

Go to “Edit the Web part” page. We can able to see “Property Mappings” option. Below the “Property Mappings”, enable the Check box “Change the mapping of managed properties for the fields in the item display template”.

After we select the text box we can able to see some of the text box field.

• PictureURL: I have mapped my SharePoint list “ProductImage” site column to PictureURL(managed property). So in the text box I have seleccted from the dropdown “PictureURL”. Already we can able to see the “PictureURL”, if it is not there then add.
• Link URL: Leave the field as it is. By default the field is selected to Path.
• Line1: I have selected the title column in the line 1 field.
• Line2: In the Line 2 I have selected the “RefineableString00(managed property)”. The Product name site column, I have mapped with “RefineableString00”. So i have selected the “Refineable string00” to displying the “ProductName” in the SharePoint web part page.
• Line3: Like that for the “Product Description I have selected the “RefineableString01(mapped to “Property Mappings”.

Click on “Apply” and “OK”.

Below screenshot we can notice in the output the Picture”, “title”, “ProductName” and “Product Details” is displaying.

Content Search WebPart with Query String in SharePoint Online

Now we will see how to create a query string in the “Content search web part”. Using the Query string we will display the items based on the various search criteria. Here we will see how we will filter the title field from the SharePoint online list using the content search query string filter.

For that, I have created one more content search web part and go to the “Change Query” of SharePoint “Edit Content search web part”.

In the “Quick Mode” in the “Select a query field” select the “Item related to current user(System).

Restrict By App: Give the SharePoint Online list URL below the “Select a query. Go to the “Advanced Mode”.

The advanced mode is containing “Select query”, “Keyword filter”, Property filter”and “Query String”.

Leave the “Select Query field, by default it is always “Local SharePoint results(System).

• Keyword filter: Select the “Value of a parameter from URL”.
• PropertyFilter: Select the “Title” field. If the field is not available then click on “Show all managed property”, then the title filed will available in the dropdown list. Leave the “Contains” field as it is. In the next drop down select the “Value of Parameter from URL”.

Click on “Add property filter”. In the “Query Text” box automatically query will be added that “Title:{QueryString.MyParameter1}”.We can change the “Myparameter1” name to anything, any name we can give.

I have changed the “Myparameter1″ name to title.

To display the more field in the content search web part, go to the prooperty mapping filed and add the fields in the text box.

Copy and paste the below url in the browser.

“https://onlysharepoint.com/sites/oursites/Pages/page name.aspx?title=DoorKnob”

We can able to see all details(ProductName and ProductDetails) about the item whose title value is “DoorKnob”.

We can add more query string parameter also. In the property filter I have selected the “RefineableString00” which is the managed property which is mapped with the “ProductName”. Click on the “Add Property flter” automatically the query string will be added in the “Query Text”. Change the “Myparameter2” name to “PN”.

Here I am using the and condition when both the condition will satisfy then the only item will show. The condition is (Title:{QueryString.title})(RefinableString00.{QueryString.PN}) which I have put in the “Query text”.

See I have written two condition with and so the output is coming. If I will only add the title value then the out put will not show.

So for that, we can use the or condition. If one condition is true then also item will display. I have added (Title:{QueryString.title}) OR (RefinableString00:{QueryString.PN}) in the “Query text”.

I have added only title field value then also item is displaying.

You may like following SharePoint search tutorials:

You may like following SharePoint search tutorials:

• Content Search web part in SharePoint Online
• SharePoint Online Refinement Web Part
• SharePoint Online search result web part display documents created or modified by the current user
• SharePoint Online customize search box web part
• SharePoint search managed properties
• Difference between classic search experience and modern search experience in SharePoint Online Office 365
• Documents are not showing up in Search Results in SharePoint 2013
• How to Call SharePoint Search using REST API
• Create a result source and use custom result source in content search web part in SharePoint online Office 365
• Change Search Center URL using JavaScript in SharePoint Online
• the list is too large to save as a template SharePoint 2013

In the SharePoint article, we were discussed how to display the SharePoint online list items on the web part page using the content search web part. How to display more than one column in the “Content Search” Web part using the content search web part property mapping option.

We were also see how to filter the item from the list using the query string in the web part page using the SharePoint online content search web part.