When connecting ShortPoint design elements to a SharePoint list/library, users can map the Link field with the Item URL, Document Preview or other similar option to display the item/file/document details.
It is also common to use a lightbox (popup) as a Linking option in that case.
Sometimes, you might want to get not all item's details, but a single column (for instance, the description). However, once you map Link field with this column, nothing happens when you click the link.
Items mapping | Page view mode - clicking to open the link |
![]() | ![]() |
With the help of REST API connection type, we can get the list column content and display it in a lightbox:
Please, follow the steps described in the article, if you are looking for this solution.
TABLE OF CONTENTS
- Before we begin
- Prerequisites
- Step 1: Add ID column to a SharePoint list/library view
- Step 2: Get the SharePoint list/library ID
- Step 3: Prepare a SharePoint page that will store data
- Step 4: Set up the Link to get data from the columns
- Result
Before we begin
- This solution requires creating a new page, that will only store the data from a SharePoint list/library column.
Please do not restrict user access to this page as this will lead to data not displayed in the lightbox either.
- The data in a lightbox will be displayed as a page with the page header. In case you don't like the page header, you may do the following:
- Create a relevant page name (e.g., Announcement details), so the users will see it at the top, before the column details.
- Hide it for all the pages in Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder > Customize my site > General settings > Elements > All sites > Hide Header). Unfortunately, it is yet not possible to hide it only for one page.
Prerequisites
- You have a SharePoint list/library view, that has a column with data you would like to display in a lightbox.
- You have a ShortPoint design element, connected to that view.
Step 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.
Step 2: Get the SharePoint list/library ID
We will need SharePoint list/library ID for the REST API URL in the Step 4.
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 3: Prepare a SharePoint page that will store data
3.1. Create a 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.
3.2. Add a ShortPoint design element
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:
- Add Your First ShortPoint Design Element to Classic Page
- Add Your First ShortPoint Design Element to Modern Page
3.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 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.
Note: find out more about ShortPoint connection in this solution article: ShortPoint Connect: Basic Tutorial.
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.
Change parameters and reconnect
Return to the Connect tab. 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 + "'";
Paste it to the Change Parameters field.
Click Connect, and wait for connection to load.
Click Update and save your page.
Important: Please note that you will not see any changes on this page - it will be empty. However, we do not recommend adding any other elements to it - this page is needed only for storing the data from the SharePoint list/library columns.
Step 4: Set up the Link to get data from the columns
4.1. Edit the ShortPoint design element that will show the data in a lightbox
Navigate to the page where you have ShortPoint design element you wish to display data from a column in a lightbox.
In this example we are using Simple Lists design element, but you may use any other design element that has a Link field.
Important: Please, make sure that the view, to which you have connected your ShortPoint design element, has ID column in it.
Edit your page. Click the cog wheel icon to open your ShortPoint design element settings.
The Settings tab will open.
4.2. Change the Link field URL
Switch to the Items tab.
Copy the following URL:
https://page_that_stores_data_URL.aspx?itemID=#ID
Substitute https://page_that_stores_data_URL.aspx with the page URL, we have created in Step 3 to store the data.
In our example it will look like this:
https://mycompany.sharepoint.com/SitePages/Storing-data-page.aspx?itemID=#ID
where
https://mycompany.sharepoint.com/SitePages/Storing-data-page.aspx is our storing page URL.
Paste the URL to the Link field:
4.3. Save the changes
Click Update, and save the page.
Result
That's it. Now when you click to open the link, you will see the text from the column of the SharePoint list/library.
Related articles: