Hello, Command!

This guide will show how to generate a new command, connect it to a handler, and trigger the command from a menu in the table view in the webclient.

Generate a command

The module needs the translation module to exist. In case you don't have that yet in your plugin, run this command inside your project

lime-project generate translation-module

Afterwards you can generate a new command

lime-project generate command hello

This will generate a command class and its corresponding handler.

// src/commands/hello/hello.command.ts
import { Command } from "@limetech/lime-web-components-interfaces";

@Command({
  id: "my-plugin.hello",
})
export class HelloCommand {}

// src/commands/hello/hello.handler.ts
import { CommandHandler } from "@limetech/lime-web-components-interfaces";

export class HelloHandler implements CommandHandler {
  public handle(command: HelloCommand) {}
}

Implement the handler

Our command is only going to show a notification when the command is handled, but a more common use case when it is triggered from a menu is probably to open a dialog.

To be able to show a notification when executing the command, we need to inject the notifications service in the constructor of the handler, and then use the service in the handle method when the command is executed.

import {
  CommandHandler,
  NotificationService,
} from "@limetech/lime-web-components-interfaces";

export class HelloHandler implements CommandHandler {
  constructor(private notifications: NotificationService) {}

  public handle(command: HelloCommand) {
    this.notifications.notify("Running HelloCommand!");
    console.log(command);
  }
}

Register the command

In order to run this command, we need to register it with the handler when the application starts. A good place to do this is in the Loader component that is generated together with the first web component. In the componentWillLoad lifecycle hook, we can add the code that registers our command and make it useable in the application.

// src/components/lwc-my-plugin-loader/lwc-my-plugin-loader.tsx
import {
    PlatformServiceName,
    CommandBusService
} from '@limetech/lime-web-components-interfaces';

export class Loader implements LimePluginLoader {
  private commandBus: CommandBusService;

  public componentWillLoad() {
    const notificationService = this.platform.get(
      PlatformServiceName.Notification
    );
    const helloHandler = new HelloHandler(notificationService);
    this.commandBus = this.platform.get(PlatformServiceName.CommandBus);
    this.commandBus.register(HelloCommand, helloHandler);
  }
}

Trigger the command

To trigger the command by yourself, you can simply send it to the commandbus from a component, e.g.

function onButtonClick() {
  const command = new HelloCommand();
  this.commandBus.handle(command);
}

However, in order to add it to a menu in the table view in the webclient, we need to configure the menu in the Administrators page to list our command. This is done by adding the following actions json snippet to the Table section for the desired limetypes in the View Editor.

{
  "actions": [
    {
      "id": "my_plugin.hello"
    }
  ]
}

This can also be the configuration for your own plugin and then you need to provide the corresponding menu in a web-component.