Hello, world!

This guide aims to provide a basic setup, create a simple web component and display it on the object card.

Creating a solution or package

To get started, run lime-project to create a new solution (if it is for a specific customer)

lime-project new solution

Or create a package (if it isn't for a specific customer)

lime-project new package

It can be named anything, but in this guide we are sticking to the default and naming it My Plugin.

Read more about the difference between Solutions and Packages at Lime CRM Platform Documentation

Generating a web component

Enter the plugin directory and generate a new web component:

cd my-plugin
lime-project generate web-component hello-world

When the first component is created, some project setup is needed which might take a while to complete.

Rendering the component

Once the setup is complete, we can change directory to the root directory of the web components, and start our favorite editor.

cd frontend
code .

Our hello-world component is located in src/components/lwc-my-plugin-hello-world/lwc-my-plugin-hello-world.tsx. The file contains a lot of auto generated code that is useful, but not required for our simple hello-world component. We can remove most of it, but we have to keep the properties that belong to the LimeWebComponent interface, along with the render method.

The finished component should look something like this:

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

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

  @Prop()
  public context: LimeWebComponentContext;

  @Element()
  public element: HTMLElement;

  public render() {
    return <p>Hello, world!</p>;
  }
}

Building the component

To build the component, execute the following from the console.

npm run build