Skip to main content

FDC3 Channel Event

This is a utility element that listens to an event on its parent element and broadcasts the event detail payload on an FDC3 Channel.

Use cases:

  • Send event on system color channel
  • Send event on app channel
  • Map the event payload before broadcasting on a channel
FDC3 Enabled Browsers

FDC3 requires an FDC3 enabled browser to work.

The following are vendors of FDC3 enabled browsers that we support

Examples​

FDC3 Position Server Model

The following example is based on the following kotlin code snippets.

It creates and serves an entity that matches the fdc3.position schema

In your app-name-tables-dictionary.kts add:

tables {
    table(name = "INSTRUMENT_REF", id = 11_000) {
        field("INSTRUMENT_ID", LONG).autoIncrement()
        field("INSTRUMENT_TYPE", STRING(100))
        field("TICKER", STRING(100)).notNull()
        field("ISIN", STRING(100))
        field("CUSIP", STRING(100))
        field("SEDOL", STRING(100))
        field("FIGI_ID", STRING(100))
        field("INSTRUMENT_NAME", STRING(100))
        field("BASE_BID_PRICE", DOUBLE).notNull()
        field("BASE_ASK_PRICE", DOUBLE).notNull()
        field("BBG_ID", STRING(100))
        field("FDS_ID", STRING(100))
        field("PERMID", STRING(100))
        field("RIC", STRING(100))
        field("EXCHANGE", STRING(100))
        field("CURRENCY", STRING(100))
        field("COUNTRY", STRING(100))
        primaryKey("INSTRUMENT_ID")
    }
}

In your app-name-dataserver.kts add:

dataServer {
    query("ALL_INSTRUMENT_REF", INSTRUMENT_REF)
}

Example 1 - Send event on system channel​

This will listen to the rowClicked event that is fired by the rapid-grid-pro element whenever a row is clicked.

It will broadcast on the current system color channel.

It will broadcast with the context type fdc3.position.

The context payload will contain the event.detail.data payload in the id property of the Context object.

Declaration

<fdc3-channel-event></fdc3-channel-event>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <rapid-grid-pro>
            <grid-pro-genesis-datasource
                resource-name="ALL_INSTRUMENT_REF">
            </grid-pro-genesis-datasource>
            <fdc3-channel-event event-name="rowClicked" channel-type="fdc3.position">
            </fdc3-channel-event>
        </rapid-grid-pro>
    `,
})
export class MyElement extends GenesisElement {}

Example 2 - Send event on app channel​

This will listen to the rowClicked event that is fired by the rapid-grid-pro element whenever a row is clicked.

It will broadcast on the specified app channel, in this case appChannel.

Declaration

<fdc3-channel-event></fdc3-channel-event>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <rapid-grid-pro>
            <grid-pro-genesis-datasource
                resource-name="ALL_INSTRUMENT_REF">
            </grid-pro-genesis-datasource>
            <fdc3-channel-event
                event-name="rowClicked"
                channel-type="fdc3.position"
                channel-name="appChannel">
            </fdc3-channel-event>
        </rapid-grid-pro>
    `,
})
export class MyElement extends GenesisElement {}

Example 3 - Send mapped event on system channel​

This will listen to the rowClicked event that is fired by the rapid-grid-pro element whenever a row is clicked.

It will broadcast on the current system color channel.

It will broadcast with the context type fdc3.position.

The mapping function will map the event.detail.data payload and create a new object.

Declaration

<fdc3-channel-event></fdc3-channel-event>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <rapid-grid-pro>
            <grid-pro-genesis-datasource
                resource-name="ALL_INSTRUMENT_REF">
            </grid-pro-genesis-datasource>
            <fdc3-channel-event
                :mappingFunction="${() => ({TICKER, CUSIP}) => ({ id: { ticker: TICKER, cusip: CUSIP } })}"
                event-name="rowClicked"
                channel-type="fdc3.position">
            </fdc3-channel-event>
        </rapid-grid-pro>
    `,
})
export class MyElement extends GenesisElement {}

DOM API​

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

Attributes​

AttributeTypeUseExample
event-namestringThe name of the javascript event to listen to on the parent
<fdc3-channel-event event-name="click">
channel-typestringThe name of the channel context type that will be broadcast
<fdc3-channel-event channel-type="fdc3.position">
channel-namestringIf specified, the element will broadcast on a named app channel
<fdc3-channel-event channel-type="exampleChannel">

Properties​

PropertyTypeUseExample
mappingFunction
(e: Event.detail.data | Event.detail) => any
An optional function to override the channel broadcast payload. It should be a function which returns a value, corresponding to the fdc3 type. It will receive the custom event detail.data property value (or detail if data is not present) as a parameter. The returned value will be broadcast on the channel
<fdc3-channel-event :mappingFunction=${() => ({TICKER}) => ({ id: { ticker: TICKER, cusip: CUSIP } })}>

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 listens to the event on its parent element that you specify in the event-name attribute.