0

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: 'abc@xyz.com', COUNTRY: 'IND' },
            { USERNAME: 'cdy', EMAIL: 'cdy@xyz.com', COUNTRY: 'IG' },
            { USERNAME: 'pqr', EMAIL: 'pqr@xyz.com', COUNTRY: 'IND' }
          ]
      };
      return listData;
    }) as Promise<ISPLists>;
  }
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.

  • one question I have _getMockListData function to represent data in local workbench. How to represent 'Person or Group' column there. – Vishnu S Jun 20 '18 at 10:41
  • Please refer the below link: github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/… – Ashik Paul M Jun 20 '18 at 10:58
  • Did it work? Was the link helpful? – Ashik Paul M Jun 20 '18 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 Jun 20 '18 at 12:00

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.