Creating a great news solution with SharePoint Online, BindTuning, and Flow – Part 1

Introduction

Creating an Intranet on SharePoint typically involves the requirement for some form of news solution. Over the years we’ve implemented many, and typically they all have something specific that requires custom development for each client.

In this post we’re going to look at creating a flexible news solution that has a great end user authoring experience courtesy of the modern pages provided by SharePoint, some magic from Microsoft Flow, and the amazing Web Parts provided by BindTuning.

We’ve implemented a similar solution recently for a client which has gone down a storm, but it had us wondering, just how far can we push this solution if we really try!

Create a News & Events subsite

News and events areas of an intranet can grow dramatically over their lifetime. As news sites may require unique permissions from the main Intranet pages, we first create a Team Site in the Intranet site collection, and call this “News and Events”. The purpose of this site is to author and display news articles and events, which are company-wide. It may also be a good place to bring together news from RSS, Yammer, as well as authored news within SharePoint.  For the purpose of this post, this will be our News and Events area for our SharePoint Content.

Creating a News Article

The new Team Site comes with a page library called Site Pages. You can create a new article by navigating to the library, and clicking “New”, then “Site Page”, or click the Site Cog, and click “Add a Page”.

An author is now able to create their article using the modern page experience. Additional feature can also be added to the using SPFX providing an even richer experience, but for now we’ve create a page using the standard parts.

Once you have completed the article,  click “Publish”.

So far, we’ve not done anything outside of the capability of standard SharePoint online. we’ve created a subsite, and an article, for most of our users this should be as complicated as it gets. Authors want to produce content, but not worry about anything else.

Enable Publishing and the BindTuning Theme

We’ve already applied our BindTuning theme to our root site. To enable the theme on the new News & Event site, we need to enable the publishing feature of SharePoint. This in turn will apply the inherited CSS stylesheet provided by the BindTuning Theme designer.

Once the feature are enabled we need to create a new home page to display the news. This is done by adding a new Welcome Page to the Pages library that has been created by enabling the publishing feature.

Create the page with a sensible title for the home page, and select one of the page layouts provided by the BindTuning theme. We’ve chosen the “SPC Header with right sidebar”.

You can now navigate to the page and click “Make Homepage from the Ribbon”

Displaying News Articles with BindTuning

To configured the BindTuning web part, we first need to create a specific list. We create a list for the BindTuning News by creating an instance of “News BT” [Site Contents -> New -> App – News BT]. We imaginatively called our new list “NewsList”, and this will hold the links to the articles and the information to render the news in the BindTuning web part.

Now we go back to the new home page and add the BindTuning News web part to a web part zone.

Configure the BindTuning New web part to link to the “NewsList” and in the layout group set the Click Action to “Open Article Site” and Open Site “in Modal”

Save the settings and the web part should now state the list is empty. Click on the + next to the web part to open the BindTuning dialogue to add a new news article.

It’s a little fiddly at this point to configure all the properties, with lots of looking up URL’s for the page and images, but keep with us, we’ll soon have it all automated!

The result of this work, is a news web part that looks like this:

When the article is clicked, it’s shown in a modal, but with the articles outer page removed. This produces a clean display of the article without leaving the page.

`

As an added bonus, with the BindTuning Theme, Web Parts, and SharePoint’s modern pages all in use, the site is still responsive and looks great, even on a mobile.

After adding a few more news articles, configuring a slider, and adding a calendar web part, the page starts to look something like a news page.

What Next

In the next post of this series, we’ll look at how we can use Microsoft Flow to automate the creation of the link items in the BindTuning News web part list. This will give us a solution where a news author can create an article, publish it, and it appears on the News homepage.