FDC3 intent listener

This is a utility element that listens to any raised intents in FDC3 that are handled by the application.

Use cases:

• Handle intents raised against an application in an FDC3 workspace.

Examples

This handles intents raised against the application.

Compatibilty with Desktop Agent implementations

Where an app is intended to be launched in order to resolve a raised intent, the element must be present in the DOM within 15 seconds of the application launch.

This is the minimum timeout that Desktop Agents are required to provide in order to be widely compatible with Desktop Agent implementations

Genesis

Declaration

<fdc3-intent-listener></fdc3-intent-listener>

Usage

@customElement({
name: 'my-element',
template: html`
    <div>Instrument message:<i>${x => x.instrumentMessage}</i></div>
    <div>Quote message:<i>${x => x.quoteMessage}</i></div>
    <fdc3-intent-listener
        :config="${(x) => [
            {
                intent: 'ViewInstrument',
                callback: (message) => x.handleInstrumentMessage(message),
            },
            {
                intent: 'ViewQuote',
                callback: (message) => x.handleQuote(message),
            },
        ]}"
    >
    </fdc3-intent-listener>
`,
})
export class MyElement extends GenesisElement {

    @observable quoteMessage: any = {};

    @observable instrumentMessage: any = {};

    handleQuoteMessage(message) {
        this.quoteMessage = JSON.stringify(message);
    }

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

React

Declaration

<fdc3-intent-listener></fdc3-intent-listener>

Usage

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

        const [instrumentMessage, setInstrumentMessage] = useState('');
        const [quoteMessage, setQuoteMessage] = useState('');

        if (intentListenerRef.current) {
            intentListenerRef.current.config = [
                {
                    intent: 'ViewInstrument',
                    callback: (message) => setInstrumentMessage(JSON.stringify(message)),
                },
                {
                    intent: 'ViewQuote',
                    callback: (message) => setQuoteMessage(JSON.stringify(message)),
                },
            ]
        }
    });
    return (
        <div>Instrument message:<i>{instrumentMessage}</i></div>
        <div>Quote message:<i>{quoteMessage}</i></div>
        <fdc3-intent-listener ref={intentListenerRef}>
        </fdc3-intent-listener>
    );
}

Angular

Declaration

<fdc3-intent-listener></fdc3-intent-listener>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
    selector: 'my-root',
    templateUrl: './my.component.html',
    template: `
        <div>Instrument message:<i>{{ instrumentMessage }}</i></div>
        <div>Quote message:<i>{{ quoteMessage }}</i></div>
        <fdc3-intent-listener #intentListenerRef>
        </fdc3-intent-listener>
    `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
    @ViewChild('intentListenerRef') intentListener!: ElementRef;

    instrumentMessage: any;

    quoteMessage: any;

    ngAfterViewInit() {
        if (this.intentListener.nativeElement) {
            this.intentListener.nativeElement.config = [
                {
                    intent: 'ViewInstrument',
                    callback: (message) => this.setInstrumentMessage(JSON.stringify(message)),
                },
                {
                    intent: 'ViewQuote',
                    callback: (message) => this.setQuoteMessage(JSON.stringify(message)),
                },
            ];
        }
    }

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

    setQuoteMessage(message) {
        this.quoteMessage = 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	IntentConfig	An array of objects which configure the intent name and a handler for intent payloads	<fdc3-intent-listener :config=${() => [{ intent: 'ViewInstrument', callback: (msg) => console.log(JSON.stringify(msg)}] }>