FDC3 Context Channel Listener

FDC3 Channel Context Listener 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.

React

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)
    }
}

Genesis

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 that configure the context type and the 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.