Web 部件属性窗格如何与列表和列表视图级联

Question

我正在使用 SPFX Web 部件来获取特定列表视图下的 SP 列表项（在该特定视图中启用的所有列。

首先需要将 SP 列表放入 Web 部件属性面板（下拉菜单）中，这是在下面的代码的帮助下完成的。

  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;
      }
    );
  }

下一部分是从下拉值（选定列表）中获取所有视图。

根据上面的代码也获取 SP 列表视图。

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;
      });}

问题是下拉菜单不像级联那样工作..

1.当我从第一个下拉列表中选择列表时，特定列表/下拉列表值（标题） 需要动态传递到第二个下拉列表（API 调用）以加载特定的列表视图。 2.当第一个下拉列表加载时，所选列表视图必须加载 第二个下拉菜单无法正常工作。

请找到完整的TS文件代码。

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
                    }
                  })
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

如果我是正确的，我错过了在两个下拉列表之间进行对话/验证的代码或函数 对于级联的正常工作有什么帮助或协助吗？ 非常感谢您的回复。

Answer 1

我创建了一个示例，演示如何执行此操作，网址为 https://pnp.github.io/sp-dev-fx-webparts/?q=cascading%20dropdowns

这是执行此操作的官方 Microsoft 文章的（略有更新）版本。

我希望这有帮助？