Hello, Event!

This guide illustrates how to replace the dialog when creating a new Limeobject with a custom one.

Generate a new component

First, we need to generate a new web component with lime-project that will hold the new dialog we want to be displayed instead of the original one.

lime-project generate web-component custom-dialog

The custom dialog will require some new functionality to replace the one in the default dialog. However, this is out of scope for this guide and we will only render a message. Feel free to add something more interesting!

import {
  LimeWebComponent,
  LimeWebComponentContext,
  LimeWebComponentPlatform,
} from "@limetech/lime-web-components-interfaces";
import { Component, h, Prop } from "@stencil/core";

@Component({
  tag: "lwc-my-plugin-custom-dialog",
  shadow: true,
})
export class CustomDialog implements LimeWebComponent {
  @Prop()
  public platform: LimeWebComponentPlatform;

  @Prop()
  public context: LimeWebComponentContext;

  public render() {
    return (
      <limel-dialog open={true} onClose={this.handleClose}>
        <h1>My custom dialog!</h1>
      </limel-dialog>
    );
  }

  private handleClose() {}
}

Listen for command events

To prevent the default dialog from appearing when a new Limeobject is created, we need to listen for the command.received event and check if it is a CreateLimeobjectDialogCommand that is being handled. This should be done in the loader component that is generated automatically.

import { CreateLimeobjectDialogCommand } from "@limetech/lime-web-components-commands";
import {
  CommandEvent,
  LimePluginLoader,
  LimeWebComponentContext,
  LimeWebComponentPlatform,
  PlatformServiceName,
} from "@limetech/lime-web-components-interfaces";
import { Component, Prop } from "@stencil/core";

@Component({
  tag: "lwc-my-plugin-loader",
  shadow: true,
})
export class Loader implements LimePluginLoader {
  @Prop()
  public platform: LimeWebComponentPlatform;

  @Prop()
  public context: LimeWebComponentContext;

  public constructor() {
    this.handleCommandReceived = this.handleCommandReceived.bind(this);
  }

  public componentWillLoad() {
    const eventDispatcher = this.platform.get(
      PlatformServiceName.EventDispatcher
    );
    eventDispatcher.addListener(
      CommandEvent.Received,
      this.handleCommandReceived
    );
  }

  public componentDidUnload() {
    // tslint:disable-line:no-empty
  }

  private handleCommandReceived(event: CustomEvent) {}
}

Now, handleCommandReceived will be invoked each time a command is being handled by the commandbus. We should now check for the command we are interested in, prevent the default action from happening and instead display the custom dialog. We can also add other checks, maybe we only want to handle a specific limetype.

private handleCommandReceived(event: CustomEvent) {
    const command = event.detail.command;
    if (getCommandId(command) !== getCommandId(CreateLimeobjectDialogCommand)) {
        return;
    }

    if (command.limetype.name !== 'deal') {
        return;
    }

    event.preventDefault();
    const dialogService = this.platform.get(PlatformServiceName.Dialog);
    dialogService.create('lwc-my-plugin-custom-dialog');
}

getCommandId can be imported from @limetech/lime-web-components-interfaces.

Now we have successfully added a custom dialog that will be displayed instead of the default one every time a new deal is created!

Trigger the original command

Another use case might be to display our custom dialog, and after that display the original populated with some data gathered from our first one. To do this, we need to dispatch the original command again but also add a flag to it so we know not to interrupt it once it reaches our event handler.

private handleCommandReceived(event: CustomEvent) {
    ...
    // Check if our custom flag has been set, if so don't do anything
    if (command['_useOriginalHandler']) {
        return;
    }

    // Set our custom flag so we don't handle this command again
    command['_useOriginalHandler'] = true;

    event.preventDefault();
    const dialogService = this.platform.get(PlatformServiceName.Dialog);
    dialogService.create('lwc-my-plugin-custom-dialog', { command });
}

And in our dialog component, we can dispatch it once again

import { CreateLimeobjectDialogCommand } from '@limetech/lime-web-components-commands';
import {
    LimeWebComponent,
    LimeWebComponentContext,
    LimeWebComponentPlatform,
    PlatformServiceName,
} from '@limetech/lime-web-components-interfaces';

…

export class CustomDialog implements LimeWebComponent {
    @Prop()
    public command: CreateLimeobjectDialogCommand;

    …

    public constructor() {
        this.handleClose = this.handleClose.bind(this);
    }

    …

    private handleClose() {
        // Add custom data to display in the original dialog
        this.command.limeobject = {
            name: 'The one big deal!'
        };

        // Handle the original command again
        const commandBus = this.platform.get(PlatformServiceName.CommandBus);
        commandBus.handle(this.command);
    }
}

Now the custom dialog will be displayed everytime a new deal is created, and when the dialog closes it will open the original one instead, but populated with our custom data!