I'm new to SPFX and still trying to find my way around. At the moment I'm struggling to access particular fields from site pages using REST. I realize this is a n00b request, but any help would be apppreciated.

The current requirement is to create a simple web part that will go onto the intranet landing page. It takes a single page URL as a property, validate that the URL uses a specific custom content type, and then display the article date, content type, comments, rollup image and a 'Read more' button linking to the page from the url property.

My current approach is roughly:

export interface ISPList { 
  Id: string;
  Url: any;
  PublishingRollupImage: any;


private _getListData(): Promise<ISPLists> { 

  return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('Pages')/Items`, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {  
        return response.json(); 

This works for the most part, but doesn't include values for the rollup image or url to the page represented by a given listitem. Suggestions on accessing the fields mentioned, please?


You can make use of the new RenderListDataAsStream endpoint to get these values.

Microsoft itself uses this endpoint to get data.

It will be a POST request where you need to specify the ViewFields that you need. These will be the internal names of the columns.

Modify your code from below sample code:

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="PublishingPageContent"/>
                <FieldRef Name="PublishingRollupImage"/>
                <FieldRef Name="ArticleStartDate"/>
                <FieldRef Name="Comments"/>
  .then((response: SPHttpClientResponse) => response.json())
  .then((response: any) => {
    if (response && response.Row && response.Row.length > 0) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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