FDC3 Listen Intent

FDC3 intent listener 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.

Compatibility 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 that configure the intent name and the handler for intent payloads	<fdc3-intent-listener :config=${() => [{ intent: 'ViewInstrument', callback: (msg) => console.log(JSON.stringify(msg))}] }>