Interface DialogRenderer

Service for creating and managing dialogs

The DialogRenderer enables displaying web components in dialogs, which can be modal or non-modal. It is accessed through the LimeWebComponentPlatform instance provided to components.

Dialogs are useful for:

  • User input forms
  • Confirmation prompts
  • Detail views
  • Multi-step wizards

The rendering implementation depends on the platform. Most commonly, dialogs are rendered directly on the current page. On some platforms, dialogs may be opened as separate native windows.

Emits

dialog.destroyed - When a dialog is externally destroyed (e.g., popup window closed by user), a DialogDestroyedEvent is emitted via EventDispatcher

Example

Basic usage

const dialogRenderer = platform.get(PlatformServiceNames.Dialog);

// Create a dialog
const dialogId = dialogRenderer.create('my-dialog-component', {
    title: 'Confirmation',
    message: 'Are you sure?'
});

// Update dialog properties
dialogRenderer.update(dialogId, { message: 'Processing...' });

// Close the dialog
dialogRenderer.destroy(dialogId);

Hierarchy

  • DialogRenderer

Methods

create destroy update

Methods

create

  • Create and display a new dialog

    Creates a dialog containing the specified web component. The dialog can be modal or non-modal depending on the component implementation. The rendering approach depends on the platform - most commonly as an overlay on the current page, but on some platforms as a separate native window.

    Returns

    Unique identifier for the created dialog. Use this ID with update and destroy.

    Example

    const dialogRenderer = this.platform.get(PlatformServiceNames.Dialog);
    const dialogId = dialogRenderer.create(
        'confirmation-dialog',
        { title: 'Delete Item', message: 'This cannot be undone' },
        {
            'confirm': () => this.deleteItem(),
            'cancel': () => dialogRenderer.destroy(dialogId)
        }
    );

    Parameters

    • name: string

      Tag name of the web component to render in the dialog (e.g., 'my-dialog-component')

    • Optional properties: DialogProperties

      Props to pass to the dialog component. These will be set as properties on the component instance.

    • Optional listeners: DialogListeners

      Event listeners to register on the dialog component. Keys are event names, values are handler functions.

    Returns number

destroy

  • Close and destroy a dialog

    Removes the dialog from the DOM and cleans up all associated resources and event listeners. If the dialog was rendered as a popup window, the window will be closed.

    Example

    const dialogRenderer = this.platform.get(PlatformServiceNames.Dialog);
    const dialogId = dialogRenderer.create('my-dialog');

    // Later, close the dialog
    dialogRenderer.destroy(dialogId);

    Parameters

    • id: number

      The dialog identifier returned from create

    Returns void

update

  • Update an existing dialog's properties

    Updates the properties of a dialog that was previously created. This is useful for updating dialog content based on user interactions or data changes.

    Event listeners cannot be updated and will remain as originally registered.

    Example

    const dialogRenderer = this.platform.get(PlatformServiceNames.Dialog);
    const dialogId = dialogRenderer.create('progress-dialog', {
        progress: 0,
        status: 'Starting...'
    });

    // Later, update progress
    dialogRenderer.update(dialogId, {
        progress: 50,
        status: 'Processing...'
    });

    Parameters

    • id: number

      The dialog identifier returned from create

    • Optional properties: DialogProperties

      New property values to set on the dialog component

    Returns void

Settings

Member Visibility

Theme