Tutorial: Layout.init

Layout.init

Initialize the window's Layout. Must be called from a custom window that has a truthy 'layout' option property (set layout to true in order to use this call with your own layout). If a layout is not provided in the options for this call, the layout property set upon creation of that window is used. If a containerId is not provided, this method attempts to find an element with the id layout-container.

Example

// if no options are included, the layout in the window options is initialized in an element with the id `layout-container`
const layout = await fin.Platform.Layout.init();



Example

To use a different layout or target a different HTML element use the options object. The layout property set upon creation of that window needs to be truthy for this to work.

const containerId = 'my-custom-container-id';
const layout = {
    content: [
        {
            type: 'stack',
            content: [
                {
                    type: 'component',
                    componentName: 'view',
                    componentState: {
                        name: 'component_X',
                        url: 'https://www.openfin.co'
                    }
                },
                {
                    type: 'component',
                    componentName: 'view',
                    componentState: {
                        name: 'component_Y',
                        url: 'https://cdn.openfin.co/embed-web/chart.html'
                    }
                }
            ]
        }
    ]
};
// initialize the layout defined above into an existing HTML element with the div `my-custom-container-id`
// the window must have been created with a layout property of `true` or a layout object for this call to work
const layout = await fin.Platform.Layout.init({ layout, containerId });