Sharepoint Framework Web Part filter list view

Carchambault
Copper Contributor
Sep 28, 2020
Sudharsan K Thank you for your reply!

Attached is my code and a screenshot of what is happening. Yes, I do believe I am missing the list ID, but have no idea where in the code it is not passing as the list information is there.

import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './CeoCornerWebPart.module.scss';
import * as strings from 'CeoCornerWebPartStrings';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';

export interface ICeoCornerWebPartProps {
  list: string;
  views: string | string[];
}
export interface ISPLists
{
  value: ISPList[];
}

export interface ISPList
{
  Title: string;
}

export default class CeoCornerWebPart extends BaseClientSideWebPart<ICeoCornerWebPartProps> {

  private _getListData(): Promise<ISPLists>
  {
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "https://hcfhawaii.sharepoint.com/sites/Hookahi5/Lists/CEOCorner/Homepage.aspx",SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) =>
       {
       return response.json();
       });
   }
   private _renderListAsync(): void
   {
    if (Environment.type == EnvironmentType.SharePoint ||
             Environment.type == EnvironmentType.ClassicSharePoint) {
     this._getListData()
       .then((response) => {
         this._renderList(response.value);
       });
}

}
   private _renderList(items: ISPList[]): void
   {
    let html: string = '<div>';
    items.forEach((item: ISPList) => {
      html += `
      <div>${item.Title}</div>
          `;
    });

    html += '</div>';

    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div id="${ styles.ceocornerheader }">
      <div id="micahpic"><img src="https://hcfhawaii.sharepoint.com/sites/workunits/PublishingImages/2020%20Homepage/Micah-Kane.png"></div><div id="ceoupdateheader-text"><h1>The CEO Corner</h1><p>The latest updates for this week from Micah.</p></div></div>
       <div id="spListContainer" />
      </div>`;

      this._renderListAsync();
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          groups: [
            {
              groupFields: [
                  PropertyFieldViewPicker('view', {
                  label: 'Select a view',
                  listId: this.properties.list,
                  selectedView: this.properties.views,
                  orderBy: PropertyFieldViewPickerOrderBy.Title,
                  disabled: false,
                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
                  properties: this.properties,
                  context: this.context,
                  onGetErrorMessage: null,
                  deferredValidationTime: 0,
                  key: 'viewPickerFieldId'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Forum Discussion

Sharepoint Framework Web Part filter list view

Resources