Interface WebComponentRegistry

Central registry for web components with enhanced metadata.

The WebComponentRegistry provides a way to associate rich metadata with web components, making them discoverable and configurable within the Lime CRM platform. While most custom elements don't require registration, registering a component allows it to:

Appear in component selection UIs with titles and descriptions
Show a custom icon where components are picked
Be tagged for context-aware filtering and organization
Expose configuration interfaces for end-user customization

Registration is particularly useful for:

Dashboard widgets and panels
Configurable custom views
Plugin components that need discovery
Extension points with metadata-driven UIs

Components are registered by their tag name and can include metadata like title, description, icon, tags, and optional configuration UI components.

Example

import { PlatformServiceName } from '@limetech/lime-web-components';

const registry = platform.get(PlatformServiceName.WebComponentRegistry);

registry.register('sales-dashboard', {
    title: 'Sales Dashboard',
    description: 'Real-time overview of sales metrics',
    icon: 'chart-line',
    tags: ['start-page'],
});

const components = registry.getAll();

See

WebComponentMetadata for metadata structure
ConfigMetadata for inherited metadata properties

interface WebComponentRegistry {
getAll(): WebComponentMetadata[];
register(name: string, config?: Omit<WebComponentMetadata, "name">): void;
}

Index

Methods

getAll register

Methods

getAll

getAll(): WebComponentMetadata[]
Retrieves all registered web components with their metadata.

This method returns the complete list of components that have been registered with the registry, including all their metadata. This is useful for:
- Building component selection UIs
- Displaying available widgets in configuration screens
- Filtering and organizing components by tags
The returned array includes both components registered with full metadata and those registered with just a name.
Returns WebComponentMetadata[]
An array of WebComponentMetadata objects representing all registered components.
Example
```
import { PlatformServiceName } from '@limetech/lime-web-components';

const registry = platform.get(PlatformServiceName.WebComponentRegistry);

const startPageWidgets = registry
    .getAll()
    .filter((component) => component.tags?.includes('start-page'));

const salesDashboard = registry
    .getAll()
    .find((component) => component.name === 'sales-dashboard');
```
See
WebComponentMetadata

register

register(name: string, config?: Omit<WebComponentMetadata, "name">): void
Registers a web component with optional metadata.

This method associates the component tag name with metadata that can be used for discovery, display, and configuration purposes. The metadata includes human-readable information like title and description, as well as organizational data like icons and tags.

Register during application setup, before any UI reads the registry. A component that registers itself when it loads can never appear in the picker used to choose it, because that picker lists components which have not been created yet.

If the same name is registered more than once, the last registration wins.
Parameters
- name: string
  The tag name of the web component (e.g., 'sales-dashboard'). Must match the actual custom element tag name.
- Optionalconfig: Omit<WebComponentMetadata, "name">
  Optional metadata configuration for the component. Includes title, description, icon, tags, and configuration UI settings. If omitted, only the component name is registered.
Returns void
Example
```
import { PlatformServiceName } from '@limetech/lime-web-components';

const registry = platform.get(PlatformServiceName.WebComponentRegistry);

registry.register('my-list-view', {
    title: 'List',
    description: 'View your items in a simple and organized list format',
    icon: { name: 'activity_feed_2' },
    tags: ['explorer-view'],
    configComponent: {
        name: 'my-list-view-configuration',
    },
});
```
See
WebComponentMetadata

Interface WebComponentRegistry

Example

See

Index

Methods

Methods

getAll

Returns WebComponentMetadata[]

Example

See

register

Parameters

Returns void

Example

See

Settings

On This Page