How can we help you today?

How to Create a Page to Display a SharePoint List Item

The ShortPoint Connect feature is used to connect to a group of items in the SharePoint list or library and display it on the SharePoint page. 


In this article we will show you how to create a page to display a single SharePoint list item. This solution will make it possible to display different content on the same page based on the existing list item. The content will depend on the query string parameter in the URL. 


Using this solution, you will be able to retrieve specific information from a SharePoint list/library to show it in a visually appealing design by ShortPoint. For example, you can show the data from the description column of your Announcements list:



This is how it may look like on the page:



By changing the ID value of the announcement item in the query string of the page URL, you will see the details of different announcements, while still being on the same page:



It is possible to achieve this result using the REST API connection type. Please follow the steps below.


TABLE OF CONTENTS


Step 1: Configure the SharePoint list/library view 


1.1. Add ID column to a SharePoint list/library view


To make this solution work, we need to add ID column to our SharePoint list/library view.


  • Modern experience

Navigate to the SharePoint list/library view you are going to connect to.


Click Add column button and choose Show/hide columns from the drop-down:



Put a check mark near the ID column and click Apply, as shown in the animation below:




  • Classic experience


Navigate to the SharePoint list/library view you are going to connect to.

In the Ribbon, select the List or Library tab.



Select Modify View option in the Manage Views group.



In the Columns section check the box under the Display heading next to the ID column. 



Scroll down, and click OK to save the changes.



1.2. Get the SharePoint list/library ID


We will need SharePoint list/library ID for the REST API URL in the Step 2.3.


  • Modern experience


Navigate to the SharePoint list/library view you are going to connect to.

Click the cog wheel to open Settings.


Choose List/library settings from the options.



  • Classic experience

Navigate to the SharePoint list/library view you are going to connect to.


In the Ribbon, select the List or Library tab.



Select List/Library Settings option in the Settings group.



List/Library settings page will open. You will find the list/library ID in the URL end of this page, between List=%7B and %7D parameters:



Copy it to the notepad or any other text editor.


Step 2: Prepare a SharePoint page that will store data


2.1. Create a new page


Click the cog wheel to open Settings

Choose Add a page from the options. 



A new page will be created. Add a name to it, save it and/or continue to the next step.


2.2. Add a ShortPoint Design Element


  • Before adding the Design Element to your page


You will need to add the itemID value of the existing item from the SharePoint list to the page URL. It will look similar to:


https://site_url/SitePages/content-page-name.aspx?itemID=10


where https://site_url/SitePages/content-page-name.aspx will show your current page path. 

Add ?itemID=10 to the URL. The itemID value might be different from 10 - simply copy the ID of any item you have in the SharePoint list (check the Step 1.1).


In our case the page URL will look like this:

https://mycompany.sharepoint.com/SitePages/content-page.aspx?itemID=11




Note: If you are still in the page edit mode, the URL will look a bit different, as it already has one query parameter ?Mode=Edit. In such case simply add the itemID parameter using the &, like this: 

 https://site_url/SitePages/content-page-name.aspx?Mode=Edit&itemID=10

In this example we are using Text Design Element to store the data from the SharePoint list/library column. You may use any other Design Element.



Please, check these solution articles on how to add ShortPoint Design Elements to the page:


2.3. Connect REST API to the created Design Element


  • Set up the connection


Switch to Connect tab. Choose REST API connection type.



Now you need to prepare REST API URL.

Copy this URL:


https://site_url/_api/web/lists/getbyid('listID')/Items


Modify it. Substitute the following:

  • site_url with your SharePoint site URL
  • listID with your SharePoint list ID, that we obtained in Step 1.2.


In our case the REST API URL will look like this:


https://mycompany.sharepoint.com/_api/web/lists/getbyid('725d089s-053b-45b6-878f-764fe1685035')/Items

where

  • mycompany.sharepoint.com is our SharePoint site URL;
  • 725d089s-053b-45b6-878f-764fe1685035 is our SharePoint list ID.


Paste the URL to the REST API URL field:



Click Connect, and wait for connection to load.



The connection is set up correctly if you see the data results example:



If you get any errors while connecting or the data results are empty, please check the list/library ID in the REST API URL and connect again.


Note: Find out more about ShortPoint connection in this solution article: ShortPoint Connect: Basic Tutorial.

  • Change parameters and reconnect

Click Disconnect button.



Scroll down and Enable Advanced Settings:



Copy the following piece of code:


var search = window.location.search;
var params = new URLSearchParams(search)
var itemID = params.get('itemID');
return parameters += "?$filter=ID eq '" + itemID + "'";var search = window.location.search;var params = new URLSearchParams(search)var itemID = params.get('itemID');return parameters += "?$filter=ID eq '" + itemID + "'";var search = window.location.search;var params = new URLSearchParams(search)var itemID = params.get('itemID');return parameters += "?$filter=ID eq '" + itemID + "'";var search = window.location.search;var params = new URLSearchParams(search)var itemID = params.get('itemID');return parameters += "?$filter=ID eq '" + itemID + "'";var search = window.location.search;var params = new URLSearchParams(search)var itemID = params.get('itemID');return parameters += "?$filter=ID eq '" + itemID + "'";var search = window.location.search;var params = new URLSearchParams(search)var itemID = params.get('itemID');return parameters += "?$filter=ID eq '" + itemID + "'";
JavaScript


Paste it to the Change Parameters field.



Click Connect, and wait for connection to load.



  • Map the items


Switch to the Content tab. If using other Design Elements, instead of Content, you will have Items tab.


Click the chain icon to get the column options for mapping, and select the one you want to get the data from. 

In our case we are mapping Content field with the Description column:



Note: find out more about mapping the items in this solution article: ShortPoint Connect: Basic Tutorial.


You may switch to the Custom CSS tab to add some styling to your text. 


Note: Review our Custom CSS basic and advanced tutorials on how to style your Design Elements with custom CSS, and check Custom CSS solutions folder, where you may find some nice examples of styling.


Click Update and save your page. 



Important:

  1. If you need to edit the connection, do not forget to add the itemID to the page URL while doing that (as in the Step 2.2). Otherwise, you will not see any results.
  2. Do not restrict user access to this page as this will lead to data not displayed in the connections either.

That's it. Now you have a single page that can display different content based on the existing list item.


You can also use this created page for displaying content from a specific column, for example in a lightbox. Please continue to the Step 2 of How to Display Content from a Sharepoint List/Library Column in a Lightbox solution article.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 25 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World's best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more