Added a web interop example

how-to/cloud-interop-basic/client/src/content/interop-view.ts

@@ -21,12 +21,14 @@ async function setContext(): Promise<void> {
 		id: idData
 	};
 	if (window.fin) {
-		window.fin.me.interop.setContext(context);
+		await window.fin.me.interop.setContext(context);
 		console.log(`Set context: ${contextType} - ${contextName}`);
 	} else {
 		window.addEventListener("finReady", async () => {
-			window.fin.me.interop.setContext(context);
-			console.log(`Set context: ${contextType} - ${contextName}`);
+			if (window.fin) {
+				await window.fin.me.interop.setContext(context);
+				console.log(`Set context: ${contextType} - ${contextName}`);
+			}
 		});
 	}
 }
@@ -36,14 +38,16 @@ async function setContext(): Promise<void> {
  */
 async function addContextListener(): Promise<void> {
 	if (window.fin) {
-		window.fin.me.interop.addContextHandler((context: Context) => {
+		await window.fin.me.interop.addContextHandler((context: Context) => {
 			updateDOMElements(context);
 		});
 	} else {
 		window.addEventListener("finReady", async () => {
-			window.fin.me.interop.addContextHandler((context: Context) => {
-				updateDOMElements(context);
-			});
+			if (window.fin) {
+				await window.fin.me.interop.addContextHandler((context: Context) => {
+					updateDOMElements(context);
+				});
+			}
 		});
 	}
 }

how-to/cloud-interop-basic/client/src/provider.ts

@@ -10,8 +10,21 @@ import { getSettings } from "./platform/settings";
 async function init(): Promise<void> {
 	const error = document.querySelector<HTMLElement>("#error");
 	const settings = await getSettings();
+
 	// Connect to the OpenFin Web Broker.
-	const fin = await connect({ options: { brokerUrl: settings.platform.brokerUrl } });
+	// It is good practice to specify providerId even if content is explicitly specifying it for cases where
+	// this provider may use our layout system and allow content to inherit these settings and currentContextGroup
+	// which will default any client that uses inheritance through our layout system.
+	const fin = await connect({
+		options: {
+			brokerUrl: settings.platform.brokerUrl,
+			interopConfig: {
+				providerId: settings.platform.providerId,
+				currentContextGroup: settings.platform.defaultContextGroup
+			}
+		}
+	});
+
 	// assign the fin api to the window object to make it globally available for consistency with container/workspace code.
 	window.fin = fin;
 	if (!settings.cloud?.connectParams?.url?.startsWith("http")) {

how-to/cloud-interop-basic/client/src/shapes/setting-shapes.ts

@@ -1,4 +1,4 @@
-import type { ConnectParams } from "@openfin/cloud-interop/dist/interfaces";
+import type { CloudInteropOverrideParams } from "@openfin/cloud-interop";
 /**
  * Settings for the client
  */
@@ -20,6 +20,6 @@ export interface Settings {
 		/**
 		 * These settings may be subject to change as we get feedback from use cases. Please contact OpenFin for this information.
 		 */
-		connectParams: ConnectParams;
+		connectParams: CloudInteropOverrideParams;
 	};
 }

how-to/cloud-interop-basic/package.json

@@ -19,13 +19,13 @@
 	"author": "[email protected]",
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
-		"@finos/fdc3": "^2.1.0-beta.8",
-		"@openfin/cloud-interop": "^0.4.0",
-		"@openfin/core-web": "^0.38.41",
+		"@finos/fdc3": "2.0.3",
+		"@openfin/cloud-interop": "0.38.42",
+		"@openfin/core-web": "^0.38.42",
 		"buffer": "^6.0.3"
 	},
 	"devDependencies": {
-		"@openfin/core": "38.81.41",
+		"@openfin/core": "38.81.42",
 		"@openfin/node-adapter": "34.78.80",
 		"copy-webpack-plugin": "^12.0.2",
 		"eslint": "8.57.0",

how-to/web-interop-basic/README.md

@@ -65,8 +65,17 @@ import "./util/buffer";
  * Initializes the OpenFin Web Broker connection.
  */
 async function init(): Promise<void> {
+
  // Connect to the OpenFin Web Broker.
- const fin = await connect({ options: { brokerUrl: "http://localhost:6060/platform/iframe-broker.html" } });
+ // It is good practice to specify providerId even if content is explicitly specifying it for cases where
+ // this provider may use our layout system and allow content to inherit these settings and currentContextGroup
+ // which will default any client that uses inheritance through our layout system.
+ const fin = await connect({ options: { brokerUrl: "http://localhost:6060/platform/iframe-broker.html",
+  interopConfig: {
+   providerId: "web-interop-basic",
+   currentContextGroup: "green"
+  } } });
+
 
  // You may now use the `fin` object. This step is important as it initializes the interop broker.
  await fin.Interop.init("web-interop-basic");

how-to/web-interop-basic/client/src/content/interop-view.ts

@@ -21,12 +21,14 @@ async function setContext(): Promise<void> {
 		id: idData
 	};
 	if (window.fin) {
-		window.fin.me.interop.setContext(context);
+		await window.fin.me.interop.setContext(context);
 		console.log(`Set context: ${contextType} - ${contextName}`);
 	} else {
 		window.addEventListener("finReady", async () => {
-			window.fin.me.interop.setContext(context);
-			console.log(`Set context: ${contextType} - ${contextName}`);
+			if (window.fin) {
+				await window.fin.me.interop.setContext(context);
+				console.log(`Set context: ${contextType} - ${contextName}`);
+			}
 		});
 	}
 }
@@ -36,14 +38,16 @@ async function setContext(): Promise<void> {
  */
 async function addContextListener(): Promise<void> {
 	if (window.fin) {
-		window.fin.me.interop.addContextHandler((context: Context) => {
+		await window.fin.me.interop.addContextHandler((context: Context) => {
 			updateDOMElements(context);
 		});
 	} else {
 		window.addEventListener("finReady", async () => {
-			window.fin.me.interop.addContextHandler((context: Context) => {
-				updateDOMElements(context);
-			});
+			if (window.fin) {
+				await window.fin.me.interop.addContextHandler((context: Context) => {
+					updateDOMElements(context);
+				});
+			}
 		});
 	}
 }

how-to/web-interop-basic/client/src/provider.ts

@@ -8,7 +8,18 @@ import { getSettings } from "./platform/settings";
 async function init(): Promise<void> {
 	const settings = await getSettings();
 	// Connect to the OpenFin Web Broker.
-	const fin = await connect({ options: { brokerUrl: settings.platform.brokerUrl } });
+	// It is good practice to specify providerId even if content is explicitly specifying it for cases where
+	// this provider may use our layout system and allow content to inherit these settings and currentContextGroup
+	// which will default any client that uses inheritance through our layout system.
+	const fin = await connect({
+		options: {
+			brokerUrl: settings.platform.brokerUrl,
+			interopConfig: {
+				providerId: settings.platform.providerId,
+				currentContextGroup: settings.platform.defaultContextGroup
+			}
+		}
+	});
 
 	// You may now use the `fin` object.
 	await fin.Interop.init(settings.platform.providerId);

how-to/web-interop-basic/package.json

@@ -19,12 +19,12 @@
 	"author": "[email protected]",
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
-		"@finos/fdc3": "^2.1.0-beta.8",
-		"@openfin/core-web": "^0.38.41",
+		"@finos/fdc3": "2.0.3",
+		"@openfin/core-web": "^0.38.42",
 		"buffer": "^6.0.3"
 	},
 	"devDependencies": {
-		"@openfin/core": "38.81.41",
+		"@openfin/core": "38.81.42",
 		"@openfin/node-adapter": "34.78.80",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",

how-to/web-interop/README.md

@@ -6,13 +6,17 @@
 
 This is a simple example that has a simple provider web page that acts as the main/index page. This page wires up the interop broker and a layout using the [@openfin/core-web](https://www.npmjs.com/package/@openfin/core-web) library.
 
-This page has a very simple layout which is made up of four iframes:
+This page has a very simple layout which is made up of four iframes that inherit the interop settings they should use to connect to the web broker:
 
 - Local - An FDC3 View - This uses the FDC3 API to add a context listener and to broadcast a hardcoded context object.
 - Local - An Interop View - This uses the OpenFin Interop API to add a context listener and to set context using a hardcoded context object.
 - External - An FDC3 Tool used in our workspace platform starters that lets you experiment with context sharing using the FDC3 APIs.
 - External - An Interop Tool used in our workspace platform starters that lets you experiment with context sharing using the OpenFin Interop API.
 
+It also has a left panel which is outside of the OpenFin Layout and represents a platform specific panel which simply uses fdc3 and logs what it receives. This iframe does not inherit interop settings (as it is not part of the OpenFin layout) and uses platform specific settings to connect.
+
+![OpenFin Web Interop Example](./docs/web-interop.png)
+
 ## Getting Started
 
 1. Install dependencies and do the initial build. Note that these examples assume you are in the sub-directory for the example.
@@ -66,17 +70,28 @@ import "./util/buffer";
  */
 async function init(): Promise<void> {
  // Get the dom element that should host the layout
- const layoutContainer = document.querySelector<HTMLElement>(`#${settings.platform.layout.layoutContainerId}`);
- 
+ const layoutContainer = document.querySelector<HTMLElement>("#layout_container");
+
  // Get the default layout
  const layoutSnapshot = {...};
 
  // Connect to the OpenFin Web Broker and pass the default layout.
- const fin = await connect({ options: { brokerUrl: "http://localhost:6060/platform/iframe-broker.html" },
+ // It is good practice to specify providerId even if content is explicitly specifying it for cases where
+ // this provider uses our layout system and content uses inheritance. currentContextGroup
+ // is useful for defaulting any client that uses inheritance through our layout system.
+ const fin = await connect({ options: {
+  brokerUrl: "http://localhost:6060/platform/iframe-broker.html",
+  interopConfig: {
+   providerId: "web-interop",
+   currentContextGroup: "green"
+  }
+ },
+  connectionInheritance: "enabled",
+   // @ts-expect-error connection inheritance is being set to true and that doesn't expect a platform config in the current release
   platform: { layoutSnapshot } });
 
  // You may now use the `fin` object to initialize the broker and the layout.
- await fin.Interop.init("web-interop-basic");
+ await fin.Interop.init("web-interop");
  // initialize the layout and pass it the dom element to bind to
  await fin.Platform.Layout.init({
   container: layoutContainer
@@ -87,7 +102,7 @@ async function init(): Promise<void> {
 The host html page [provider.html](./public/platform/provider.html) then:
 
 - imports this code and initializes it.
-- brings in required content through an iframe.
+- brings in required content through the @openfin/core-web layout system.
 - brings in the required css for the @openfin/core-web layout system.
 
 The host page initializes the OpenFin layout system and brings in a required css file that styles the layout system. This styles.css is brought in from the [@openfin/core-web](https://www.npmjs.com/package/@openfin/core-web) npm package. This style is copied to the public/style folder as core-web-styles.css using our [scripts/copy-core-web.js](./scripts/copy-core-web.js) script. It runs as part of the build process.
@@ -143,7 +158,7 @@ export async function init(): Promise<void> {
       options: {
         brokerUrl: "http://localhost:6060/platform/iframe-broker.html",
         interopConfig: {
-        providerId: "web-interop-basic",
+        providerId: "web-interop",
         currentContextGroup: "green"
         }
       }
@@ -170,33 +185,39 @@ To make it easier to update settings we store them in the web [manifest.json](./
 
 ```json
 {
- "name": "OpenFin Web Interop",
- "short_name": "OpenFinWebInterop",
- "start_url": "./platform/provider.html",
- "display": "standalone",
- "background_color": "#fff",
- "description": "An example showing a implementation of the OpenFin Web Interop Library.",
- "icons": [
-  {
-   "src": "common/images/icon-blue.png",
-   "sizes": "72x72",
-   "type": "image/png"
-  }
- ],
- "related_applications": [],
- "custom_settings": {
-   "platform": {
-    "interop": {
-     "sharedWorkerUrl": "http://localhost:6060/js/shared-worker.bundle.js",
-     "brokerUrl": "http://localhost:6060/platform/iframe-broker.html",
-     "providerId": "web-interop-basic",
-     "defaultContextGroup": "green"
-    },
-    "layout": {
-     "layoutContainerId": "layout_container",
-     "defaultLayout": "http://localhost:6060/layouts/default.layout.fin.json" 
+  "name": "OpenFin Web Interop",
+  "short_name": "OpenFinWebInterop",
+  "start_url": "./platform/provider.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "An example showing a implementation of the OpenFin Web Interop Library.",
+  "icons": [
+    {
+      "src": "common/images/icon-blue.png",
+      "sizes": "72x72",
+      "type": "image/png"
     }
-   }
- }
+  ],
+  "related_applications": [],
+  "custom_settings": {
+    "platform": {
+      "interop": {
+        "sharedWorkerUrl": "http://localhost:6060/js/shared-worker.bundle.js",
+        "brokerUrl": "http://localhost:6060/platform/iframe-broker.html",
+        "providerId": "web-interop",
+        "defaultContextGroup": "green"
+      },
+      "layout": {
+        "panels": {
+          "left": {
+            "url": "http://localhost:6060/views/fdc3-panel.html",
+            "frameId": "left-panel"
+          }
+        },
+        "layoutContainerId": "layout_container",
+        "defaultLayout": "http://localhost:6060/layouts/default.layout.fin.json"
+      }
+    }
+  }
 }
 ```

how-to/web-interop/client/src/content/fdc3-panel.ts

@@ -0,0 +1,49 @@
+import type { Context } from "@finos/fdc3";
+import { init } from "../platform/api";
+
+window.addEventListener("DOMContentLoaded", async () => {
+	// setTimeout(async () => {
+	await init(false);
+	await initializeDOM();
+	// }, 1000);
+});
+
+/**
+ * Adds an FDC3 context listener to the window.
+ */
+async function addFDC3Listener(): Promise<void> {
+	if (window.fdc3) {
+		await window.fdc3.addContextListener(null, (context) => {
+			updateDOMElements(context);
+		});
+	} else {
+		window.addEventListener("fdc3Ready", async () => {
+			await window.fdc3.addContextListener(null, (context) => {
+				updateDOMElements(context);
+			});
+		});
+	}
+}
+
+/**
+ * Updates the DOM elements with the provided context.
+ * @param context The context to update the DOM elements with.
+ */
+function updateDOMElements(context: Context): void {
+	const contextTypeSpan = document.querySelector<HTMLSpanElement>("#contextType");
+	const contextNameSpan = document.querySelector<HTMLSpanElement>("#contextName");
+	const contextBodyPre = document.querySelector<HTMLPreElement>("#contextBody");
+
+	if (contextTypeSpan !== null && contextNameSpan !== null && contextBodyPre !== null) {
+		contextTypeSpan.textContent = context.type;
+		contextNameSpan.textContent = context.name ?? "No name provided.";
+		contextBodyPre.textContent = JSON.stringify(context, null, 2);
+	}
+}
+
+/**
+ * Initialize the DOM elements.
+ */
+async function initializeDOM(): Promise<void> {
+	await addFDC3Listener();
+}

how-to/web-interop/client/src/content/fdc3-view.ts

@@ -2,7 +2,7 @@ import type { Context } from "@finos/fdc3";
 import { init } from "../platform/api";
 
 window.addEventListener("DOMContentLoaded", async () => {
-	await init();
+	await init(true);
 	await initializeDOM();
 });