FDC3 Channel Context Listener

This is a utility element that listens to an FDC3 app channel for the specified context.

Use cases:

• Listen to and handle events for a specified context on an FDC3 app channel.

Examples

This will listen to the specified app channels for changes in the specified context.

Genesis

Declaration

<fdc3-context-channel-listener></fdc3-context-channel-listener>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <div>Instrument message:<i>${x => x.instrumentMessage}</i></div>
        <div>Contact message:<i>${x => x.contactMessage}</i></div>
        <fdc3-context-channel-listener
            :config="${(x) => [
                {
                    channelName: 'customChannel',
                    channelType: 'fdc3.instrument',
                    callback: (message) => x.handleInstrumentMessage(message),
                },
                {
                    channelName: 'anotherCustomChannel',
                    channelType: 'fdc3.contact',
                    callback: (message) => x.handleContactMessage(message),
                },
            ]}"
        >
        </fdc3-context-channel-listener>
    `,
})
export class MyElement extends GenesisElement {

    @observable contactMessage: any = {};

    @observable instrumentMessage: any = {};

    handleContactMessage(message) {
        this.contactMessage = JSON.stringify(message);
    }

    handleInstrumentMessage(message) {
        this.instrumentMessage = JSON.stringify(message)
    }
}

React

Declaration

<fdc3-context-channel-listener></fdc3-context-channel-listener>

Usage

export function MyComponent() {
    useEffect(() => {

        const [instrumentMessage, setInstrumentMessage] = useState('');
        const [contactMessage, setContactMessage] = useState('');


        if (contextChannelListenerRef.current) {
            contextChannelListenerRef.current.config = [
                {
                    channelName: 'customChannel',
                    channelType: 'fdc3.instrument',
                    callback: (message) => setInstrumentMessage(JSON.stringify(message)),
                },
                {
                    channelName: 'anotherCustomChannel',
                    channelType: 'fdc3.contact',
                    callback: (message) => setContactMessage(JSON.stringify(message)),
                },
            ]
        }
    })
    return (
        <div>Instrument message:<i>{instrumentMessage}</i></div>
        <div>Contact message:<i>{contactMessage}</i></div>
        <fdc3-context-channel-listener ref={contextChannelListenerRef}>
        </fdc3-context-channel-listener>
    );
}

Angular

Declaration

<fdc3-context-channel-listener></fdc3-context-channel-listener>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'my-root',
    templateUrl: './my.component.html',
    template: `
        <div>Instrument message:<i>{{ instrumentMessage }}</i></div>
        <div>Contact message:<i>{{ contactMessage }}</i></div>
        <fdc3-context-channel-listener #contextChannelListenerRef>
        </fdc3-context-channel-listener>
    `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [FormsModule],
})
export class AppComponent {
    @ViewChild('contextChannelListenerRef') contextChannelListener!: ElementRef;

    instrumentMessage: any;

    contactMessage: any;

    ngAfterViewInit() {
        if (this.contextChannelListener.nativeElement) {
            this.contextChannelListener.nativeElement.config = [
                {
                    channelName: 'customChannel',
                    channelType: 'fdc3.instrument',
                    callback: (message) => this.setInstrumentMessage(JSON.stringify(message)),
                },
                {
                    channelName: 'anotherCustomChannel',
                    channelType: 'fdc3.contact',
                    callback: (message) => this.setContactMessage(JSON.stringify(message)),
                },
            ]
        }
    }

    setInstrumentMessage(message) {
        this.instrumentMessage = JSON.stringify(message);
    }

    setContactMessage(message) {
        this.contactMessage = JSON.stringify(message);
    }
}

DOM API

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

Attributes

This component has no attributes

Properties

Property	Type	Use	Example
config	AppChannelListenerConfig	An array of objects which configure which context type and a handler for channel event payloads	<fdc3-context-channel-listener :config=${() => [ { channelName: 'anotherCustomChannel', channelType: 'fdc3.contact', callback: (msg) => this.setContactMessage(JSON.stringify(msg)), }, ] }>

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.