Creating a secondary window

Declaring the secondary window

In order to create a secondary window, you need to edit the manifest.json.  Here’s an example of a secondary window, and how it is used:

{
    "manifest_version": 1,
    "type": "WebAp",
    "meta": {
        "name": "Demo_App",
        "version": "1.0.0",
        "author": "Developer_Name",
        "icon": "IconMouseOver.png",
        "icon_gray": "IconMouseNormal.png",
        "description": "Demo App"
    },
    "data": {
        "start_window": "MainWindow",
        "windows": {
    	    "MainWindow": {
                "file": "Files/index.html",
                "transparent": true,
                "resizable": true,
                "size": {"width": 400, "height": 300},
                "min_size": {"width": 200, "height": 200},
                "max_size": {"width": 600, "height": 500}
                },
            "SubWindow": {
                "file": "Files/subwindow.html",
                "transparent": true,
                "resizable": true,
                "size": {"width": 400, "height": 300},
                "in_game_only": true
            }
        }
    }
}

Every new secondary window needs to be defined as shown above in the manifest.json. You can customize the secondary window in the same way as the main window, this also means that the fields that are mandatory for the main window are the also mandatory for the secondary window. The definition for your secondary windows needs to be located underneath the definition of the main window inside of your “data” section. Remember to create a new html file for the secondary window, and have the secondary window point to it in “file”.

 

How to open the secondary window

Opening the secondary window is relatively simple.  Here’s an example of how you can call the secondary window in your app:

overwolf.windows.obtainDeclaredWindow("SubWindow",
    function(result){
        if (result.status == "success"){
            overwolf.windows.restore(result.window.id,
                function(result){}
             );
         }
     }
 );

You need to use the obtainDeclaredWindow function to get the secondary window (which is why you declared it in the first place). The obtainDeclaredWindow function uses the callback function in line 2 that will display the window using the restore function in line 4. The window that is received by obtainDeclaredWindow is not displayed on screen which is why you need to use the restore function to display it on screen.

Multiple uses of obtainDeclaredWindow with the same window name will always return the same instance. This means that if you call “SubWindow” multiple times using this function, it will always return the same window.

 

Communication with a secondary window

Information about communication between windows can be found here.