FDC3 System Channel Listener

FDC3 channel system listener is a utility element that listens to the FDC3 system channel (also known as a user or color channel) for the specified context.

Use cases:

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

Examples

This will listen to the system channel for changes in the specified context.

React

Declaration

<fdc3-system-channel-listener></fdc3-system-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-system-channel-listener
        :config="${(x) => [
            {
                channelType: 'fdc3.instrument',
                callback: (message) => x.handleInstrumentMessage(message),
            },
            {
                channelType: 'fdc3.contact',
                callback: (message) => x.handleContactMessage(message),
            },
        ]}"
    >
    </fdc3-system-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-system-channel-listener></fdc3-system-channel-listener>

Usage

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

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


    if (systemChannelListenerRef.current) {
        systemChannelListenerRef.current.config = [
            {
                channelType: 'fdc3.instrument',
                callback: (message) => setInstrumentMessage(JSON.stringify(message)),
            },
            {
                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-system-channel-listener ref={systemChannelListenerRef}>
    </fdc3-system-channel-listener>
);
}

Angular

Declaration

<fdc3-system-channel-listener></fdc3-system-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-system-channel-listener #systemChannelListenerRef>
        </fdc3-system-channel-listener>
    `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [FormsModule],
})
export class AppComponent {
    @ViewChild('systemChannelListenerRef') systemChannelListener!: ElementRef;

    instrumentMessage: any;

    contactMessage: any;

    ngAfterViewInit() {
        if (this.systemChannelListener.nativeElement) {
            this.systemChannelListener.nativeElement.config = [
                {
                    channelType: 'fdc3.instrument',
                    callback: (message) => this.setInstrumentMessage(JSON.stringify(message)),
                },
                {
                    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	SystemChannelListenerConfig	An array of objects that configure the context type and the handler for channel event payloads	<fdc3-system-channel-listener :config=${() => [{ channelType: 'fdc.instrument', callback: (msg) => console.log(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.