Dynamically change the button name of command buttons using ListView command set extension

Question

I am trying to change the the name of the command buttons in the listView Command set dynamically. I could hard code it and change it in the manifest.json file.

In place of "Command One" and "Command Two" I want to take values from list and change the name of the button.

LZ_MSFT · Answer 1 · 2020-01-02T02:05:05.630

Create a custom list "CommandList" and add new column "CommandTitle", the default Title field store the command key like "COMMAND_1", CommandTitle field store the command title like "Command One".

Then get the list items and change the default command title in spfx onInit method.

Example code:

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

Okay I understood this. But what I want is not hard coding the number of buttons. and as soon as someone adds new item in the list, a new command button should come up — Keerttik Kumar, Jan 02 '20 at 09:47
It is by design, we have to add number of buttons in xxCommandSet.manifest.json file, as a workaround, we can hide the buttons if the list not exists in onListViewUpdated method. — LZ_MSFT, Jan 03 '20 at 08:17

Dynamically change the button name of command buttons using ListView command set extension

1 Answers1