4

I created a custom SPFX ListView Command Set button in the command bar which works fine. My only concern is that I don't control his order of appearance in the command bar. My goal is to be able to place it further left or further right as I desire. Also, is there any way to move or hide the microsoft build-in button(Open, Share, Flow, and so on...)?

See Image Here

0

Hello Charles Simard,

You can hide in-built button and add custom button like this,

let listDisplayName = "T3";
let listName;
export default class CreditRequestCommandSet extends BaseListViewCommandSet<ICreditRequestCommandSetProperties> {

  @override
  public onInit(): Promise<void> {
    listName = this.context.pageContext.list.title;
    //hide New button
    if (listName === listDisplayName) {
      jQuery("button[name='New']").hide();
    }
    Log.info(LOG_SOURCE, 'Initialized CreditRequestCommandSet');
    return Promise.resolve();
  }

  @override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    listName = this.context.pageContext.list.title;
    //hide New button
    if (listName === listDisplayName) {
      jQuery("button[name='New']").hide();
    }
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    compareOneCommand.visible = false;
    if (compareOneCommand) {
      if (listName === listDisplayName) {
        {
          compareOneCommand.visible = true;
        }
        compareOneCommand.visible = event.selectedRows.length === 0;
      }
      else {
        compareOneCommand.visible = false;
      }
    }
  }

  @override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        window.location.href = "www.google.com";
        break;
    }
  }
}

Output:

'New' button is hidden and custom button is visible in below output enter image description here

Regards,
Chandani Prajapati

  • Is there any way to move the "New Custom Button" next to "Quick edit" or anywhere I want? – Charles Simard Jun 27 at 14:50
  • I also have same requirement but still i didn't find way. But if i will find any way then will let you know. And if this answer is helpful to you then please mark as answer. – Chandani Prajapati Jun 28 at 4:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.