[SOLVED] how the Webpart property pane with cascade with list and list views

how the Webpart property pane with cascade with list and list views

I am working with a SPFX webpart to get SP list items under certain List view( all the columns those are enabled in that specific view.

First need to get SP lists into webpart property pan (Dropdown) which is completed with help of below peace of code.

  private async _getSiteLists(): Promise<string[]>{
    const endpoint :string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$select=Title&$filter=(Hidden eq false)&$orderby=Title`;
    const rawResponce: SPHttpClientResponse=await this.context.spHttpClient.get(endpoint, SPHttpClient.configurations.v1);
    return(await rawResponce.json()).value.map(
      (list:{Title:string})=>{
        return list.Title;
      }
    );
  }

Next part is, to get all the views from dropdown value(selected list).

as per the above code also getting the SP list views as well.

private async _getSitelistviews(): Promise<string[]>{
    //let listname:string= this.properties.SelectedList;
    const endpoint :string = this.context.pageContext.web.absoluteUrl+"/_api/web/getlistbytitle('**TestList**')/views?$select=Title";
    console.log("from view api",endpoint)
    console.log(this.properties.SelectedList);
    const rawviewResponce: SPHttpClientResponse=await this.context.spHttpClient.get(endpoint, SPHttpClient.configurations.v1);
    return(await rawviewResponce.json()).value.map(
      (listView:{Title:string})=>{
        return listView.Title;
      });}

thing is dropdowns are not working like cascade..

1.When I select the list from the first dropdown that specific list/dropdown value(title) need to pass dynamically to second dropdown(API call) to load that specific list views. 2.When the first dropdown is loaded list, then the selected list views as has to load in the second dropdown which is not working properly.

Please find the entire TS file code.

import {
  IPropertyPaneConfiguration,
  IPropertyPaneDropdownOption, PropertyPaneDropdown
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
//import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { escape } from '@microsoft/sp-lodash-subset';
//import styles from './GetListViewsWebPart.module.scss';
import * as strings from 'GetListViewsWebPartStrings';
import {SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

export interface IGetListViewsWebPartProps {
  description: string;
  SelectedList: string;
  SelectedView: string;
}

export default class GetListViewsWebPart extends BaseClientSideWebPart<IGetListViewsWebPartProps> {
  private _siteLists:string[];
  private _sitelistview:string[];

  public render(): void {
   
    this.domElement.innerHTML = `
    <div>
      <h2>Well Done, ${escape(this.context.pageContext.user.displayName)} </h2>
        <div>
        ${escape(this.properties.SelectedList)}
        ${this.properties.SelectedView}
          
        </div>
    </div>`;
  }

  protected async onInit(): Promise<void> {
    console.log('init');
    this._siteLists =await this._getSiteLists();
    this._sitelistview=await this._getSitelistviews();
    console.log('Lists:',this._siteLists);
    console.log('Views',this._sitelistview);
    
    return super.onInit();
  }

  private async _getSiteLists(): Promise<string[]>{
    const endpoint :string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$select=Title&$filter=(Hidden eq false)&$orderby=Title`;
    const rawResponce: SPHttpClientResponse=await this.context.spHttpClient.get(endpoint, SPHttpClient.configurations.v1);
    return(await rawResponce.json()).value.map(
      (list:{Title:string})=>{
        return list.Title;
      }
    );
  }

  private async _getSitelistviews(): Promise<string[]>{
    //let listname:string= this.properties.SelectedList;
    const endpoint :string = this.context.pageContext.web.absoluteUrl+"/_api/web/getlistbytitle('TestList')/views?$select=Title";
    console.log("from view api",endpoint)
    console.log(this.properties.SelectedList);
    const rawviewResponce: SPHttpClientResponse=await this.context.spHttpClient.get(endpoint, SPHttpClient.configurations.v1);
    return(await rawviewResponce.json()).value.map(
      (listView:{Title:string})=>{
        return listView.Title;
      });}

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown('SelectedList', {
                  label: 'Select List',
                  options: this._siteLists.map((list:string)=>{
                    return<IPropertyPaneDropdownOption>{
                      key:list,
                      text:list
                    }
                  })
                }),
                PropertyPaneDropdown('SelectedView',{
                  label:'Select View',
                  options: this._sitelistview.map((view:string)=>{
                    return<IPropertyPaneDropdownOption>{
                      key:view,
                      text:view
                    }
                  })
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

If I am correct I missed piece of code or function to talk/validation between two dropdowns Any help or assistance on to work the cascade properly? you reply would be really appreciated.

Solution