Ad

React + SPFx I Get My Empty List And Only Get The Items By Manipulating Them

- 1 answer

I'm creating a Sharepoint list viewer with filtering and search. When the WebPart loads the list appears empty and only shows the items when I do a search or filter. When I delete the search or filter all the items appear. How can I show all items from the beginning?

initial state

after typing "a" (as an example)

child class code:

export class MisContactos extends React.Component<any, any>{

  private _selection: Selection;

  constructor(props: {}) {

    super(props);
    
    var misItems = this.props._items;
    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'ID',
        fieldName: 'ID',
        minWidth: 50,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column2',
        name: 'Name',
        fieldName: 'Title',
        minWidth: 110,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column3',
        name: 'Nachname',
        fieldName: 'Nachname',
        minWidth: 110,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column4',
        name: 'Firmen',
        fieldName: 'Company',
        minWidth: 110,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column5',
        name: 'Email',
        fieldName: 'Email',
        minWidth: 150,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column6',
        name: 'Land',
        fieldName: 'Land',
        minWidth: 100,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      },
      {
        key: 'column7',
        name: 'Abteilung',
        fieldName: 'Abteilung',
        minWidth: 100,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        isSorted: true,
        isSortedDescending: false,
        sortAscendingAriaLabel: 'Sorted A to Z',
        sortDescendingAriaLabel: 'Sorted Z to A',
        onColumnClick: this._onColumnClick,
        data: 'string',
        isPadded: true
      }
    ];

    this._selection = new Selection({
      onSelectionChanged: () => {
        this.setState({
          selectionDetails: this._getSelectionDetails()
        });
      }
    });

    this.state = {
      items: misItems,
      columns: columns,
      selectionDetails: this._getSelectionDetails(),
      isModalSelection: false,
      isCompactMode: false      
    };

  } 

  public render() {

    var { columns, isCompactMode, items, selectionDetails, isModalSelection, paises } = this.state;

    return (<Fabric>
      <div className={classNames.controlWrapper}>
        <Toggle
          label="Enable compact mode"
          checked={isCompactMode}
          onChange={this._onChangeCompactMode}
          onText="Compact"
          offText="Normal"
          styles={controlStyles}
        />
        <Stack>
          
          <Checkbox
            label="Spanien"
            value="Spanien"
            styles={controlStyles}
            onChange={ e => {this._onSpanien} }
            defaultChecked = {false}
          />
          <Checkbox 
            label="Deutschland"
            styles={controlStyles}
            onChange={this._onDeutschland}
            defaultChecked = {false}
          />
        </Stack>

        <Toggle
          label="Toogle"
          checked={isModalSelection}          
          onText="Modal"
          offText="Normal"
          styles={controlStyles}
        />
        
        <TextField label="Filter by name" onChange={this._onChangeText} styles={controlStyles} />
      </div>
      <div className={classNames.selectionDetails}>{selectionDetails}</div>
      <MarqueeSelection selection={this._selection}>
        <DetailsList
          items={items}
          compact={isCompactMode}
          columns={columns}
          selectionMode={isModalSelection ? SelectionMode.multiple : SelectionMode.none}
          
          setKey="set"
          layoutMode={DetailsListLayoutMode.justified}
          isHeaderVisible={true}
          selection={this._selection}
          selectionPreservedOnEmptyClick={true}
          onItemInvoked={this._onItemInvoked}
          enterModalSelectionOnTouch={true}
          ariaLabelForSelectionColumn="Toggle selection"
          ariaLabelForSelectAllCheckbox="Toggle selection for all items"
          checkButtonAriaLabel="Row checkbox"
        />
      </MarqueeSelection>
    </Fabric>
    );
  } 
  
  
  public componentDidUpdate(previousProps: any, previousState: IDetailsListDocumentsState) {
    if (previousState.isModalSelection !== this.state.isModalSelection && !this.state.isModalSelection) {
      this._selection.setAllSelected(false);
    }
  }  

  
  private _onChangeText = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => {
    var misItems2: IlistContactosItems[];
    misItems2 = JSON.parse(JSON.stringify(this.props._items));
    console.log("pasa por onChangeText");

    this.setState({
      items: text ? misItems2.filter(i => i.Title.toLowerCase().indexOf(text) > -1) : misItems2
    });
  }  
  
}

export default MisContactos

and the father class code:

export default class AaReact1 extends React.Component<IAaReact1Props, any> {

  constructor(props: IAaReact1Props, any) {
    super(props);

    this.state = {
      links: []
    };
  }
  public componentDidMount() {
    this.getContactosListData();
  }

  public render(): React.ReactElement<IAaReact1Props> {
    console.log("render");
    return (
      <div className={styles.aaReact1}>
        <MisContactos header={this.props.description} _items={this.state.links} />
      </div>
    );
  }
  private getContactosListData(): Promise<any> {
    return this.props.spClientContext.get("https://Mock.sharepoint.com/sites/yo/_api/web/lists/getbytitle('Kontakte')/items?Odata=minimal",
      SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        return response.json();
      }).then(data => {
        data=JSON.parse(JSON.stringify(data));
        this.setState({ links: data.value });

      });
  }

}

Thank you for your time and help.

Ad

Answer

I've solved this and I'm going to post my solution in case someone encounters the same problem and this can help them.

I've added a load component as a transition element. This element remains in the foreground while loading items from the Sharepoint list.

export default class AaReact1 extends React.Component<IAaReact1Props, any> {
  constructor(props: IAaReact1Props, any) {
    super(props);

    this.state = {
      links: [],
      loading: true
    };
  } 
  public render(): React.ReactElement<IAaReact1Props> {
    console.log("render padre");
    if (this.state.loading) {
      this.getContactosListData();
      return(<Loading />)
    }else{
    return (
      <div className={styles.aaReact1}>
        <MisContactos header={this.props.description} _items={this.state.links} />
      </div>
    );
  }}
  
  private getContactosListData(): Promise<any> {
    return this.props.spClientContext.get("https://Mock.sharepoint.com/sites/yo/_api/web/lists/getbytitle('Kontakte')/items?Odata=minimal&$top=5000",
      SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        return response.json();
      }).then(data => {
        data = JSON.parse(JSON.stringify(data));
        this.setState({ links: data.value, loading:false });
      });
  }
}

Ad
source: stackoverflow.com
Ad