0

I have created SPFX webpart with react framework. I successfully get data from SharePoint pnp bu in react data is not loaded. When I resize browser window then data displayed successfully. Please see code below that I tried but not working.

/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import {
  CheckboxVisibility,
  DetailsList,
  DetailsListLayoutMode,
  IColumn,ConstrainMode

} from 'office-ui-fabric-react/lib/DetailsList';
import { Link } from 'office-ui-fabric-react/lib/Link'
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import pnp from "sp-pnp-js";
import { Web } from "sp-pnp-js";
import { Item, Items } from 'sp-pnp-js/lib/sharepoint/items';


let _items: {
  key: number,
  name: string,
  value: number,
  Title : string,
  Id :number,
  Category :string,
  Subcategory :string,
  description :string,
  Status :string,
  CreatedBy :string,
  CreatedDate :string,
  Approvers :string,
  ApproveRejectedBy :string,
  ApproverComment :string,
  ApproveRejectedDate :string,
   ViewLink :string,
}[] = [];

let _columns = [

  {
    key: 'column13',
    name: 'View Link',
    fieldName: 'ViewLink', 
    minWidth: 50,
    maxWidth: 60,
    isResizable: true,  
    onRender : item =>(
      <Link data-selection-invoke={ true } href={item.ViewLink }>
     View
      </Link>
    )
  },
  {
    key: 'column2',
    name: 'ID',
    fieldName: 'Id',
    minWidth: 25,
    maxWidth: 40,
    isResizable: true
  },
  {
    key: 'column1',
    name: 'Title',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column3',
    name: 'Category',
    fieldName: 'Category',
    minWidth: 70,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'column4',
    name: 'Sub Category',
    fieldName: 'Subcategory',
    minWidth: 70,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'column5',
    name: 'Description',
    fieldName: 'description',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column6',
    name: 'Status',
    fieldName: 'Status',
    minWidth: 70,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'column7',
    name: 'Created By',
    fieldName: 'CreatedBy',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column8',
    name: 'Created Date',
    fieldName: 'CreatedDate',
    minWidth: 70,
    maxWidth: 100,
    isResizable: true,
  },
  {
    key: 'column9',
    name: 'Approvers',
    fieldName: 'Approvers',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column10',
    name: 'Approve/Rejected By',
    fieldName: 'ApproveRejectedBy',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column11',
    name: 'Approver Comment',
    fieldName: 'ApproverComment',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column12',
    name: 'Approve/Rejected Date',
    fieldName: 'ApproveRejectedDate',
    minWidth: 70,
    maxWidth: 100,
    isResizable: true
  },  
];
export default class AllItemsView extends React.Component<{},{items: {}[];}> 
{
  private _selection: Selection;
  constructor(props: {}) {
    super(props);  

  pnp.sp.web.lists.getByTitle('list').items.orderBy('ID', false).get().then(
    response => {
      response.map(item =>{
        _items.push({
          key: item.ID,
          name: item.Title,
          value:  item.ID,
          Title : item.Title,
          Id :item.ID,
          Category :item.Category,
          Subcategory :item.Sub_x0020_Category,
          description :item.Feedback_x0020_Description,
          Status :item.Status,
          CreatedBy :item.CreatedByDisplay,
          CreatedDate :(item.Created) ?new Date(item.Created).toLocaleDateString("en-GB") :'',
          Approvers :item.ApproversDispay,
          ApproveRejectedBy :item.ApprovedByDisplay,
          ApproverComment :item.Approver_x0020_Comments,
          ApproveRejectedDate : (item.ApproveRejectedDate) ? new Date(item.ApproveRejectedDate).toLocaleDateString("en-GB"): '',
          ViewLink :"[siteURL]/ViewRequestAllFields.aspx?ApproverId=" + item.ID
        })
      })
    }
  )    
  this.state = {
    items: _items
  };    
  }
  public render() {

    let { items } = this.state;

    console.log();
    return (
      <div style = {{wordWrap : 'true'}}>
          <DetailsList
            constrainMode = {ConstrainMode.horizontalConstrained}
            items={ items }
            columns={ _columns }         
            layoutMode={ DetailsListLayoutMode.fixedColumns }          
            onItemInvoked={ this._onItemInvoked }
            checkboxVisibility ={CheckboxVisibility.hidden}  
          />        
      </div>      
    );
  }
  private _onItemInvoked(item: any): void {
    window.location.href = item.ViewLink;
  }
}
1

Use componentDidMount

private _selection: Selection;
  constructor(props: {}) {
    super(props);  

     this.state = {
        items: _items
      };    
  }

  componentDidMount() {
      pnp.sp.web.lists.getByTitle('list').items.orderBy('ID', false).get().then(
        let _items = [];
        response => {
          response.map(item =>{
            _items.push({
              key: item.ID,
              name: item.Title,
              value:  item.ID,
              Title : item.Title,
              Id :item.ID,
              Category :item.Category,
              Subcategory :item.Sub_x0020_Category,
              description :item.Feedback_x0020_Description,
              Status :item.Status,
              CreatedBy :item.CreatedByDisplay,
              CreatedDate :(item.Created) ?new Date(item.Created).toLocaleDateString("en-GB") :'',
              Approvers :item.ApproversDispay,
              ApproveRejectedBy :item.ApprovedByDisplay,
              ApproverComment :item.Approver_x0020_Comments,
              ApproveRejectedDate : (item.ApproveRejectedDate) ? new Date(item.ApproveRejectedDate).toLocaleDateString("en-GB"): '',
              ViewLink :"https://bajajelect.sharepoint.com/teams/ConnectApp/SitePages/ViewRequestAllFields.aspx?ApproverId=" + item.ID
            })
          });
          this.setState({items:_items});
        }
      ) 


  }

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.