Try ShortPoint nowIf you are using a modern SharePoint site and posting the news using the News Post or News Link pages, we have something interesting for you.
As you can see from the screenshot below, you can present both News Posts and News Links in ShortPoint Design Elements using the ShortPoint Connect feature:
Note: If you would like to use the above ShortPoint design, please copy the ShortPoint code below to your page:
[section color="theme-lighter-alt"][section-item][row][column 12 layout="standard"]<div>[panel panel-style="transparent" color="highlight" title="BBC%20News" icon="ion-ios-paper-outline" title-bold="true" title-size="24px"]<div>[images-list color="primary" image-size="10" image-shape="wide" title-text-size="18px" subtitle-color="border-dark"][image-list-item title="%23LinkTitle" subtitle="Created%20on%20%23Created" description="%23Description" image="%23BannerImageUrl__Url" link="%23LinkFilename" linking="lightbox" /][/images-list]</div>[/panel]</div>[/column][/row][/section-item][/section]
TABLE OF CONTENTS
- Before we begin
- Step 1. Add ShortPoint Design Element to the page
- Step 2. Connect to REST API for Organization News
- Step 3. Map the Items
- Additional: REST API Explanation and Hints
Before we begin
- This tutorial demonstrates a REST API solution. We have an easier way to display your site news and recommend you using News Connections, introduced in ShortPoint SPFx 7.3.0.xx version instead:
Please continue with this tutorial only if you are completely sure you want to use the REST API solution instead, or News Connection does not work for you for any reason.
- To use the solution described below, you need to have news posts or news links pages added to your SharePoint site.
Step 1. Add ShortPoint Design Element to the page
For the purpose of this article, we are going to use Image Lists ShortPoint Design Element however you are free to use any Design Element you like.
Go to the page where you want to show news and add Image Lists from the Page Builder grid:
Step 2. Connect to REST API for Organization News
Switch to the Connect tab and select REST API from the connection options:
In the REST API URL paste the following URL (item highlighted in red and yellow requires editing):
https://siteURL/_api/web/lists/getbytitle('Site Pages')/items?$filter=PromotedState eq 2&$select=columnName1,columnName2,columnName3&$expand=file
- siteURL - should be replaced with the SharePoint site URL, news of which you would like to display;
- columnName1,columnName2,columnName3 - should be replaced with the SharePoint list columns names, that you would like to display in the connection results. Separate the column names with a comma, no spaces in between.
For example, our REST API URL looks like this:
https://mycompany.sharepoint.com/sites/culture/_api/web/lists/getbytitle('Site Pages')/items?$filter=PromotedState eq 2&$select=LinkFilename,Modified,Created,BannerImageUrl,Description,LinkTitle&$expand=file
where:
- mycompany.sharepoint.com/sites/culture is the SharePoint site URL, news of which we would like to display;
- LinkFilename,Modified,Created,BannerImageUrl,Description,LinkTitle are the column names that we want to display in our connections results.
Then click Connect to wait for the connection to load:
After you see that the connection is set up, proceed to the next step to map the items.
Step 3. Map the Items
Switch to the Items tab:
Press the chain icon on the right of the Design Element field (for example, Title) and select which column of your News list correspond to it:
Note: Check our ShortPoint Connect: Basic Tutorial to know more about ShortPoint Connect and Items Mapping.
Here is our example of the items mapping:
You may click the Preview button to check the results:
Then, click Insert/Update and save your page:
Additional: REST API Explanation and Hints
How to find the correct column names
To check the correct column names, you can get from the REST API connection, you may open the REST API URL (https://siteURL/_api/web/lists/getbytitle('Site%20Pages')/items?$filter=PromotedState eq 2) and see them in the data results.
You can use the search option (Ctrl+F) to get the correct value of the field. For example, this is how we can find the correct name for the banner image field:
News filter in the REST API URL
You may have noticed that we are using a filter in the REST API URL: $filter=PromotedState eq 2.
This means that we are filtering the news site pages (news links and news posts). These site pages have Promoted state column with a value of 2.
Connecting to a view. Adding multiple filters
It is unfortunately not possible to connect to a specific Site Pages view. However, you can achieve this result by adding more filters directly to the REST API URL configuration.
Then the filter part in the REST API URL will look like this: $filter=(PromotedState eq 2)and(ColumnName eq 'ColumnValue').
Note: It is important to wrap the filters in the parenthesis and add and operator between them. If the value of the filtering column is a number, you do not need to put in quotation, as in the case with PromotedState eq 2.
For example, you might have news in different languages, and you have a specific column in the Site Pages, called Language that you use for filtering news.
Here is how our REST API URL might look like for filtering only Spanish news:
https://mycompany.sharepoint.com/sites/culture/_api/web/lists/getbytitle('Site Pages')/items?$filter=(PromotedState eq 2)and(Language eq 'Spanish')&$select=LinkFilename,Modified,Created,BannerImageUrl,Description,LinkTitle&$expand=file
Modifying the date and time format
By default, REST API is returning date/time columns results in ISO format. You can Enable Advanced Settings and format the dates according to your preferences:
Before | After |
 |  |
Please continue to our tutorial on How to Format Date and Time in ShortPoint REST API Connection Query Results.
That's it. Happy connecting!
Related articles:
