Developing LitElement Widgets

This section describes how you can use LitElement framework to develop your widgets.

Creating the Project#

About this task#

You can create a LitElement Web Component widget. The following instruction provides an example of creating a demoComp.js widget.

Procedure#

Create an empty project folder with an empty demoComp.js file inside.
From the project folder, run the following command in your terminal ⁄ console:

npm init

Follow the commands and enter the details when prompted. In this step you create a package.json file.
Install Lit running the following NPM command:

npm install lit-element

Add the following code to the demoComp.js project file:

import {LitElement, html, css} from 'lit-element';

Set up class name and define it as custom element:

class DemoComp extends LitElement {
    // lit element code here
}
customElements.define('demo-comp', DemoComp);

Add the script of your widget to the DemoComp class. For testing purposes, you can add the following code:

constructor() {
    super();
    this.name = "Lit sample widget";
}

static get properties() {
    return {
        name: {
            type: String
        },
    };
}

render() {
    return html `
            <head>
                <link rel='stylesheet' href='http://{{neo-location}}/neo.min.css'>
            </head>

            <div class="neo-widget__content">
                 <div class="neo-widget__header">
                      <div class="neo-widget__header-left">
                           <p>Lit Element</p>
                      </div>
                 </div>

                 <div class="neo-widget__body">
                      <div class="container">
                          <h3> <b> ${this.name} </b> </h3>
                     </div>
                 </div>
            </div>`;
}

If you want to use the Neo CSS styles, which are recommended for compatibility, specify a location to the Neo CSS file.

Next step#

When your project is ready, you must build it for later use.

Building the Project#

About this task#

You must build the project to use your widget in Avaya Workspaces.

Procedure#

In the root project folder, create a webpack.config.js file with the following contents:

const path = require('path');
module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, 'demoComp.js'),
  output: {
    library: 'demoComp',
    path: path.resolve(__dirname, 'dist'),
    filename: 'demo-comp.js',
  },
};

Add the following build script into the package.json file:

{
  "name": "demo-comp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-wc": "npm run build-wc:clean && webpack-cli",
    "build-wc:clean": "rm -rf dist && mkdir dist"
  },
  ...
}

Install the webpack CLI and the webpack itself:

npm install webpack-cli webpack

Build the project running the command that creates the dist folder with the bundled .js file for your Web Component.

npm run build-wc

Next step#

When your project is bundled and built, continue configuring the widget JSON file that you can import in the Widget Manager.