Doing nothing fancy, just your normal Intranet Front-Page

Got two WebComponents that display a News Carousel and Summary List

 <news extract="newsheadlines" display="carousel">
 <news extract="newssummary" display="itemtemplate:newssummary">

(and a couple of lines of code to make this all happen)

The techie stuff

So it starts with an almost empty HTML page
To get it filled:

  • Call a Pages endpoint to get the newest published News Messages
  • Since we don't get the Publishing IMAGES in that first call,
    Having to do extra calls (for each Item) to the FieldValueAsHtml endpoint to get the IMG URIs

Now the gurus say performance can be increased by Batching REST calls



  • Has SPOnline been patched, can we now get the Publishing Images URIs in the item call?
    That would elminate all those next requests

  • [Correct me if I am wrong, I have never used batching] My First REST call gets the ItemIDs of the Pages I then need to query for the Publishing IMGs
    HOW can this be done with batching?, How can a next-in-line batch command change its endpoint based on a previous endpoints result?

So all I can batch are the calls for IMG URIs

  • Something to maybe try/investigate while someone with more experience with SPFx chimes in, can you consume the RSS feed of the library or perhaps create a customized display template for a search results web part? Feb 1, 2017 at 16:12
  • Can't use Search, need (near) real-time info.. Biggest issue is that the Image URLs are not part of the Item call..but all in all SP Endpoints (whether REST or loading files) are slow. No wonder you don't see any SPFx demos with real data.. Yes SPFx is cool and fast and awesome... but pulling in content (from SharePoint, not CDNs or Video Libs) is molasses Feb 1, 2017 at 16:41
  • I did basically the exact thing you are doing a couple years ago, but it was with a data view web part not on the client, which I suppose you could still do. It was reasonably quick and is all server rendered. There are a lot of ways to slice it, I don't think a search results web part, configured to point at your news list with a custom display template is out of the realm of possibility. Feb 1, 2017 at 16:55
  • YES ServerSide pushing still performs better. The whole point is to replicate Dashboards to N clients. Using ONE SPFx webpart just to get into the page.; SharePoint is a datacontainer... becomes a headless-CMS. It is all HTML/JS files imported on the fly (but slowish coming from SP). Customers can change these WebComponents with the Monaco editor now available IN O365 Everyone can edit HTML/JS files with a decent IDE.. Its just a CEWP on steriods. If they have more skills they can add any Framework they want (apart from Angular-2). Forget React. this is playing with Legos ► WebComponents rule Feb 1, 2017 at 17:13
  • Why not use JSOM for publishing images ? Right now the limitation still exists for publishing images using REST. Feb 1, 2017 at 17:25

1 Answer 1


A little late to this, but yes there is now indeed a method to fetch PublishingFields in a single HTTP request. We needn't make a separate individual request to get the PublishingRollupImage field. So, need to batch the calls as well.

This is exposed now via the RenderListDataAsStream endpoint. We need to make a POST request and explicitly specify the fields that we require in the familiar CAML query syntax.

You can use it as in SPFx as below:

const restAPI = `${this.context.pageContext.web.absoluteUrl}/_api/web/Lists/GetByTitle('Pages')/RenderListDataAsStream`;
this.context.spHttpClient.post(restAPI, SPHttpClient.configurations.v1, {
  body: JSON.stringify({
    parameters: {
      RenderOptions: 2,      
      ViewXml: `<View>
                <FieldRef Name="Title"/>
                <FieldRef Name="ID"/>
                <FieldRef Name="Modified"/>
                <FieldRef Name="Author"/>
                <FieldRef Name="Editor"/>                
                <FieldRef Name="PublishingRollupImage"/>
.then((data: SPHttpClientResponse) => data.json())
.then((data: any) => {  
  if (data && data.Row && data.Row.length > 0) {
    console.log(data.Row); // iterate here

There is one caveat though, the data returned for PublishingRollupImage is as HTML string instead of the URL of the image, so we need to parse it from the string and then bind it to HTML.

enter image description here

You can extract the image from the string as mentioned here

Reference - Working with list items by using REST

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.