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-interfaces";

@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!";
  }
}

Let's also add it in lwc.config.json to the same slot as hello-world so we can view it in the webclient.

[
  ...{
    "name": "lwc-limepkg-my-plugin-hello-crm",
    "slot": "object.card.head.panels"
  }
]

Conditional rendering

At the moment, our component is more or less the same as the hello-world component. To make it a bit more interesting, lets add some conditional rendering and only render our component on the company card.

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

public render() {
    if (this.context.limetype !== 'company') {
        return;
    }

    return 'Hello, CRM!';
}

Now, if we visit a company card we should se both "Hello, world!" and "Hello, CRM!" printed, but on all other cards, only "Hello, world!" is printed.

Let's make the component do something a bit more interesting than just rendering a string. Let's add a label displaying the name of the company, and a button that changes the name once it's been pressed.

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 { CurrentLimeobject } from '@limetech/lime-web-components-decorators';

export class HelloCrm implements LimeWebComponent {
    @CurrentLimeobject()
    @State()
    private company: object = {};

    ...
}

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>
    );
}

Using the Core API

Let's also add a 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.bind(this)} />
    ];
}

The handleClick method should look something like this

private async handleClick() {
    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!