Update common call/contact and manager portal examples to support Ope…

…nFin anywhere. (#721) Updated examples to bring in OpenFin web libraries if running outside of a container.
built-on-openfin · May 8, 2024 · 852caaa · 852caaa
1 parent cf53425
commit 852caaa
Show file tree

Hide file tree

Showing 61 changed files with 856 additions and 435 deletions.
diff --git a/how-to/register-with-home/public/common/views/contact/call-app/index.html b/how-to/register-with-home/public/common/views/contact/call-app/index.html
@@ -6,6 +6,7 @@
 		<title>Call Application</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js"></script>
 	</head>
 

diff --git a/how-to/register-with-home/public/common/views/contact/call-app/index.js b/how-to/register-with-home/public/common/views/contact/call-app/index.js
@@ -104,24 +104,38 @@ function initializeDOM() {
 		await appChannel.broadcast(context);
 	}
 
-	if (window.fdc3 !== undefined) {
+	/**
+	 * Sets up the related fdc3 listeners once fdc3 is available.
+	 */
+	function setupListeners() {
 		const startCallIntent = 'StartCall';
 		const openAppIntent = 'OpenApp';
-		fdc3.addIntentListener(startCallIntent, (ctx, metadata) => {
-			console.log(`Received Context For Intent: ${startCallIntent}`, ctx, metadata);
-			updateCallInformation(ctx, startCallIntent);
-			return new Promise((resolve) => {
-				// To demonstrate getResult in fdc3 2.0 we simply return the context that was sent.
-				resolve(ctx);
+		try {
+			fdc3.addContextListener('fdc3.contact', (ctx, metadata) => {
+				console.log('Received Context', ctx, metadata);
+				updateCallInformation(ctx);
 			});
-		});
-		fdc3.addIntentListener(openAppIntent, (ctx, metadata) => {
-			console.log(`Received Context For Intent: ${openAppIntent}`, ctx, metadata);
-			updateCallInformation(ctx, openAppIntent);
-		});
-		fdc3.addContextListener('fdc3.contact', (ctx, metadata) => {
-			console.log('Received Context', ctx, metadata);
-			updateCallInformation(ctx);
+			fdc3.addIntentListener(startCallIntent, (ctx, metadata) => {
+				console.log(`Received Context For Intent: ${startCallIntent}`, ctx, metadata);
+				updateCallInformation(ctx, startCallIntent);
+				return new Promise((resolve) => {
+					// To demonstrate getResult in fdc3 2.0 we simply return the context that was sent.
+					resolve(ctx);
+				});
+			});
+			fdc3.addIntentListener(openAppIntent, (ctx, metadata) => {
+				console.log(`Received Context For Intent: ${openAppIntent}`, ctx, metadata);
+				updateCallInformation(ctx, openAppIntent);
+			});
+		} catch (error) {
+			console.error('Error setting up all of the fdc3 listeners', error);
+		}
+	}
+	if (window.fdc3 !== undefined) {
+		setupListeners();
+	} else {
+		window.addEventListener('fdc3Ready', async () => {
+			setupListeners();
 		});
 	}
 }

diff --git a/how-to/register-with-home/public/common/views/contact/common/contacts.js b/how-to/register-with-home/public/common/views/contact/common/contacts.js
@@ -79,10 +79,17 @@ export function userToFdc3Context(user) {
  * @returns The custom settings from the manifest.
  */
 async function getManifestCustomSettings() {
-	// Get the manifest for the current application
-	const app = await fin.Application.getCurrent();
+	try {
+		if (window.fin) {
+			// Get the manifest for the current application
+			const app = await fin.Application.getCurrent();
 
-	// Extract the custom settings for this application
-	const manifest = await app.getManifest();
-	return manifest.customSettings ?? {};
+			// Extract the custom settings for this application
+			const manifest = await app.getManifest();
+			return manifest.customSettings ?? {};
+		}
+	} catch {
+		// not inside of an OpenFin container or there isn't app support.
+	}
+	return {};
 }
diff --git a/how-to/register-with-home/public/common/views/contact/investments-and-models/index.html b/how-to/register-with-home/public/common/views/contact/investments-and-models/index.html
@@ -6,6 +6,7 @@
 		<title>Investments &amp; Models</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js"></script>
 	</head>
 

diff --git a/how-to/register-with-home/public/common/views/contact/investments-and-models/index.js b/how-to/register-with-home/public/common/views/contact/investments-and-models/index.js
@@ -2,9 +2,24 @@
  * Initialize the DOM.
  */
 function initializeDOM() {
-	if (window.fdc3) {
+	if (window.fdc3 !== undefined) {
+		setupListeners();
+	} else {
+		window.addEventListener('fdc3Ready', async () => {
+			setupListeners();
+		});
+	}
+}
+
+/**
+ * Sets up the related fdc3 listeners once fdc3 is available.
+ */
+function setupListeners() {
+	try {
 		window.fdc3.addContextListener(contextHandler);
 		window.fdc3.addIntentListener('ViewContact', contextHandler);
+	} catch (error) {
+		console.error('There was an error while setting up all of the fdc3 listeners', error);
 	}
 }
 

diff --git a/how-to/register-with-home/public/common/views/contact/participant-history/index.html b/how-to/register-with-home/public/common/views/contact/participant-history/index.html
@@ -6,6 +6,7 @@
 		<title>Participant History</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js"></script>
 	</head>
 

diff --git a/how-to/register-with-home/public/common/views/contact/participant-history/index.js b/how-to/register-with-home/public/common/views/contact/participant-history/index.js
@@ -2,9 +2,24 @@
  * Initialize the DOM.
  */
 function initializeDOM() {
-	if (window.fdc3) {
+	if (window.fdc3 !== undefined) {
+		setupListeners();
+	} else {
+		window.addEventListener('fdc3Ready', async () => {
+			setupListeners();
+		});
+	}
+}
+
+/**
+ * Sets up the related fdc3 listeners once fdc3 is available.
+ */
+function setupListeners() {
+	try {
 		window.fdc3.addContextListener(contextHandler);
 		window.fdc3.addIntentListener('ViewContact', contextHandler);
+	} catch (error) {
+		console.error('There was an error while setting up all of the fdc3 listeners', error);
 	}
 }
 

diff --git a/how-to/register-with-home/public/common/views/contact/participant-selection/index.html b/how-to/register-with-home/public/common/views/contact/participant-selection/index.html
@@ -6,6 +6,7 @@
 		<title>Participant Selection</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js" type="module"></script>
 		<style>
 			.profile-pic {

diff --git a/how-to/register-with-home/public/common/views/contact/participant-selection/index.js b/how-to/register-with-home/public/common/views/contact/participant-selection/index.js
@@ -6,83 +6,92 @@ window.addEventListener('DOMContentLoaded', initializeDOM);
  * Initialize the DOM.
  */
 async function initializeDOM() {
-	if (window.fdc3) {
-		await usersModule.initialize();
-
-		let hasViewContactIntentHandler = false;
-		try {
-			const info = await fin.me.interop.getInfoForIntent({
-				name: 'ViewContact'
-			});
-			if (info) {
-				hasViewContactIntentHandler = true;
-			}
-		} catch {}
-
-		if (!hasViewContactIntentHandler) {
-			console.warn('No ViewContact intent handler is available, will not show Raise Intent button');
+	if (window.fdc3 !== undefined) {
+		setupListeners();
+	} else {
+		window.addEventListener('fdc3Ready', async () => {
+			setupListeners();
+		});
+	}
+}
+
+/**
+ * Sets up the related fdc3 listeners once fdc3 is available.
+ */
+async function setupListeners() {
+	await usersModule.initialize();
+
+	let hasViewContactIntentHandler = false;
+	try {
+		const info = await fdc3.findIntent('ViewContact');
+		if (info) {
+			hasViewContactIntentHandler = true;
 		}
+	} catch {}
 
-		const users = usersModule.getUsers();
+	if (!hasViewContactIntentHandler) {
+		console.warn('No ViewContact intent handler is available, will not show Raise Intent button');
+	}
 
-		const tbody = document.querySelector('tbody');
+	const users = usersModule.getUsers();
 
-		for (const user of users) {
-			const image = document.createElement('img');
-			image.src = usersModule.getProfilePic(user);
-			image.width = 28;
-			image.height = 28;
-			image.classList.add('profile-pic');
-			image.style.borderRadius = '5px';
+	const tbody = document.querySelector('tbody');
 
-			const imageCell = document.createElement('td');
-			imageCell.append(image);
+	for (const user of users) {
+		const image = document.createElement('img');
+		image.src = usersModule.getProfilePic(user);
+		image.width = 28;
+		image.height = 28;
+		image.classList.add('profile-pic');
+		image.style.borderRadius = '5px';
 
-			const dateCell = document.createElement('td');
-			dateCell.textContent = user.interactionDate;
+		const imageCell = document.createElement('td');
+		imageCell.append(image);
 
-			const nameCell = document.createElement('td');
-			nameCell.textContent = user.name;
+		const dateCell = document.createElement('td');
+		dateCell.textContent = user.interactionDate;
 
-			const emailCell = document.createElement('td');
-			emailCell.textContent = user.email;
+		const nameCell = document.createElement('td');
+		nameCell.textContent = user.name;
 
-			const typeCell = document.createElement('td');
-			typeCell.textContent = user.interactionType;
+		const emailCell = document.createElement('td');
+		emailCell.textContent = user.email;
 
-			const actionRow = document.createElement('div');
-			actionRow.classList.add('row');
-			actionRow.classList.add('gap10');
+		const typeCell = document.createElement('td');
+		typeCell.textContent = user.interactionType;
 
-			const actionCell = document.createElement('td');
-			actionCell.append(actionRow);
+		const actionRow = document.createElement('div');
+		actionRow.classList.add('row');
+		actionRow.classList.add('gap10');
 
-			const row = document.createElement('tr');
-			row.append(imageCell);
-			row.append(dateCell);
-			row.append(nameCell);
-			row.append(emailCell);
-			row.append(typeCell);
-			row.append(actionCell);
+		const actionCell = document.createElement('td');
+		actionCell.append(actionRow);
 
-			const selectButton = document.createElement('button');
-			selectButton.textContent = 'Select';
-			selectButton.classList.add('small');
-			selectButton.addEventListener('click', () => selectParticipant(user));
+		const row = document.createElement('tr');
+		row.append(imageCell);
+		row.append(dateCell);
+		row.append(nameCell);
+		row.append(emailCell);
+		row.append(typeCell);
+		row.append(actionCell);
 
-			actionRow.append(selectButton);
+		const selectButton = document.createElement('button');
+		selectButton.textContent = 'Select';
+		selectButton.classList.add('small');
+		selectButton.addEventListener('click', () => selectParticipant(user));
 
-			if (hasViewContactIntentHandler) {
-				const raiseIntentButton = document.createElement('button');
-				raiseIntentButton.textContent = 'Raise Intent';
-				raiseIntentButton.classList.add('small');
-				raiseIntentButton.classList.add('secondary');
-				raiseIntentButton.addEventListener('click', () => raiseIntent(user));
-				actionRow.append(raiseIntentButton);
-			}
+		actionRow.append(selectButton);
 
-			tbody.append(row);
+		if (hasViewContactIntentHandler) {
+			const raiseIntentButton = document.createElement('button');
+			raiseIntentButton.textContent = 'Raise Intent';
+			raiseIntentButton.classList.add('small');
+			raiseIntentButton.classList.add('secondary');
+			raiseIntentButton.addEventListener('click', () => raiseIntent(user));
+			actionRow.append(raiseIntentButton);
 		}
+
+		tbody.append(row);
 	}
 }
 

diff --git a/how-to/register-with-home/public/common/views/contact/participant-summary/index.html b/how-to/register-with-home/public/common/views/contact/participant-summary/index.html
@@ -6,6 +6,7 @@
 		<title>Participant Summary</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js" type="module"></script>
 		<script type="module" src="../../../lib/wc-fin/wc-fin.esm.js"></script>
 		<style>

diff --git a/how-to/register-with-home/public/common/views/contact/participant-summary/index.js b/how-to/register-with-home/public/common/views/contact/participant-summary/index.js
@@ -7,14 +7,30 @@ window.addEventListener('DOMContentLoaded', initializeDOM);
  */
 async function initializeDOM() {
 	const contextPicker = document.querySelector('#context-group-picker');
-	contextPicker.style.display = fin.me.isWindow ? 'block' : 'none';
+	if (window.fin) {
+		contextPicker.style.display = fin.me.isWindow ? 'block' : 'none';
+	}
+
+	if (window.fdc3 !== undefined) {
+		setupListeners();
+	} else {
+		window.addEventListener('fdc3Ready', async () => {
+			setupListeners();
+		});
+	}
+}
 
-	if (window.fdc3) {
+/**
+ * Sets up the related fdc3 listeners once fdc3 is available.
+ */
+async function setupListeners() {
+	try {
 		await usersModule.initialize();
 
 		window.fdc3.addContextListener(contextHandler);
-
 		window.fdc3.addIntentListener('ViewContact', contextHandler);
+	} catch (error) {
+		console.error('There was an error while setting up all of the fdc3 listeners', error);
 	}
 }
 

diff --git a/how-to/register-with-store/public/common/views/contact/call-app/index.html b/how-to/register-with-store/public/common/views/contact/call-app/index.html
@@ -6,6 +6,7 @@
 		<title>Call Application</title>
 		<link rel="icon" type="image/x-icon" href="../../../../favicon.ico" />
 		<link rel="stylesheet" href="../../../style/app.css" />
+		<script src="https://built-on-openfin.github.io/web-starter/web/v18.0.0/web-client-api/js/shim.api.bundle.js"></script>
 		<script defer="defer" src="./index.js"></script>
 	</head>