Tutorial: Platform.createWindow

Platform.createWindow

Creates a new Platform Window.
There are two Window types at your disposal while using OpenFin Platforms - Default Window and Custom Window:

Default Window

The Default Window uses the standard OpenFin Window UI. It contains the standard close, maximize and minimize buttons, and will automatically render the Window's layout if one is specified.

The example below will create a Default Window which uses OpenFin default Window UI.
The Window contains two Views in a stack Layout.

Example

const platform = fin.Platform.getCurrentSync();
platform.createWindow({
    layout: {
        content: [
            {
                type: 'stack',
                content: [
                    {
                        type: 'component',
                        componentName: 'view',
                        componentState: {
                            name: 'test_view_1',
                            url: 'https://cdn.openfin.co/docs/javascript/canary/Platform.html'
                        }
                    },
                    {
                        type: 'component',
                        componentName: 'view',
                        componentState: {
                            name: 'test_view_2',
                            url: 'https://cdn.openfin.co/docs/javascript/canary/Platform.html'
                        }
                    }
                ]
            }
        ]
    }
}).then(console.log);

note: The Default Window's design can be customized by specifying the stylesheetUrl property in the manifest:

Example
{ 
    platform: { 
        defaultWindowOptions: { 
            stylesheetUrl: 'some-url.css', 
            ... 
        }
    }
}

For a list of common Layout CSS classes you can override in your custom stylesheet, see Useful Layout CSS Classes

Custom Platform Window

For deeper customization, you can bring your own Window code into a Platform.

To specify a Platform Custom Window, provide a url property when creating a Window.
If you intend to render a Layout in your Custom Window, you must also specify an HTMLElement that the Layout will inject into and set its id property to "layout-container".

The example below will create a Platform Custom Window

Example

    // in an OpenFin app:
    const platform = fin.Platform.getCurrentSync();
    const windowConfig =  
        {
            url: "https://www.my-domain.com/my-custom-window.html", // here we point to where the Custom Frame is hosted.
            layout: {
                content: [
                    {
                        type: "stack",
                        content: [
                            {
                                type: "component",
                                componentName: "view",
                                componentState: {
                                    name: "app #1",
                                    url: "https://cdn.openfin.co/docs/javascript/canary/Platform.html"
                                }
                            },
                            {
                                type: "component",
                                componentName: "view",
                                componentState: {
                                    name: "app #2",
                                    url: "https://cdn.openfin.co/docs/javascript/canary/Platform.html"
                                }
                            }
                        ]
                    }
                ]
            }
        };
    platform.createWindow(windowConfig);

Here's an example of a minimalist Custom Platform Window implementation:

Example

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>
    <body>
        <div id="of-frame-main">
            <div id="title-bar">
                <div class="title-bar-draggable">
                    <div id="title"> This is a custom frame! </div>
                </div>
                <div id="buttons-wrapper">
                    <div class="button" id="minimize-button"></div>
                    <div class="button" id="expand-button"></div>
                    <div class="button" id="close-button"></div>
                </div>
            </div>
            <div id="layout-container"></div> <!-- OpenFin layout would be injected here -->
            <script src="./custom-frame.js"></script>
        </div>
    </body>
</html>

Your Custom Window can use in-domain resources for further customization (such as CSS, scripts, etc.).
For a list of common Layout CSS classes you can override in your stylesheet, see Useful Layout CSS Classes

note: The example above will require the body element to have height: 100%; set in order to render the layout correctly.