built-on-openfin · raycashmore · Mar 28, 2025 · Mar 28, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/README.md b/README.md
diff --git a/how-to/cloud-interop-basic/package.json b/how-to/cloud-interop-basic/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--cloud-interop-basic",
-	"version": "20.1.0",
+	"version": "21.0.0",
 	"description": "OpenFin Web Starter -- Cloud Interop - Basic",
 	"main": "public/platform/provider.bundle.js",
 	"scripts": {
@@ -20,11 +20,11 @@
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
 		"@finos/fdc3": "2.0.3",
-		"@openfin/cloud-interop": "0.40.51",
-		"@openfin/core-web": "0.40.51"
+		"@openfin/cloud-interop": "0.41.131",
+		"@openfin/core-web": "0.41.131"
 	},
 	"devDependencies": {
-		"@openfin/core": "40.104.2",
+		"@openfin/core": "41.102.1",
 		"copy-webpack-plugin": "^12.0.2",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",

diff --git a/how-to/cloud-interop/README.md b/how-to/cloud-interop/README.md
@@ -17,7 +17,7 @@ This page has a very simple layout which is made up of four iframes that inherit
 
 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.
 
-[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.1.0/cloud-interop/platform/provider.html)
+[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v21.0.0/cloud-interop/platform/provider.html)
 
 ![OpenFin Web Interop Example](./docs/web-interop.png)
 

diff --git a/how-to/cloud-interop/package.json b/how-to/cloud-interop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--cloud-interop",
-	"version": "20.1.0",
+	"version": "21.0.0",
 	"description": "OpenFin Web Starter -- Cloud Interop",
 	"main": "public/platform/provider.bundle.js",
 	"scripts": {
@@ -20,11 +20,11 @@
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
 		"@finos/fdc3": "2.0.3",
-		"@openfin/core-web": "0.40.51",
-		"@openfin/cloud-interop": "0.40.51"
+		"@openfin/core-web": "0.41.131",
+		"@openfin/cloud-interop": "0.41.131"
 	},
 	"devDependencies": {
-		"@openfin/core": "40.104.2",
+		"@openfin/core": "41.102.1",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-airbnb-typescript": "18.0.0",

diff --git a/how-to/cloud-interop/public/layouts/default.layout.fin.json b/how-to/cloud-interop/public/layouts/default.layout.fin.json
@@ -33,7 +33,7 @@
 											"type": "component",
 											"componentName": "view",
 											"componentState": {
-												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.1.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html",
+												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v21.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html",
 												"name": "internal-generated-view-54a8ef85-a885-4234-be46-9d52e88fcb74"
 											},
 											"title": "FDC3 Different Domain"
@@ -70,7 +70,7 @@
 											"type": "component",
 											"componentName": "view",
 											"componentState": {
-												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.1.0/interop/interop-api/context/interop-broadcast-view.html",
+												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v21.0.0/interop/interop-api/context/interop-broadcast-view.html",
 												"name": "internal-generated-view-2d9a3624-fd0e-4e0a-b681-a79a9616b871"
 											},
 											"title": "Interop External Domain"

diff --git a/how-to/cloud-interop/public/style/core-web-styles.css b/how-to/cloud-interop/public/style/core-web-styles.css
@@ -59,16 +59,27 @@
 .lm_header [class^=lm_] {
   box-sizing: content-box !important;
 }
+.lm_header .addTabButton {
+  -webkit-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  padding: 0 6px;
+}
 .lm_header .lm_controls {
   position: absolute;
   right: 3px;
   display: flex;
+  height: 100%;
 }
 .lm_header .lm_controls > * {
   cursor: pointer;
   float: left;
   width: 18px;
-  height: 18px;
+  height: 100%;
   text-align: center;
 }
 .lm_header .lm_tabs {
@@ -672,12 +683,17 @@ div.placeholder_image img {
     color: var(--tab-font-color)
 }
 
+.lm_controls {
+    height: 100%;
+}
+
 .lm_controls li {
 	position: relative;
 	background-position: center center;
 	background-repeat: no-repeat;
 	opacity: .4;
-	transition: opacity 300ms ease
+	transition: opacity 300ms ease;
+  height: 100% !important;
 }
 
 .lm_controls li:hover {

diff --git a/how-to/web-client-api/README.md b/how-to/web-client-api/README.md
@@ -94,7 +94,7 @@ The module supports the following options:
 
 This is an FDC3 view similar to the one shown in web-interop and web-interop-basic examples. The only difference is that this one does not import the @openfin/core-web module. The [shim](./client/src/shim.ts) script is referenced in the [fdc3-view.html](./public/views/fdc3-view.html) page which is responsible for bringing in the fin and fdc3 api if the content is running outside of the container.
 
-The content will not run directly as it is not running inside of a layout and the code required to setup a platform and initialize a layout has not been added in order to reduce the amount of code in this example. You can reference the hosted fdc3 example <https://built-on-openfin.github.io/web-starter/web/v20.1.0/client-web-api/views/fdc3-view.html> or start the web server and reference the localhost version <http://localhost:6060/views/fdc3-view.html>.
+The content will not run directly as it is not running inside of a layout and the code required to setup a platform and initialize a layout has not been added in order to reduce the amount of code in this example. You can reference the hosted fdc3 example <https://built-on-openfin.github.io/web-starter/web/v21.0.0/client-web-api/views/fdc3-view.html> or start the web server and reference the localhost version <http://localhost:6060/views/fdc3-view.html>.
 
 # Alternatives
 

diff --git a/how-to/web-client-api/client/src/shim-client.ts b/how-to/web-client-api/client/src/shim-client.ts
@@ -9,7 +9,7 @@ export async function init(options: ClientOptions): Promise<void> {
 	if (window.fin === undefined) {
 		console.log("Fin is not available. Importing the OpenFin API shim.");
 		const url =
-			"https://built-on-openfin.github.io/web-starter/web/v20.1.0/web-client-api/js/web.client.api.bundle.js";
+			"https://built-on-openfin.github.io/web-starter/web/v21.0.0/web-client-api/js/web.client.api.bundle.js";
 		const webClient = await import(/* webpackIgnore: true */ url);
 		console.log("OpenFin API shim script imported.");
 		console.log("Checking to see if the document is ready before requesting the API.");

diff --git a/how-to/web-client-api/package.json b/how-to/web-client-api/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--web-client-api",
-	"version": "20.1.0",
+	"version": "21.0.0",
 	"description": "OpenFin Web Starter -- Web Client API",
 	"main": "public/js/web.client.api.bundle.js",
 	"scripts": {
@@ -19,10 +19,10 @@
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
 		"@finos/fdc3": "2.0.3",
-		"@openfin/core-web": "0.40.51"
+		"@openfin/core-web": "0.41.131"
 	},
 	"devDependencies": {
-		"@openfin/core": "40.104.2",
+		"@openfin/core": "41.102.1",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-airbnb-typescript": "18.0.0",

diff --git a/how-to/web-interop-basic/README.md b/how-to/web-interop-basic/README.md
@@ -11,7 +11,7 @@ This page has a very simple layout which is made up of two iframes:
 - An FDC3 View - This uses the FDC3 API to add a context listener and to broadcast a hardcoded context object.
 - An Interop View - This uses the OpenFin Interop API to add a context listener and to set context using a hardcoded context object.
 
-[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.1.0/web-interop-basic/platform/provider.html)
+[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v21.0.0/web-interop-basic/platform/provider.html)
 
 ![OpenFin Web Interop Basic Example](./docs/web-interop-basic.png)
 

diff --git a/how-to/web-interop-basic/package.json b/how-to/web-interop-basic/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--web-interop-basic",
-	"version": "20.1.0",
+	"version": "21.0.0",
 	"description": "OpenFin Web Starter -- Web Interop - Basic",
 	"main": "public/platform/provider.bundle.js",
 	"scripts": {
@@ -20,10 +20,10 @@
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
 		"@finos/fdc3": "2.0.3",
-		"@openfin/core-web": "0.40.51"
+		"@openfin/core-web": "0.41.131"
 	},
 	"devDependencies": {
-		"@openfin/core": "40.104.2",
+		"@openfin/core": "41.102.1",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-airbnb-typescript": "18.0.0",

diff --git a/how-to/web-interop-support-context-and-intents/README.md b/how-to/web-interop-support-context-and-intents/README.md
@@ -35,7 +35,7 @@ To show content in a multi-layout UI we implemented a layoutManagerOverride so t
 
 We bring in a number of apps from our workspace platform starter and dev tools. We also include 4 basic apps that support context and intents (using the fdc3 and Interop API).
 
-[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.1.0/web-interop-support-context-and-intents/platform/provider.html)
+[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v21.0.0/web-interop-support-context-and-intents/platform/provider.html)
 
 ## Getting Started
 

diff --git a/how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts b/how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts
@@ -63,8 +63,10 @@ async function init(): Promise<void> {
 		title.value = settings?.platform?.ui?.title;
 		subTitle.value = settings?.platform?.ui?.subTitle;
 		logo.value = settings?.platform?.ui?.logo;
-		username.value = settings?.platform.cloudInterop?.connectParams?.basicAuthenticationParameters?.username ?? "";
-		password.value = settings?.platform.cloudInterop?.connectParams?.basicAuthenticationParameters?.password ?? "";
+		username.value =
+			settings?.platform.cloudInterop?.connectParams?.basicAuthenticationParameters?.username ?? "";
+		password.value =
+			settings?.platform.cloudInterop?.connectParams?.basicAuthenticationParameters?.password ?? "";
 		platformId.value = settings?.platform.cloudInterop?.connectParams?.platformId;
 		cloudUrl.value = settings?.platform.cloudInterop?.connectParams?.url;
 		sourceId.value = settings?.platform.cloudInterop?.connectParams.sourceId ?? "";
@@ -81,8 +83,10 @@ async function init(): Promise<void> {
 		appliedSettings.platform.ui.subTitle = subTitle.value;
 		appliedSettings.platform.ui.logo = logo.value;
 		if (appliedSettings.platform?.cloudInterop?.connectParams?.basicAuthenticationParameters) {
-			appliedSettings.platform.cloudInterop.connectParams.basicAuthenticationParameters.username = username.value;
-			appliedSettings.platform.cloudInterop.connectParams.basicAuthenticationParameters.password = password.value;
+			appliedSettings.platform.cloudInterop.connectParams.basicAuthenticationParameters.username =
+				username.value;
+			appliedSettings.platform.cloudInterop.connectParams.basicAuthenticationParameters.password =
+				password.value;
 		}
 		appliedSettings.platform.cloudInterop.connectParams.platformId = platformId.value;
 		appliedSettings.platform.cloudInterop.connectParams.url = cloudUrl.value;

diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts
@@ -40,6 +40,20 @@ export async function getApps(): Promise<PlatformApp[]> {
 	return cachedApps;
 }
 
+/**
+ * Formats the app title and adds a count suffix to disambiguate the tabs.
+ * @param app The app for which to format the title
+ * @returns The formatted title, with a count suffix if multiple instances exist
+ */
+async function formatAppTitleWithSuffix(app: PlatformApp): Promise<string | undefined> {
+	const layout = fin.Platform.Layout.getCurrentSync();
+	const views = await layout.getCurrentViews();
+	const existingInstances = views.filter((view) => view.identity.name.split("/")[0] === app.appId);
+	return existingInstances && existingInstances.length > 0
+		? `${app.title} (${existingInstances.length})`
+		: app.title;
+}
+
 /**
  * Launch an application in the way specified by its manifest type.
  * @param platformApp The application to launch or it's id.
@@ -65,17 +79,19 @@ export async function launch(
 		const name = `${appToLaunch.appId}/${randomUUID()}`;
 		const uuid = fin.me.identity.uuid;
 		const appId = appToLaunch.appId;
+		const title = await formatAppTitleWithSuffix(appToLaunch);
 
 		if (target?.layout) {
 			await window?.fin?.Platform.Layout.getCurrentSync().addView({
 				name,
 				url: appToLaunch.details.url,
-				title: appToLaunch.title
+				titlePriority: "options",
+				title
 			});
 		} else {
 			const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync();
 			const layoutId = `tab-${randomUUID()}`;
-			const appSnapshot = getAppLayout(appToLaunch, layoutId, name);
+			const appSnapshot = getAppLayout(appToLaunch, layoutId, name, title);
 			await currentLayout?.applyLayoutSnapshot(appSnapshot);
 		}
 		return [{ name, uuid, appId }];
@@ -112,9 +128,15 @@ export async function bringAppToFront(
  * @param platformApp The application to get the layout for.
  * @param layoutId The id of the layout to create for the app.
  * @param viewName The name of the view to create.
+ * @param title Preferred title for the new tab, or otherwise will use document.title
  * @returns The layout options.
  */
-function getAppLayout(platformApp: PlatformApp, layoutId: string, viewName: string): PlatformLayoutSnapshot {
+function getAppLayout(
+	platformApp: PlatformApp,
+	layoutId: string,
+	viewName: string,
+	title: string | undefined
+): PlatformLayoutSnapshot {
 	const appSnapshot: PlatformLayoutSnapshot = {
 		layouts: {},
 		layoutTitles: {}
@@ -138,9 +160,10 @@ function getAppLayout(platformApp: PlatformApp, layoutId: string, viewName: stri
 										componentName: "view",
 										componentState: {
 											url: platformApp.details.url,
-											name: viewName
+											name: viewName,
+											titlePriority: "options"
 										},
-										title: platformApp.title
+										title
 									}
 								]
 							}

diff --git a/how-to/web-interop-support-context-and-intents/client/src/utils.ts b/how-to/web-interop-support-context-and-intents/client/src/utils.ts
@@ -82,7 +82,7 @@ export function isInteger(value: unknown): value is number {
  */
 export function objectClone<T>(obj: T): T {
 	// eslint-disable-next-line no-restricted-syntax
-	return obj === undefined ? undefined : JSON.parse(JSON.stringify(obj));
+	return obj === undefined ? (undefined as T) : JSON.parse(JSON.stringify(obj));
 }
 
 /**

diff --git a/how-to/web-interop-support-context-and-intents/package.json b/how-to/web-interop-support-context-and-intents/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--web-interop-support-context-and-intents",
-	"version": "20.1.0",
+	"version": "21.0.0",
 	"description": "OpenFin Web Starter -- Web Interop - Support Context and Intents",
 	"main": "public/platform/provider.bundle.js",
 	"scripts": {
@@ -20,11 +20,11 @@
 	"license": "SEE LICENSE IN LICENSE.MD",
 	"dependencies": {
 		"@finos/fdc3": "2.0.3",
-		"@openfin/core-web": "0.40.51",
-		"@openfin/cloud-interop": "0.40.51"
+		"@openfin/core-web": "0.41.131",
+		"@openfin/cloud-interop": "0.41.131"
 	},
 	"devDependencies": {
-		"@openfin/core": "40.104.2",
+		"@openfin/core": "41.102.1",
 		"eslint": "8.57.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-airbnb-typescript": "18.0.0",