Lime Web Components API Documentation - v6.27.0
    Preparing search index...

    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.

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

    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);
    interface DialogRenderer {
        create(
            name: string,
            properties?: DialogProperties,
            listeners?: DialogListeners,
        ): number;
        destroy(id: number): void;
        update(id: number, properties?: DialogProperties): void;
    }
    Index

    Methods

    create destroy update

    Methods

    • 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.

      Parameters

      • name: string

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

      • Optionalproperties: DialogProperties

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

      • Optionallisteners: DialogListeners

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

      Returns number

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

      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)
          }
      );

    • 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.

      Parameters

      Returns void

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

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

    • 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.

      Parameters

      Returns void

      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...'
      });

    Settings

    Member Visibility

    On This Page

    Methods