Customization by using web components

Web components are a set of web platform APIs that can be used to create new custom, reusable, encapsulated HTML tags to use in web pages.

You can use web components to add customized components and widgets to your portal.

The high-level workflow of using web components for UI customization is as follows.

You can create web components by using TypeScript or JavaScript. If you create your component in TypeScript, you must first compile it to JavaScript for registering it with Developer Portal.

The web component can be created by extending the following example: 
export abstract class AbstractPortalElement extends HTMLElement {
    private context: ContextModel;
 
    abstract render(): void | Promise<any>;
 
    setContext(context: ContextModel) {
        this.context = context;
        this.render();
    }
 
    protected getData(): any {
        if (this.context && this.context.getData) {
            return this.context.getData();
        }
    }
 
    protected navigate(path: string): void {
        if (this.context && this.context.navigate) {
            this.context.navigate(path);
        }
    }
 
    protected getLocaleString(key: string): string {
        if (this.context && this.context.getLocaleString) {
            return this.context.getLocaleString(key);
        }
        return key;
    }
}
The methods in the class before this definition include the following methods.
Method Description 
 
    setContext(context: ContextModel) {
        this.context = context;
        this.render();
    }
 Starts this method to access the context data. 

    protected getData(): any {
        if (this.context && this.context.getData) {
        return this.context.getData();
        }
    }
 Returns the context data. 

    protected navigate(path: string): void {
        if (this.context && this.context.navigate) {
            this.context.navigate(path);
        }
    }
 Used to navigate a page. 

    protected getLocaleString(key: string): string {
        if (this.context && this.context.getLocaleString) {
            return this.context.getLocaleString(key);
        }
        return key;
    }
This method is used to retrieve the i18N key for a specified value. 

    export class ContextModel {
    getData: () => any;
    navigate: (path: string) => void;
    getLocaleString: (key: string) => string;
}
 This method registers custom-elements with component definitions.

Web components considerations

Remember the following points during web components creation.
  • Use unique element names.
  • The JavaScript file that is uploaded for a web component must be independent of other files. There cannot be any dependency between the uploaded files.
  • Element name must have a hyphen (-) based on custom element specification. For example, api-gallery-item.