使用 ListView 命令集扩展动态更改命令按钮的按钮名称

Question

我正在尝试动态更改 listView 命令集中命令按钮的名称。我可以对其进行硬编码并在 manifest.json 文件中进行更改。

代替“命令一”和“命令二”，我想从列表中获取值并更改按钮的名称。

Answer 1

创建自定义列表“CommandList”并添加新列“CommandTitle”，默认Title字段存储命令键，如“COMMAND_1 ", CommandTitle 字段存储命令标题，如“Command One”。

然后在 spfx onInit 方法中获取列表项并更改默认命令标题。

示例代码：

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  Command,
  IListViewCommandSetListViewUpdatedParameters,
  IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';
import * as jQuery from 'jquery';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IListviewbarCommandSetProperties {
  // This is an example; replace with your own properties
  sampleTextOne: string;
  sampleTextTwo: string;
}

const LOG_SOURCE: string = 'ListviewbarCommandSet';

export default class ListviewbarCommandSet extends BaseListViewCommandSet<IListviewbarCommandSetProperties> {

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized ListviewbarCommandSet');
    let currentThis=this;
    jQuery.ajax({
      url: this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('CommandList')/items",
      type: "GET",
      async:false,
      headers: {
          "Accept": "application/json;odata=verbose",
      },
      success: function (data) {
        let items:any[] = data.d.results;
        items.forEach((item:any)=>{       
          const compareOneCommand: Command = currentThis.tryGetCommand(item["Title"]);          
          compareOneCommand.title=item["CommandTitle"];
        });
      },
      error: function (data) {
          //alert("Error");
      }
    });
    return Promise.resolve();
  }


  @override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {  
    // const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    // if (compareOneCommand) {
    //   // This command should be hidden unless exactly one row is selected.
    //   compareOneCommand.visible = event.selectedRows.length === 1;
    // }
  }

  @override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        Dialog.alert(`${this.properties.sampleTextOne}`);
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`);
        break;
      default:
        throw new Error('Unknown command');
    }
  }
}