Hello, CRM!

While our hello-world component might be great, it does not do much to interact with the webclient. This tutorial is a continuation of the first tutorial, and aims to create a more advanced component than hello-world.

A new component

Create a new component with lime-project

lime-project generate web-component hello-crm

Just as with our first component, we can remove most of the code in src\components\lwc-limepkg-my-plugin-hello-crm\lwc-limepkg-my-plugin-hello-crm.tsx and add more as needed. To get started, our component should look like this.

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

@Component({
  tag: "lwc-limepkg-my-plugin-hello-crm",
  shadow: true,
})
export class HelloCrm implements LimeWebComponent {
  @Prop()
  public platform: LimeWebComponentPlatform;

  @Prop()
  public context: LimeWebComponentContext;

  @Element()
  public element: HTMLElement;

  public render() {
    return "Hello, CRM!";
  }
}

Configure it in the webclient

To make the component appear in the webclient it needs to be added to a configuration. In Lime Admin, go to the Views configuration and then select the Company type. In the Card section, there should be another section called Web Components. Add the component in there and enter the name of the component, i.e. lwc-limepkg-my-plugin-hello-crm.

Connecting to the state

To get the name of the company we need to define a property on our component and connect it to the state.

import { 
    LimeObject,
    SelectCurrentLimeObject,
} from '@limetech/lime-web-components';

export class HelloCrm implements LimeWebComponent {
    @SelectCurrentLimeObject()
    @State()
    private company: LimeObject;

    ...
}

This will make the company property contain the current company from the context. To render the name, we simply have to modify our render method like so:

public render() {
    ...
    return <h2>Hello, {this.company.name}!</h2>;
}

Conditional rendering

To make it a bit more interesting, we can add some conditional rendering and only render the component if a criteria is met.

To do this, lets modify our render method to check if the company is active.

public render() {
    if (!this.company.active) {
        return;
    }

    return <h2>Hello, {this.company.name}!</h2>;
}

Now, if we visit a company card where the company is inactive, we will not see our component at all, it will only render for active companies.

Let's make the component do something a bit more interesting. Let's add a button that changes the name once it's been pressed.

Using the Core API

Let's add the button to the render method that changes the name of the company once it has been pressed. To change the name, we are going to use the http service from the platform to call the Core API and change the name.

public render() {
    ...
    return [
        <h2>Hello, {this.company.name}!</h2>,
        <limel-button primary label="Click me!" onClick={this.handleClick} />
    ];
}

The handleClick method should look something like this

private handleClick = async () => {
    const http = this.platform.get(PlatformServiceName.Http);
    await http.put(`api/v1/limeobject/company/${this.context.id}/`, {
        name: `Super ${this.company.name}!`
    });
    console.log('Company name has been updated!');
};

Try it out and press the button. The name of the company is updated automatically!