Migrating from Layouts V1 Workspaces

🚧

Requirements

  • OpenFin CLI installed
  • OpenFin Runtime 15.80.49.30+
  • Windows Operating System | Mac not fully supported and may result in unexpected behavior

Step 1: Create your first manifest-launched Platform Window

Navigate to our Config Generator in your browser: https://openfin.github.io/golden-prototype/config-gen . This is the tool we will use to help us with the conversion. Make sure that you are in Windows if you're using a VM to do this.

  • Take a look at your Layouts V1 Workspace object. We are looking for the apps array.
  • Locate the first app in the apps array.
  • Locate the url property under mainWindow for your app. Copy the url stored there.
  • Paste the url you copied into the URL: field on the Config Generator in your browser.
  • Close out the other view tabs you see in the config generator. We only need 1 view.
  • Click the Launch in OpenFin button on the far right, above the generated JSON.
  • You should see your application come up! Congratulations, your app is in Platforms now.

Example

{
  "apps": [
    {
      "mainWindow": {
        "url": "http://www.example.com"
      }
    }
  ]
}

Step 2: Add all applications to your Platform

  • Repeat the process above for all of the apps in your Layouts V1 Workspace, until all applications are now on your desktop.

Step 3: Regroup all applications on your Platform

  • Step through your apps array once again. You will notice that on some apps, you can see a windowGroup array. Let's use this array as a guide to group our applications back together.
  • Start by locating the Platform Window you created for this App (defined in mainWindow). It should be somewhere on your desktop. This is Platform Window A.
  • Next, locate the first Platform Window in your windowGroup array. You may need to poke around your apps array to find the corresponding url for the listed name and uuid. This is Platform Window B.
  • Drag the tab of Platform Window B onto Platform Window A. They should now be properly regrouped. You can arrange them as you wish.
  • Repeat this process for all of the entities in the windowGroup array, dragging all windows onto Platform Window A.
  • Repeat this process for each app in the apps array.

Example

{
  "apps": [    
    {
      "mainWindow": {
        "name": "App-1135",
        "url": "http://localhost:1337/demo/testbed/index.html",
        "uuid": "App-1135", (WINDOW A)
        "windowGroup": [
          {
            "name": "App-7451", (WINDOW B)
            "uuid": "App-7451"
          },
          {
            "name": "App-4640", (WINDOW C)
            "uuid": "App-4640"
          },
          {
            "name": "App-3082", (WINDOW D)
            "uuid": "App-3082"
          }
        ]
      }
    }
  ]
}

Step 4: Generate your Snapshot JSON

Now that you have all your windows positioned where you like, in their original groups, it'd be nice to save the state of the desktop at this point in time. The JSON representation of that is called a Snapshot. Let's generate one:

  1. Right click on any Platform Window you'd like. Click the Inspect button.
  2. Copy and Paste the following code into your Browser and click Enter.

Example 1

let snap;

fin.Platform.getCurrentSync().getSnapshot().then((snapshot) => {
    console.log(snapshot);
    snap = snapshot;
});

copy(snap);
  • You should see a Snapshot object returned in your console, and copied to your clipboard.
    • You can use this object to restore your desktop to this state in the future. Save it wherever you'd like.
    1. Use the following code to apply your Snapshot. You should see all of your windows come back up.

Example 2

fin.Platform.getCurrentSync().applySnapshot(snap);

Step 5: Get acquainted with Platforms

  • It is highly recommend that you step through our Getting Started Guide for our Platform API. It will help you understand how Platforms works

Did this page help you?