Tutorial: Layout.DOMEvents

When a Layout is created, it emits events onto the DOM element representing the Layout container. This Layout container is the DOM element referenced by containerId in Layout.init. You can use the built-in event emitter to listen to these events using addEventListener. The events are emitted synchronously and only in the process where the Layout exists. Any values returned by the called listeners are ignored and will be discarded. If the target DOM element is destroyed, any events that have been set up on that element will be destroyed.

addEventListener(type, listener [, options]);

Adds a listener to the end of the listeners array for the specified event.

const myLayoutContainer = document.getElementById('layout_container');

myLayoutContainer.addEventListener('tab-created', function(event) {
    const { tabSelector } = event.detail;
    const tabElement = document.getElementById(tabSelector);
    const existingColor = tabElement.style.backgroundColor;
    tabElement.style.backgroundColor = "red";
    setTimeout(() => {
        tabElement.style.backgroundColor = existingColor;
    }, 2000);
});

removeEventListener(type, listener [, options]);

Adds a listener to the end of the listeners array for the specified event.

const myLayoutContainer = document.getElementById('layout_container');

const listener = function(event) {
    console.log(event.detail);
    console.log('container-created event fired once, removing listener');
    myLayoutContainer.removeEventListener('container-created', listener);
};

myLayoutContainer.addEventListener('container-created', listener);

Supported event types are:

• tab-created
• container-created

Layout DOM Node Events

tab-created

Generated when a tab is created. As a user drags and drops tabs within window, new tabs are created. A single view may have multiple tabs created and destroyed during its lifetime attached to a single window.

// The response has the following shape in event.detail:
{
    containerSelector: "container-component_A"
    name: "component_A"
    tabSelector: "tab-component_A"
    topic: "openfin-DOM-event"
    type: "tab-created"
    uuid: "OpenFin POC"
}

container-created

Generated when a container is created. A single view will have only one container during its lifetime attached to a single window and the container's lifecycle is tied to the view. To discover when the container is destroyed, please listen to view-detached event.

// The response has the following shape in event.detail:
{
    containerSelector: "container-component_A"
    name: "component_A"
    tabSelector: "tab-component_A"
    topic: "openfin-DOM-event"
    type: "container-created"
    uuid: "OpenFin POC"
}