FDC3 Interop.IO notifications listener

This is a utility element that pipes notifications to Interop.io notifications Use cases:

• Display notifications in the Interop.io Notifications panel

Examples

Genesis

Declaration

<rapid-interop-notification-listener></rapid-interop-notification-listener>

Usage

@customElement({
    name: 'my-element',
    template: html`
      <rapid-interop-notification-listener
        resource-name="ALL_NOTIFY_ALERT_RECORDS"
        :toastButtons="${(): ToastButton[] => [
            {
                condition: ({details}) => details.NOTIFY_SEVERITY !== 'Warning',
                action: ({details, buttonElement, toastElement}) => {
                    console.log({details, buttonElement, toastElement});
                    toastElement.close();
                },
                appearance: 'secondary-orange',
                placeholder: 'Dismiss',
            },
        ]}"
      ></rapid-interop-notification-listener>
    `,
})
export class MyElement extends GenesisElement {}

React

Declaration

<rapid-interop-notification-listener></rapid-interop-notification-listener>

Usage

export function MyComponent() {

    const interopNotificationListenerRef = useRef(null);

    if (interopNotificationListenerRef.current) {
        interopNotificationListenerRef.current.toastButtons = [
            {
                condition: ({details}) => details.NOTIFY_SEVERITY !== 'Warning',
                action: ({details, buttonElement, toastElement}) => {
                    console.log({details, buttonElement, toastElement});
                    toastElement.close();
                },
                appearance: 'secondary-orange',
                placeholder: 'Dismiss',
            },
        ]
    }

    return (
        <rapid-interop-notification-listener
            ref={interopNotificationListenerRef}
            resource-name="ALL_NOTIFY_ALERT_RECORDS"
        >
        </rapid-interop-notification-listener>
    );
}

Angular

Declaration

<rapid-interop-notification-listener></rapid-interop-notification-listener>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
    selector: 'my-root',
    template: `
        <rapid-interop-notification-listener
            #interopNotificationListenerRef
            resource-name="ALL_NOTIFY_ALERT_RECORDS"
        >
        </rapid-interop-notification-listener>
    `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
    @ViewChild('interopNotificationListenerRef') interopNotificationListener!: ElementRef;

    ngAfterViewInit() {
        if (this.interopNotificationListener.nativeElement) {
            this.interopNotificationListener.nativeElement.buttons = [
                {
                    condition: ({details}) => details.NOTIFY_SEVERITY !== 'Warning',
                    action: ({details, buttonElement, toastElement}) => {
                        console.log({details, buttonElement, toastElement});
                        toastElement.close();
                    },
                    appearance: 'secondary-orange',
                    placeholder: 'Dismiss',
                },
            ]
        }
    }
}

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
resource-name	string	The name of the server resource that pushes notifications to the client	<rapid-interop-notification-listener resource-name="ALL_NOTIFY_ALERT_RECORDS">

Properties

Property	Type	Use	Example
toastButtons	ToastButton[]	An array of configs for showing buttons. Buttons appear in notifications when the condition callback returns true. The action callback is called when the corresponding button is clicked	<rapid-interop-notification-listener :toastButtons=${() => [ { condition: ({details}) => details.NOTIFY_SEVERITY !== 'Warning', action: ({details, buttonElement, toastElement}) => { console.log({details, buttonElement, toastElement}); toastElement.close(); }, appearance: 'secondary-orange', placeholder: 'Dismiss', }, ]}>

Slots

This component has no slots.

Parts

This component has no parts.

Fired Events

This component doesn't fire any events.

Listened Events

This component doesn't listen to any events.