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

In this guide we are going to create a new package and then within that package we'll create a web component.

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

lime-project new package

Note

If it is for a specific customer, then create a new solution

lime-project new solution

For the purposes of this tutorial however we'll be creating a new package.

Our package can be named anything, but we will stick to the default and name it Cool Package.

This will generate the package inside a folder called: limepkg-cool-package.

When creating a solution or a package, the folder and subsequent components within that solution, or package will be prefixed according to what was created.

If you generated a solution:

The prefix of the folder generated for a solution is: solution
Example Folder Name: solution-cool-solution

The prefix for a web-component generated within a solution is: lwc-solution
Example Component Tag: lwc-solution-cool-solution-hello-world

If you generated a package:

The prefix of the folder generated for a package is: limepkg
Example Folder Name: limepkg-cool-package

The prefix for a web-component generated within a package is: lwc-limepkg
Example Component Tag: lwc-limepkg-cool-package-hello-world

Read more about the difference between Solutions and Packages on the Concepts page.

Generating a web component

Enter the package directory and generate a new web component:

cd limepkg-cool-package
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.

Once our component has been generated, we can change directory to the root directory of the web components, and start our favorite editor:

cd frontend
code .

Here's our automatically generated component

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

@Component({
    tag: 'lwc-limepkg-cool-package-hello-world',
    shadow: true,
    styleUrl: 'lwc-limepkg-cool-package-hello-world.scss',
})
export class HelloWorld implements LimeWebComponent {
    /**
     * @inherit
     */
    @Prop()
    public platform: LimeWebComponentPlatform;

    /**
     * @inherit
     */
    @Prop()
    public context: LimeWebComponentContext;

    public render() {
        return (
            <limel-button
                label={'Hello World!'}
                outlined={true}
                icon={'house_stark'}
                onClick={this.handleClick}
            />
        );
    }

    private handleClick = () => {
        const notifications = this.platform.get(
            PlatformServiceName.Notification
        );
        notifications.notify('Winter is coming');
    };
}

Our hello-world component is located in src/components/lwc-limepkg-cool-package-hello-world/lwc-lime-pkg-cool-package-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.

Let's edit our component

The finished component should look something like this:

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

@Component({
    tag: "lwc-limepkg-cool-package-hello-world",
    shadow: true,
    styleUrl: 'lwc-limepkg-cool-package-hello-world.scss',
})
export class HelloWorld implements LimeWebComponent {
    /**
    * @inherit
    */
    @Prop()
    public platform: LimeWebComponentPlatform;

    /**
    * @inherit
    */
    @Prop()
    public context: LimeWebComponentContext;

    @Element()
    public element: HTMLElement;

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

Building the component

We should still be in the frontend folder. Now to build the component run the following command:

npm run build

Displaying our new component on a card

Now that we've built our component let's open up the admin and add it to a card to display it.
To make the component appear in the webclient it needs to be added to a configuration.

Lets add it to the Company card

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. Click + Web Components to add a component and enter the name of the component, i.e. lwc-limepkg-cool-package-hello-world.

The component should now be visibile and Hello World! should show on the Company card in the web client.