Modern SharePoint Pages were introduced in 2016. These pages allow you to quickly author pages that support different types of content that can be added using web parts.
The list of available web parts is growing and by the sounds of it, improvements and new web parts are on their way. Here is more news on this from the SharePoint Conference 2018.
One of the gaps we've found (apparently, we aren't the only ones) is that there is no equivalent to the Content Editor Web Part (CEWP) or Script Editor web part for Modern SharePoint pages. There are a couple of other options for filling this gap:
- Custom build your own SPFx web parts
- Use the React JS Script Editor available in the SP-DEV-FX-WebParts GitHub repository.
If you prefer learning via videos, here is a YouTube demonstration of how we built this solution.
A MS Flow Solution to the CEWP Gap in Modern Pages
You can use a combination of the Modern Embed Web Part and MS Flow to create web parts that expose information from across your organization quickly and easily.
The Business Case
SharePoint provides a great way of visually connecting people with information. Using SharePoint's features you can improve collaboration and enable business users.
In many of our solutions, we rollup or otherwise display business information from within SharePoint or other systems using APIs.
In this Case
We want to provide a custom listing of Active Projects in our Planning department, so that users can quickly jump into the subsite created for this project.
In this solution, we will create a Flow that returns HTML content to be rendered in SharePoint using the Modern Embed web part.
Here is a more detailed description of the solution:
- Create a Flow that is initiated by an HTTP Request
- Use MS Flow to connect to our list of Planning Projects in SharePoint
- Use Flow to Transform part of the the data returned from the SharePoint list so that it can be returned as HTML
- Provide the Flow's caller with an HTML HTTP Response
- Use a Modern SharePoint Embed webpart to make the call to Flow each time the page is loaded and present the markup that is returned to the end user.
1 - Get Started with MS Flow
If you haven't already done this, you're missing out. You'll be impressed by how intuitive this tool is and by how quickly you can build very useful solutions with this product. Login Here
We also recommend the Microsoft Flow guided learning site.
2 - Create a Flow using the HTTP Request Trigger
Start out with an HTTP Request Trigger - This means that your Flow will run whenever this endpoint is called.
IMPORTANT: After you save your Flow the HTTP GET URL is generated. You will need this later!
3 - Connect to a SharePoint List (or just about anything else)
There are a multitude of connections you can make with Flow. I suggest you have a look for yourself on the Flow page of Connectors.
In this example, I'm using Flow to hook up to SharePoint, but there are over 200 types of connections you can make with Flow.
Okay, back to our steps. We're going to add a connection to SharePoint to our Flow.
Add Action: Send an HTTP Request to SharePoint
You could also do this with the SharePoint - Get Items action. However, in this example, I've used the Send an HTTP Request to SharePoint action. You can see that this is a basic REST API call to get items. I'm querying our Projects list to get items.
4 - Prep Your Data
Here are a couple of steps I've taken to prep the data returned from SharePoint so that it can be returned by the Flow as HTML.
Add Action: Data Operations - Parse JSON
Add the Data Operations - Parse JSON action.
Important: You'll want to run the Flow once yourself and get the response from your SharePoint action and click on the Use sample payload to generate schema link.
Add Action: Data Operations Select
Add this action beneath the Parse JSON action. The Data Operations Select action allows you to select and transform specific elements from a collection to create a new collection. Here is the more specific detail from Microsoft.
You should be able to select the value element from the previous step. You can see that I've created a bit of HTML for each item that has been returned from the list of Projects.
IMPORTANT: Click on the small icon on the far right side of the screen to map a simple JSON string instead of the default key value pairing.
Also - You'll need to add double quotes around your HTML string or you will receive the error 'Enter a valid JSON'.
Add Action: Data Operations Join
The join action allows you to take multiple items from a collection and combine them into a string. In this case, we are joining the HTML strings from the previous step into a single string - separating each with a <br>. Here's more on the Data Operations Join action.
5 - Create an HTTP Response
In this step, we'll create a response for the request that triggered our Flow to begin with.
Add Action: Request Response
Our response includes CSS, HTML and the output from our Join action in the previous step.
6 - Connect to MS Flow with the SharePoint Embed Web Part
This is the last step. All we need to do now is add a Modern Embed web part to the page and use iFrame markup that points at our Flow endpoint.
Add Modern Web Part: Embed
Okay, this is the easy part.
- In a modern SharePoint page, add an Embed web part
- In the Website Address or Embed Code, add iframe HTML to connect to your Flow endpoint.
- <iframe width="100%" height="400px" src="[From Step 2]"></iframe>
- From Step 2 in this blog, you'll find instructions on getting the endpoint for your Flow HTTP Trigger.
IMPORTANT: I recommend taking some steps to secure this endpoint so that it confirms the referrer domain and / or add a token in the secure client app that is calling your Flow. You can add logic to confirm this in your Flow and handle these requests accordingly.
In completing the last step, you should be able to see the Embed Web Part connecting to your MS Flow endpoint and rendering the HTML response on the page.
Hopefully you find some use in this pattern! We think it may be a quick and easy way of exposing data from across your organization in SharePoint without custom code, third party web parts or a lot of effort.
Please post questions or comments below, we'd like to hear from you!