built-on-openfin · adam-saland · Sep 23, 2022 · Jul 20, 2022 · Jul 20, 2022 · Jul 21, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,7 +12,8 @@ module.exports = {
 		'plugin:unicorn/recommended'
 	],
 	globals: {
-		fin: 'readonly'
+		fin: 'readonly',
+		OpenFin: 'readonly'
 	},
 	ignorePatterns: [
 		'**/dist/*',
@@ -521,13 +522,7 @@ module.exports = {
 				'@typescript-eslint/prefer-string-starts-ends-with': ['error'],
 				'@typescript-eslint/prefer-ts-expect-error': ['error'],
 				'@typescript-eslint/promise-function-async': ['error'],
-				'@typescript-eslint/quotes': [
-					'error',
-					'double',
-					{
-						allowTemplateLiterals: true
-					}
-				],
+				'@typescript-eslint/quotes': ['error', 'double'],
 				'@typescript-eslint/require-array-sort-compare': ['off'],
 				'@typescript-eslint/require-await': ['off'],
 				'@typescript-eslint/restrict-plus-operands': ['error'],

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -1,8 +1,8 @@
 name: Check Linting has been applied
 
 on:
-  push:
   pull_request:
+    types: [opened, synchronize, reopened, edited]
 
 jobs:
   lint:

diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
@@ -1,8 +1,8 @@
 name: Check Prettier formatting has been applied
 
 on:
-  push:
   pull_request:
+    types: [opened, synchronize, reopened, edited]
 
 jobs:
   prettier:

diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ This repository contains examples for common use cases and API implementations.
 | [use-popup-window](./how-to/use-popup-window/)        | This example contains various examples of how to use popup windows                                 |
 | [use-window-options](./how-to/use-window-options/)    | This example demonstrates the options available for opening windows                                |
 | [use-interop](./how-to/use-interop/)                  | This example contains various implementations and use cases for the Interop API                    |
+| [use-a-manifest](./how-to/use-a-manifest/)            | This example contains various examples of how to use the OpenFin manifest                          |
 
 ## Before you get started
 

diff --git a/how-to/common/public/style/app.css b/how-to/common/public/style/app.css
@@ -194,7 +194,9 @@ footer a {
 	text-decoration: none;
 	outline: 0;
 	white-space: nowrap;
-	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+	transition-property: background-color, color, opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 a.button:hover,
@@ -333,7 +335,9 @@ textarea {
 	min-width: 200px;
 	padding: 8px 12px;
 	box-shadow: rgb(0 0 0 / 25%) 0px 4px 4px;
-	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+	transition-property: background-color, color, opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 textarea {
@@ -484,7 +488,9 @@ input[type='range']::-webkit-slider-runnable-track {
 	background-color: var(--brand-input-background);
 	border-radius: 5px;
 	box-shadow: rgb(0 0 0 / 25%) 0px 4px 4px;
-	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+	transition-property: background-color, color, opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 input[type='range']::-webkit-slider-thumb {
@@ -497,7 +503,9 @@ input[type='range']::-webkit-slider-thumb {
 	background: var(--brand-input-background);
 	cursor: pointer;
 	box-shadow: rgb(0 0 0 / 25%) 0px 4px 4px;
-	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+	transition-property: background-color, color, opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 input[type='range']:hover::-webkit-slider-runnable-track,
@@ -559,7 +567,9 @@ input[type='radio'] {
 	height: 20px;
 	margin: 2px;
 	box-shadow: rgb(0 0 0 / 25%) 0px 4px 4px;
-	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+	transition-property: background-color, color, opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 input[type='radio'] {
@@ -715,6 +725,10 @@ em {
 	padding: 20px;
 }
 
+.pad0 {
+	padding: 0px;
+}
+
 table {
 	width: 100%;
 	font-size: 10px;

diff --git a/how-to/common/types/fin.d.ts b/how-to/common/types/fin.d.ts
@@ -0,0 +1,5 @@
+import type { fin as FinApi } from "@openfin/core";
+
+declare global {
+	const fin: typeof FinApi;
+}
diff --git a/how-to/create-window/client/src/app.ts b/how-to/create-window/client/src/app.ts
@@ -1,5 +1,3 @@
-import { fin } from "@openfin/core";
-
 document.addEventListener("DOMContentLoaded", async () => {
 	try {
 		await init();
@@ -41,6 +39,18 @@ async function openDataWindow() {
 	return fin.Window.create(winOption);
 }
 
+async function openDataPlatformWindow() {
+	const viewOption = {
+		name: "childview-data",
+		url: "http://localhost:5050/html/window.html",
+		customData: {
+			dateNow: Date.now()
+		},
+		target: undefined
+	};
+	await fin.Platform.getCurrentSync().createView(viewOption);
+}
+
 async function init(): Promise<void> {
 	const btn = document.querySelector("#btn-open-dynamic-window");
 	btn.addEventListener("click", async (e: Event) => openDynamicApplicationWindow());
@@ -50,4 +60,7 @@ async function init(): Promise<void> {
 
 	const btn2 = document.querySelector("#btn-open-data-window");
 	btn2.addEventListener("click", async (e: Event) => openDataWindow());
+
+	const btn3 = document.querySelector("#btn-open-data-platform-window");
+	btn3.addEventListener("click", openDataPlatformWindow);
 }
diff --git a/how-to/create-window/client/tsconfig.json b/how-to/create-window/client/tsconfig.json
@@ -8,7 +8,9 @@
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node"
+		"importsNotUsedAsValues": "error",
+		"moduleResolution": "node",
+		"types": ["../../common/types/fin"]
 	},
 	"include": ["./src/**/*.ts"]
 }
diff --git a/how-to/create-window/public/html/app.html b/how-to/create-window/public/html/app.html
@@ -28,6 +28,9 @@ <h1 class="tag">Demonstrate how to open windows.</h1>
 			<br />
 			<label>Open Window with Data</label>
 			<button id="btn-open-data-window">Open Window</button>
+			<br />
+			<label>Open Platform Window with Data</label>
+			<button id="btn-open-data-platform-window">Open Platform Window</button>
 		</main>
 	</body>
 </html>
diff --git a/how-to/create-window/public/html/window.html b/how-to/create-window/public/html/window.html
@@ -23,8 +23,13 @@ <h1 class="tag">Receiving Data from custom options.</h1>
 
 			<script>
 				(async () => {
+					const loaded = Date.now();
 					const viewOptions = await fin.me.getOptions();
-					document.querySelector('#custom-data').textContent = JSON.stringify(viewOptions.customData);
+					document.querySelector('#custom-data').textContent = `Request Timestamp: ${
+						viewOptions?.customData?.dateNow
+					} Load Timestamp: ${loaded} Total load time in milliseconds: ${
+						Number.parseInt(loaded, 10) - Number.parseInt(viewOptions?.customData?.dateNow)
+					});`;
 				})();
 			</script>
 		</main>

diff --git a/how-to/create-window/server/tsconfig.json b/how-to/create-window/server/tsconfig.json
@@ -8,6 +8,7 @@
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
+		"importsNotUsedAsValues": "error",
 		"moduleResolution": "node"
 	},
 	"include": ["./src/**/*.ts"]

diff --git a/how-to/integration-excel/client/src/provider.ts b/how-to/integration-excel/client/src/provider.ts
@@ -1,5 +1,3 @@
-import { fin } from "@openfin/core";
-
 async function init(): Promise<void> {
 	console.log("Platform Init");
 }

diff --git a/how-to/integration-excel/client/tsconfig.json b/how-to/integration-excel/client/tsconfig.json
@@ -8,7 +8,9 @@
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node"
+		"importsNotUsedAsValues": "error",
+		"moduleResolution": "node",
+		"types": ["../../common/types/fin"]
 	},
 	"include": ["./src/**/*.ts"]
 }
diff --git a/how-to/integration-excel/public/views/excel.html b/how-to/integration-excel/public/views/excel.html
@@ -23,10 +23,10 @@ <h1 class="tag">Demonstrate integration with Excel.</h1>
 		<main class="row gap20">
 			<div class="fill col gap10 scroll-vertical">
 				<h3>Excel</h3>
-				<p>Open any Workbook in Excel to start viewing changes to it's cells.</p>
+				<p>Open Excel and select Workbook and Worksheet below to start view changes to it's cells.</p>
 				<p>
-					After selecting a worksheet enter any of the known instruments into a cell e.g. TSLA, MSFT, APPL -
-					this should send an FDC message for that instrument.
+					This example application listens for cell changes and when the value is TSLA, MSFT or AAPL it will
+					create an fdc3.instrument context object with the value as the ticker and broadcast it.
 				</p>
 				<div class="error" id="error"></div>
 				<div class="col gap20">

diff --git a/how-to/integration-excel/public/views/fdc3monitor.html b/how-to/integration-excel/public/views/fdc3monitor.html
@@ -21,7 +21,7 @@ <h1 class="tag">Demonstrate monitoring messages from Excel.</h1>
 		</header>
 
 		<main class="col gap10">
-			<p>When the Excel integration broadcasts an FDC3 Instrument, this view should see the change.</p>
+			<p>When an fdc3.instrument context is received the ticker value will be shown below.</p>
 
 			<fieldset>
 				<label for="received-instrument">Received Instrument</label>

diff --git a/how-to/integration-excel/server/tsconfig.json b/how-to/integration-excel/server/tsconfig.json
@@ -8,6 +8,7 @@
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
+		"importsNotUsedAsValues": "error",
 		"moduleResolution": "node"
 	},
 	"include": ["./src/**/*.ts"]

diff --git a/how-to/use-a-manifest/README.md b/how-to/use-a-manifest/README.md
@@ -0,0 +1,17 @@
+# How To Use A Manifest
+
+This directory contains information related to manifests and how you can use them to configure your application.
+
+## What you can do with this repository
+
+This repository contains examples showing how to configure your application differently based on what you are trying to do.
+
+### Examples
+
+| Example                                                                   | Description                                                                                                                                                                                                               |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [How To - Create a single page platform](./create-a-single-page-platform) | This is an example of how to start your move to a platform by creating a basic platform manifest that defines a single view to load a site's primary url and hides the tab to make this platform app have a single frame. |
+
+## Before you get started
+
+Read more about our [recommended development environment](https://developers.openfin.co/of-docs/docs/set-up-your-dev-environment).
diff --git a/how-to/use-a-manifest/create-a-single-page-platform/README.md b/how-to/use-a-manifest/create-a-single-page-platform/README.md
@@ -0,0 +1,45 @@
+# Demonstrate launching a site as a single page platform
+
+## How it Works
+
+The manifest file [public/manifest.fin.json](public/manifest.fin.json) has a snapshot definition. We define a single url (our starter style guide as an example) and that the view should not show a tab (so you only see the main frame). The platform does not have a custom window template (it is using the default OpenFin template with minimize, maximize and close) and it doesn't specify a custom provider url (so it does not have an initial background page running background logic). This is a simple platform definition which can act as a first step with the potential of using platform capabilities in the future.
+
+## Get Started
+
+Follow the instructions below to get up and running.
+
+### Set up the project
+
+1. Install dependencies and do the initial build. Note that these examples assume you are in the sub-directory for the example.
+
+```shell
+npm run setup
+```
+
+2. Build the project.
+
+```shell
+npm run build
+```
+
+3. Start the test server in a new window.
+
+```shell
+npm run start
+```
+
+4. Start the Platform application.
+
+```shell
+npm run client
+```
+
+### What you will see
+
+1. A single platform window show the starter style guide in a view with no tab.
+
+![Single Page Platform](./single-page-platform.png)
+
+### A note about this example
+
+This is an example of how to use OpenFin manifests to configure OpenFin Container. Its purpose is to provide an example and suggestions. **DO NOT** assume that it contains production-ready code. Please use this as a guide and provide feedback. Thanks!
diff --git a/how-to/use-a-manifest/create-a-single-page-platform/package.json b/how-to/use-a-manifest/create-a-single-page-platform/package.json
@@ -0,0 +1,26 @@
+{
+	"name": "create-a-single-page-platform",
+	"version": "0.0.1",
+	"description": "A demonstration of a one page platform that can be used as a starting point.",
+	"main": "index.js",
+	"scripts": {
+		"build": "npm run build-server",
+		"build-server": "tsc --project ./server",
+		"start": "npm run server",
+		"client": "npm --prefix ../../common/ run client",
+		"server": "node ./server/build/index.js",
+		"kill": "npm --prefix ../../common/ run kill",
+		"setup": "cd ../../../ && npm install && cd how-to/use-a-manifest/create-a-single-page-platform && npm run build",
+		"validate": "npm --prefix ../../../ run validate"
+	},
+	"author": "john.mandia@openfin.co",
+	"license": "SEE LICENSE IN LICENSE.MD",
+	"devDependencies": {
+		"express": "^4.17.2",
+		"source-map-loader": "^3.0.1",
+		"ts-loader": "^9.2.6",
+		"typescript": "^4.5.4",
+		"webpack": "^5.65.0",
+		"webpack-cli": "^4.9.1"
+	}
+}
diff --git a/how-to/use-a-manifest/create-a-single-page-platform/public/favicon.ico b/how-to/use-a-manifest/create-a-single-page-platform/public/favicon.ico
diff --git a/how-to/use-a-manifest/create-a-single-page-platform/public/manifest.fin.json b/how-to/use-a-manifest/create-a-single-page-platform/public/manifest.fin.json
@@ -0,0 +1,45 @@
+{
+	"licenseKey": "openfin-demo-license-key",
+	"runtime": {
+		"arguments": "--v=1 --inspect",
+		"version": "26.102.70.16",
+		"autoShow": false
+	},
+	"platform": {
+		"uuid": "how-to-use-a-manifest-create-a-single-page-platform",
+		"icon": "http://localhost:5050/favicon.ico"
+	},
+	"snapshot": {
+		"windows": [
+			{
+				"defaultWidth": 800,
+				"defaultHeight": 600,
+				"defaultLeft": 0,
+				"defaultTop": 0,
+				"saveWindowState": false,
+				"backgroundThrottling": true,
+				"layout": {
+					"content": [
+						{
+							"type": "stack",
+							"width": 100,
+							"isClosable": false,
+							"reorderEnabled": false,
+							"hasHeaders": false,
+							"content": [
+								{
+									"type": "component",
+									"componentName": "view",
+									"componentState": {
+										"url": "http://localhost:5050/common/style/style.html"
+									},
+									"title": "view"
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	}
+}