ServiceNow Developer's First Look at Lit.js in Employee Slate

[Raghu Ram Y]

If you have been working with ServiceNow's traditional portal widgets, the development model in Employee Slate may look quite different at first.

Employee Slate uses the AI Experience Framework (AIUX), and ServiceNow provides a Widget Builder for creating custom widgets. The new widget model uses a component-based approach, with Lit.js based Web Components forming an important part of the UI technology stack.

For ServiceNow developers who are new to Lit.js, the first question is often:

"Where do I start?"

A quick look at an AIUX widget

Looking at an actual sys_aix_widget makes the structure easier to understand.

A widget can start with imports such as:

import { html, css, nothing } from 'lit';

import { AIUXWidgetElement }
    from '@servicenow/aiux-components-core';

import { locationService, i18n }
    from '@servicenow/aiux-services';

The component is then defined as a class:

class KbViewPage extends AIUXWidgetElement {
    // properties
    // methods
    // render()
}

The UI is created through the render() method:

render() {
    return html`
        <div>
            <h3>${this.article.title}</h3>
            <button @click=${this._copyArticleLink}>
                Copy link
            </button>
        </div>
    `;
}

This introduces several concepts that may be new to developers coming from the traditional ServiceNow widget model:

• Lit templates using html
• Reactive properties
• Component classes
• Event handling such as @click
• Component lifecycle
• async / await
• AIUX services and components

Why learn this now?

The important point isn't simply to learn another JavaScript library.

Employee Slate introduces a different component-oriented development model, so understanding the fundamentals of Lit and Web Components can make it much easier to read, understand, and build AIUX widgets. ServiceNow's current Widget Builder also allows developers to manually build widgets, preview them, and inspect the underlying component and server-side code.

I'm exploring these concepts from a ServiceNow developer's perspective and will be sharing simple examples covering the fundamentals first, followed by practical AIUX widget development.

If you're also starting with Employee Slate and Lit.js, I'd be interested to hear what you're learning.