FDC3 Openfin Notifications Listener

FDC3 Openfin notifications listener is a utility element that pipes notifications to Openfin notifications.

Use cases:

• Display notifications in the Openfin Notifications panel

Examples

React

Declaration

<openfin-notification-listener></openfin-notification-listener>

Usage

@customElement({
    name: 'my-element',
    template: html`
      <openfin-notification-listener
        resource-name="ALL_NOTIFY_ALERT_RECORDS",
        :notificationsPlatform="${() => ({
            id: 'your-platform-id',
            icon: 'http://url-to-your-icon.png',
            title: 'your platform title'
        })}"
        :toastButtons="${(): OpenfinToastButton[] => [
            {
                task: 'warning-button',
                condition: ({details}) => details.NOTIFY_SEVERITY !== 'Warning',
                action: ({details, buttonElement, toastElement}) => {
                    console.log({details, buttonElement, toastElement});
                    toastElement.close();
                },
                appearance: 'secondary-orange',
                placeholder: 'Dismiss',
            },
        ]}"
        ></openfin-notification-listener>
      `,
})
export class MyElement extends GenesisElement {}

Genesis

Declaration

<openfin-notification-listener></openfin-notification-listener>

Usage

export function MyComponent() {

    const interopNotificationListenerRef = useRef(null);

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

        interopNotificationListenerRef.current.notificationsPlatform = {
            id: 'your-platform-id',
            icon: 'http://url-to-your-icon.png',
            title: 'your platform title'
        }
    }
    return (
        <openfin-notification-listener
            ref={interopNotificationListenerRef}
             resource-name="ALL_NOTIFY_ALERT_RECORDS"
        >
        </openfin-notification-listener>
    );
}

Angular

Declaration

<openfin-notification-listener></openfin-notification-listener>

Usage

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

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

            this.interopNotificationListener.nativeElement.notificationsPlatform = {
                id: 'your-platform-id',
                icon: 'http://url-to-your-icon.png',
                title: 'your platform title'
            }
        }
    }
}

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, normally 'ALL_NOTIFY_ALERT_RECORDS'	<openfin-notification-listener resource-name="ALL_NOTIFY_ALERT_RECORDS">
toast-position	ToastPosition	Position of toast notifications on the screen. Can be top-left, top-right, bottom-left, or bottom-right	<openfin-notification-listener toast-position="top-right">

Properties

Property	Type	Use	Example
toastButtons	OpenfinToastButton[]	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	<openfin-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', }, ]}>
notificationsPlatform	NotificationsPlatform	A config object containing: id - a string, the id of your openfin application, icon - a string, the url for the icon to be displayed in the Openfin notifications panel, and title - a string, the title for of the application that is creating notifications	<openfin-notification-listener :notificationsPlatform="${() => ({ id: 'your-platform-id', icon: 'http://url-to-your-icon.png', title: 'your platform title' })}">

warning

This API is in beta and is likely to change in the future.

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.