SPFX Extension ListView - nothing happens after “loading debug scripts”

Question

I've build the demo listview extension through yo @microsoft/sharepoint... after trusting the dev-cert and gulp serve I received

Do you want allow debug scripts

after confirming with yes... nothing happens :(

...
 @override
  public onRefreshCommand(event: IListViewCommandSetRefreshEventParameters): void {
    event.visible = true; // assume true by default

    if (this.properties.disabledCommandIds) {
      if (this.properties.disabledCommandIds.indexOf(event.commandId) >= 0) {
        Log.info(LOG_SOURCE, 'Hiding command ' + event.commandId);
        event.visible = false;
      }
    }
  }
...

my url parameters looks like that:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions=%7B"a5b8e4c8-9a51-4d02-b605-fd7af9af90bb":%7B"location":"ClientSideExtension.ListViewCommandSet.CommandBar"%7D%7D

the guid is already replaced with the right one in HelloWorldCommandSet.manifest.json

Answer 1

Recently, SPFx extensions have moved from preview to RC. So, this has introduced some breaking changes for extensions. MS has deprecated onRefreshCommand method and suggested that you use the onListViewUpdated method.

Reference - List view command set changes

Since, it looks like you are just beginning to start working on SPFx extensions, I would suggest that you upgrade the Microsoft/sharepoint yeoman generator to the latest one.

To, upgrade the generator, simply run the below command in the command line:

npm update -g @microsoft/generator-sharepoint@latest

After, that, run the generator again(yo@microsoft/sharepoint) and follow the steps that you currently implemented.

After you create a new extension, the method will be as below:

@override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    if (this.properties.disabledCommandIds) {
      for (const commandId of this.properties.disabledCommandIds) {
        const command: Command | undefined = this.tryGetCommand(commandId);
        if (command && command.visible) {
          Log.info(LOG_SOURCE, `Hiding command ${commandId}`);
          command.visible = false;
        }
      }
    }
  }

Works for me :)