Lime Web Components API Documentation - v7.4.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.

    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

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

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

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

    dialogRenderer.update(dialogId, { message: 'Processing...' });

    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.

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

      class DeleteItemButton {
          private dialogId: number;

          public openConfirmation(itemId: number) {
              const dialogRenderer = platform.get(PlatformServiceName.Dialog);

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

          private deleteItem(itemId: number) {
              const http = platform.get(PlatformServiceName.Http);

              return http.delete(`items/${itemId}`);
          }
      }

    • 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

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

      // The id from `create` is the only handle on the dialog, so a component that
      // has to close it later keeps the id around.
      class TaskDetails {
          private dialogRenderer: DialogRenderer;

          private dialogId: number;

          public connectedCallback() {
              this.dialogRenderer = platform.get(PlatformServiceName.Dialog);
              this.dialogId = this.dialogRenderer.create('task-details-dialog');
          }

          public disconnectedCallback() {
              this.dialogRenderer.destroy(this.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

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

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

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

      function reportProgress(percent: number) {
          dialogRenderer.update(dialogId, {
              progress: percent,
              status: 'Processing',
          });
      }

      reportProgress(50);

    Settings

    Member Visibility

    On This Page

    Methods