0

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.

1 Answer 1

1

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

enter image description here

Sign up to request clarification or add additional context in comments.

2 Comments

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
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.