Finsemble: Sharing Data

Sharing Data

This tutorial will walk you through using the Drag and Drop Client to share data between components, either via user action (such as drag and drop) or programmatically.

The basic concept is that the source component needs to set up emitters and the destination component needs to set up receivers. The Drag and Drop Client handles everything else.

Setting up emitters

Here is how we set up the emitters in our premium chart component:

FSBL.Clients.DragAndDropClient.setEmitters({
    emitters: [
        {
            type: "symbol",
            data: getSymbol
        },
        {
            type: "chartiq.chart",
            data: getChart
        }
    ]
});

Setting up emitters causes a drag icon to show up on the component:

Setting up receivers

Here is how we set up the receivers in our premium chart component:

FSBL.Clients.DragAndDropClient.addReceivers({
    receivers: [
        {
            type: 'symbol',
            handler: function (err, response) {
                if (!err) { changeSymbol({ symbol: response.data['symbol'] }); };
            }
        },
        {
            type: 'chartiq.chart',
            handler: function (err, response) {
                if (!err) setChart(response.data['chartiq.chart']);
            }
        }
    ]
});

The receivers can also take regular expressions. Here is how we set up the receivers in a chat component that can receive anything:

FSBL.Clients.DragAndDropClient.addReceivers({
    receivers: [
        {
            type: /.*/,
            handler: sendData
        }
    ]
});

If a component has receivers, the Drag and Drop Client attempts to turn the body of the component into a drop zone. However this feature can be problematic, especially on complex third party components. In this case, you can set up your own drop zone on document and use DragAndDropClient.drop as the handler for the drop:

document.addEventListener('dragover', function(e) { e.preventDefault(); return false; });
document.addEventListener('drop', FSBL.Clients.DragAndDropClient.drop);

Once you start dragging from a component, all components that can and cannot receive the data are highlighted with an overlaid scrim:

Dragging items from within a component

Using emitters and receivers can be convenient for sharing entire components, like an entire chart or a report. However, items inside a component often need to be shared, such as a symbol from a blotter or a contact from a contact list. In this case, the data can be attached to the dragstart event, as demonstrated below:

element.addEventListener('dragstart', fuction(event) {
    var data = {
        'rsrchx.report': {
            url: event.target.href,
        }
    };
    FSBL.Clients.DragAndDropClient.dragStartWithData(event, data);
})

If you are using jQuery events, you can set it up like this:

element.on('dragstart', fuction(event) {
    var data = {
        'rsrchx.report': {
            url: event.target.href,
        }
    };
    FSBL.Clients.DragAndDropClient.dragStartWithData(event.originalEvent, data);
})

Advanced use—automatic linking and publishing

The Drag and Drop Client provides the ability to handle shared data using any number of events as a trigger. In a production environment, you may wish to initiate transfers based on a single click, an application's state, etc.

This opens up a number of avenues for the creative development of effective workflows. For instance, a trader entering a stock symbol into a chart might wish to automatically queue up relevant research in a new window. A salesperson reviewing a summary of accounts in Salesforce might wish to have details for a given account available at a glance, without having to browse.

If the source component is linked, the newly opened component will have the same Linker groups as the source component. Once a linked component is open, subsequent shares automatically open in the linked component instead of opening new windows.

Sometimes it is desirable to not have the components automatically handle all received data. For example, a chat component that receives data should not automatically share all published data on the chat—only data that is manually dragged and dropped. For such components, you can disable handling of such data like so:

FSBL.Clients.DragAndDropClient.openLinkerDataByDefault = false;

You can also ignore the data based on the share method in case you want to handle some, but not all, linked data:

function sharedDataHandler(err, response) {
    if(response.shareMethod != FSBL.Clients.DragAndDropClient.SHARE_METHOD.DROP) {
        return;
    }
    // Handle dropped data here:
}

Further reading

For more information on how the Finsemble application facilitates communication between components, check out Using the Finsemble Router.

You can also read about functionality that lets windows link and share data at Linking Components.