Web component task-drawer

Used to embed a task card (EditCardComponent) via the iframe microfrontend (q-web-component).

Connection

<q-web-component
  [endpoint]="endpoint"
  (events)="webComponentEvents($event)"
></q-web-component>

endpoint = {
  service: 'humantaskui',
  component: 'q-bpm-human-task-list',
  route: 'web-component/task-drawer/196149707763488', // or without id to create a task
  caption: ''
};

Routing

• web-component — empty shell (DrawerShellComponent) that renders <router-outlet>.
• task-drawer — opens EditCardComponent in task creation mode.
• task-drawer/:id — opens EditCardComponent with the task loaded by id.

Events

q-web-component emits events from the iframe. Example handler:

public webComponentEvents(evt: QEventsContract<any>) {
  if (evt.name === 'qbpm.ht-web-component.task-drawer') {
    this.testDrawer.set(evt.payload.visible);
  }
}

Closing the drawer

When the drawer is closed (visible becomes false), the TaskDrawerComponent inside the iframe sends an event:

this.eventsService.customEvent({
  name: 'qbpm.ht-web-component.task-drawer',
  payload: { visible: false }
});

The parent application receives it and hides q-web-component.

For testing

Replace the route in endpoint with the required path:

• web-component/task-drawer — empty task creation form.
• web-component/task-drawer/<task-id> — editing an existing task.