Add Modern News to Slider Web Part

In some cases, you may need to display a certain number of News-Posts in a more dynamic and engaging way.

With the default SharePoint’s Modern News Posts, that same dynamicity is not present, as the news will sit blandly on the page.

BindTuning Slider offers an easy and configurable way of making sure no new information is missed by your users.

In this article, we will explain how to connect SharePoint's default News-Posts to our Slider web part.

Setup your News Source

To create a new News-Post, simply navigate to a page on your Site Collection, click the New button, and select News Post. Note that any News-Post will be created under your Site Pages document library, the same directory where any other page is stored in.

To create the page, we’ve selected a Blank layout, which we’ve modified to contain the Page Title, a Short Description, and a Banner Image.

Setup your BindTuning Slider

Next, we will need to add a Slider Web Part to the page:

1. Add a BindTuning Slider Web Part;
2. Click on the pencil icon, to edit the web part;
3. Select the option Create new BT Slider List and, name your list;

   

4. After creating the list, select the option Manage Slider, found under List Settings.
5. On the form, change the List Settings, from Default Slider to Smart Slider.
6. On the Template List, connect the web part to the previously created Slider list, and save.
7. On the Source List, connect to your Site Pages document library.
8. On Filtering Options, select CAML query and add the following code:

   <View>
     <Query>
       <Where>
         <Eq>
           <FieldRef Name='PromotedState' ></FieldRef>
           <Value Type='Number'>2</Value>
         </Eq>
       </Where>
       <OrderBy>
         <FieldRef Name='FirstPublishedDate' Ascending='False' ></FieldRef>
       </OrderBy>
     </Query>
     <RowLimit>
       10
     </RowLimit>
   </View>

   

9. Proceed to save the connections; 

10. You’ll notice that the web part does not display any content, this is because we need to map the contents of the news-post to the corresponding columns on the created list. To do this:
    1. Mouse over the web part;
    2. Click on the option Create new Slide;

       

    3. Under Slider Background, change Color to Image and input {{BannerImageUrl}};
    4. Under Caption text, add the Page title by adding {{Title}};
    5. Add the news content by adding {{Description}};
    6. Make the necessary adjustments, namely the color for the caption, font color, etc.

       

    7. After performing the finishing steps, hit Publish;