1

I am trying to Get data from a Custom List & show it as a table using SPFX.
By Refering this Link, displayed Single line of text type columns.
But when trying to display Person or Group, particular column values are undefined in table in the Webpart.
I tried to change the column type from string to object in the ListModel, but no change in the result.

export interface ISPList {
  USERNAME: string;
  EMAIL: string;
  COUNTRY: string;
  USERROLE:Object;  //People and Groups type column
}

How can I retrieve & display Person or Group,Lookup these type of columns.
Thank you

Edit

By referring ashik answer, now my listmodel look like this,

export interface ISPList {
  USERNAME: string;
  EMAIL: string;
  COUNTRY: string;
  USERROLE:{
    Title:string
  }
}

and _renderList function is,

 private _renderList(items: ISPList[]): void {
    debugger;
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    html += `<th>UserName</th><th>Email</th><th>Country</th><th>UserRole Title</th>`;
    items.forEach((item: ISPList) => {
      html += `  
           <tr>  
          <td>${item.USERNAME}</td>  
          <td>${item.EMAIL}</td>  
          <td>${item.COUNTRY}</td>
          <td>${item.USERROLE[0].Title}</td> 
          </tr>  
          `;
    });
    html += `</table>`;
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

But, how can I add 'Person or Group' field to my _getMockListData function which is like below,

  private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
      const listData: ISPLists = {
        value:
          [
            { USERNAME: 'abc', EMAIL: '[email protected]', COUNTRY: 'IND' },
            { USERNAME: 'cdy', EMAIL: '[email protected]', COUNTRY: 'IG' },
            { USERNAME: 'pqr', EMAIL: '[email protected]', COUNTRY: 'IND' }
          ]
      };
      return listData;
    }) as Promise<ISPLists>;
  }

1 Answer 1

1

In the rest api url you should mention the people field in expand section

Eg:

private getPeopleFieldValues() : any {  
    return this.context.spHttpClient
      .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('ListName')/items?$select=*,PeopleFieldName/Title,PeopleFieldName/EMail&$expand=PeopleFieldName`},
      SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse)=>{                   
          return response.json();
      });
  }

Now place the output in the console.log and find the path required to show the names of the people field values.

Hope it helps.

4
  • one question I have _getMockListData function to represent data in local workbench. How to represent 'Person or Group' column there.
    – Vishnu S
    Commented Jun 20, 2018 at 10:41
  • Please refer the below link: github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/…
    – Ashik Paul
    Commented Jun 20, 2018 at 10:58
  • Did it work? Was the link helpful?
    – Ashik Paul
    Commented Jun 20, 2018 at 11:42
  • Sorry, I was busy with another work. The above link, they are only displaying title field. I am checking the samples. Thanks any way
    – Vishnu S
    Commented Jun 20, 2018 at 12:00

Your Answer

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

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