0

I have a list with several fields and want to display this information in a spfx webpart. I have managed to get a date column displaying but I'm having issues displaying a person field. I want to display the person's name and the persons image. The code gets the list items (though I will filter to one item later) and renders it to a table. Then the name of the Project Manager and Project Sponsor (Person fields) should be displayed with their images. So far, I cannot get the name to be displayed. The problem seems to be with: ${item.ProjectSponsor.FirstName}. I think it’s the wrong format or perhaps needs mapping? PNP is not being used, but prepared to add pnp if required.

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PwStatusWebPart.module.scss';
import * as strings from 'PwStatusWebPartStrings';


import * as moment from 'moment';



export interface IPwStatusWebPartProps {
  //description: string;
}


        export interface SPListItem {
          ProjectID: string;
        
          G1SchedDate: Date;
          G1StatusDate: Date;
          
          //ProjectSponsor: [FirstName: String ];
          ProjectSponsor: String;
          ProjectStatus: string;
        
        }
    
    
    export default class PwStatusWebPart extends BaseClientSideWebPart<IPwStatusWebPartProps> {
    
      private async getListData(): Promise<SPList> {
      
        const url = new URL(window.location.href);
        const proj = url.pathname;
        const projTitle = proj.slice(10, 17);
    
        const response = await this.context.spHttpClient.get("/sites/pw/_api/web/lists/GetByTitle('My Projects')/Items?$select=Id,ProjectID,G1SchedDate,G1StatusDate,ProjectSponsor/FirstName,ProjectSponsor/EMail&$expand=ProjectSponsor", SPHttpClient.configurations.v1);
    
    
        return response.json();
      }
    
    
    
      private renderList(): void {
        this.getListData()
          .then((response) => {
            console.log(response);
    
            let html: string = '<table border=0 width=100% style="border-collapse: collapse;" class = "space_status" >';
            html += '<th class = "header_status">G</th> <th class = "header_status">Scheduled Date</th><th class = "header_status">Approved Date</th>';
    
            response.value.forEach((item: SPListItem) => {
    
              html += `
              <tr >            
                <td>1</td> <td>${item.G1SchedDate ? moment(item.G1SchedDate).format('DD/MM/YY') : ""}</td> <td>${item.G1StatusDate ? moment(item.G1StatusDate).format('DD/MM/YY') : ""}</td>
              </tr>   
              </table></br/>
    
              ${item.ProjectSponsor.FirstName} // errors here
                  
                  `;
    
            });
    
    
            const listContainer: Element = this.domElement.querySelector('#spListContainer');
            listContainer.innerHTML = html;
    
          }); 
      }
    
   
    
      public render(): void {
        this.domElement.innerHTML = `
    
      <div class="${styles.pwStatus}">
      <div class="${styles.container}">
      <div id = "spListContainer"></div>
      </div></div>
        `;
    
        this.renderList();
      }

enter image description here

1
  • You don't need to check hasOwnProperty, you just need to check if (item.ProjectSponsor.FirstName) { }, that will evaluate to false if FisrtName is empty, null, or undefined. If you want to be extra safe you could do if (item.ProjectSponsor && item.ProjectSponsor.FirstName) { } Feb 18, 2022 at 14:42

1 Answer 1

1

It's a casing issue. The property on the JSON object is EMail but in your code you are asking for a property named Email.

Correction:

Sorry, I missed something in your code. The issue is with the SPListItem interface. Change it to this:

export interface SPUser {
  EMail: string;
  FirstName: string;
}

export interface SPListItem {
  ProjectID: string;
    
  G1SchedDate: Date;
  G1StatusDate: Date;
      
  //ProjectSponsor: [FirstName: String ];
  ProjectSponsor: SPUser;
  ProjectStatus: string;
}
6
  • I have tried EMail and FirstName but code does not compile error TS2339: Property 'FirstName' does not exist on type 'string'. I think its the way its been declared? Feb 18, 2022 at 8:21
  • Ah, yes. I missed your declaration of the SPListItem interface. That's where the issue is. I added a correction to my answer. Feb 18, 2022 at 9:08
  • 1
    Also, it's a standard convention that the names of interfaces begin with a capital letter I. So ISPListItem and ISPUser. It's not a huge thing but it will make it easier for other people to read your code, Feb 18, 2022 at 9:10
  • Try item.ProjectSponsor && item.ProjectSponsor.FirstName ? item.ProjectSponsor.FirstName : "". This will check to see if both item.ProjectSponsor and item.ProjectSponsor.FirstName are non-null. If they are it will display the first name, otherwise it will display an empty string. Feb 18, 2022 at 14:52
  • Thanks, sorted it out, thanks. Finally, I want the user image displayed. Any suggestions ? Feb 18, 2022 at 16:10

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.