@openfin/core-web 0.46.81 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/out/api-client.cjs.js +1 -1
- package/out/api-client.d.ts +1 -1
- package/out/api-client.esm.js +1 -1
- package/out/docs/assets/hierarchy.js +1 -0
- package/out/docs/assets/highlight.css +23 -23
- package/out/docs/assets/icons.js +1 -1
- package/out/docs/assets/icons.svg +1 -1
- package/out/docs/assets/main.js +5 -5
- package/out/docs/assets/navigation.js +1 -1
- package/out/docs/assets/search.js +1 -1
- package/out/docs/assets/style.css +1443 -1288
- package/out/docs/documents/OpenFin_Web_Application_Developer_Guide.html +93 -20
- package/out/docs/documents/Platform_Developer_Guide.html +114 -33
- package/out/docs/functions/_openfin_core-web.connect.html +77 -0
- package/out/docs/functions/_openfin_core-web_iframe-broker.init.html +40 -0
- package/out/docs/functions/_openfin_core-web_iframe-broker.rejectConnections.html +40 -0
- package/out/docs/hierarchy.html +28 -0
- package/out/docs/index.html +38 -6
- package/out/docs/interfaces/_openfin_core-web.CustomLogger.html +63 -0
- package/out/docs/modules/_openfin_core-web.html +56 -0
- package/out/docs/modules/_openfin_core-web_iframe-broker.html +53 -0
- package/out/docs/modules/_openfin_core-web_shared-worker.html +40 -0
- package/out/docs/types/_openfin_core-web.BaseConfig.html +66 -0
- package/out/docs/types/_openfin_core-web.BaseConnectionOptions.html +65 -0
- package/out/docs/types/_openfin_core-web.ConnectConfig.html +31 -0
- package/out/docs/types/_openfin_core-web.InheritModeConnectConfig.html +57 -0
- package/out/docs/types/_openfin_core-web.StandAloneConnectConfig.html +51 -0
- package/out/docs/types/_openfin_core-web.ViewComponentConfig.html +31 -0
- package/out/docs/types/_openfin_core-web.WebCreateLayoutOptions.html +31 -0
- package/out/docs/types/_openfin_core-web.WebLayoutComponent.html +35 -0
- package/out/docs/types/_openfin_core-web.WebLayoutInitOptions.html +45 -0
- package/out/docs/types/_openfin_core-web.WebLayoutManager.html +31 -0
- package/out/docs/types/_openfin_core-web.WebLayoutOptions.html +35 -0
- package/out/docs/types/_openfin_core-web.WebLayoutPlatformOptions.html +55 -0
- package/out/docs/types/_openfin_core-web.WebLayoutSettings.html +63 -0
- package/out/docs/types/_openfin_core-web.WebLayoutSnapshot.html +51 -0
- package/out/docs/types/_openfin_core-web_iframe-broker.ConnectionOptions.html +63 -0
- package/out/docs/variables/_openfin_core-web_shared-worker.default.html +31 -0
- package/out/iframe-broker.cjs.js +1 -1
- package/out/iframe-broker.esm.js +1 -1
- package/out/main-0668312a.js +3 -0
- package/out/main-2a730983.js +1 -0
- package/out/main-689bb8a4.js +3 -0
- package/out/main-9538ff15.js +1 -0
- package/out/shared-worker.js +1 -1
- package/package.json +2 -2
- package/out/docs/functions/_openfin_core_web.connect.html +0 -18
- package/out/docs/functions/_openfin_core_web_iframe_broker.init.html +0 -1
- package/out/docs/functions/_openfin_core_web_iframe_broker.rejectConnections.html +0 -1
- package/out/docs/interfaces/_openfin_core_web.CustomLogger.html +0 -5
- package/out/docs/modules/_openfin_core_web.html +0 -22
- package/out/docs/modules/_openfin_core_web_iframe_broker.html +0 -10
- package/out/docs/modules/_openfin_core_web_shared_worker.html +0 -4
- package/out/docs/types/_openfin_core_web.BaseConfig.html +0 -5
- package/out/docs/types/_openfin_core_web.BaseConnectionOptions.html +0 -4
- package/out/docs/types/_openfin_core_web.ConnectConfig.html +0 -1
- package/out/docs/types/_openfin_core_web.InheritModeConnectConfig.html +0 -14
- package/out/docs/types/_openfin_core_web.StandAloneConnectConfig.html +0 -9
- package/out/docs/types/_openfin_core_web.ViewComponentConfig.html +0 -1
- package/out/docs/types/_openfin_core_web.WebCreateLayoutOptions.html +0 -1
- package/out/docs/types/_openfin_core_web.WebLayoutComponent.html +0 -4
- package/out/docs/types/_openfin_core_web.WebLayoutInitOptions.html +0 -7
- package/out/docs/types/_openfin_core_web.WebLayoutManager.html +0 -1
- package/out/docs/types/_openfin_core_web.WebLayoutOptions.html +0 -4
- package/out/docs/types/_openfin_core_web.WebLayoutPlatformOptions.html +0 -1
- package/out/docs/types/_openfin_core_web.WebLayoutSettings.html +0 -18
- package/out/docs/types/_openfin_core_web.WebLayoutSnapshot.html +0 -1
- package/out/docs/types/_openfin_core_web_iframe_broker.ConnectionOptions.html +0 -1
- package/out/docs/variables/_openfin_core_web_shared_worker.default.html +0 -1
- package/out/main-7c948abe.js +0 -3
- package/out/main-7ee71db8.js +0 -3
- package/out/main-99647eab.js +0 -1
- package/out/main-d7cc4681.js +0 -1
|
@@ -1,96 +1,177 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Platform Developer Guide | @openfin/core-web</title><meta name="description" content="Documentation for @openfin/core-web"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"
|
|
2
|
-
<
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Platform Developer Guide | @openfin/core-web</title><meta name="description" content="Documentation for @openfin/core-web"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar">
|
|
2
|
+
<div class="tsd-toolbar-contents container"><a href="../index.html" class="title">@openfin/core-web</a>
|
|
3
|
+
<div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/>
|
|
4
|
+
<ul role="listbox" id="tsd-search-results"></ul>
|
|
5
|
+
<div id="tsd-search-status" aria-live="polite" aria-atomic="true">
|
|
6
|
+
<div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header>
|
|
7
|
+
<div class="container container-main">
|
|
8
|
+
<div class="col-content">
|
|
9
|
+
<div class="tsd-page-title">
|
|
10
|
+
<ul class="tsd-breadcrumb" aria-label="Breadcrumb">
|
|
11
|
+
<li><a href="" aria-current="page">Platform Developer Guide</a></li></ul></div>
|
|
12
|
+
<div class="tsd-panel tsd-typography"><h1 id="platform-developer-guide" class="tsd-anchor-link">Platform Developer Guide<a href="#platform-developer-guide" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1>
|
|
13
|
+
<p>If you are a Platform owner who wants to include OpenFin's web capabilities in your platform, there are a few steps required. This section will guide you through the process of setting up an environment. Please note, none of these steps are necessary for content developers (See the <a href="OpenFin_Web_Application_Developer_Guide.html">content developer guide</a>).</p>
|
|
14
|
+
<h2 id="first-steps" class="tsd-anchor-link">First Steps<a href="#first-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
15
|
+
<p>Ensure that <code>@openfin/core-web</code> is installed by running the following command:</p>
|
|
3
16
|
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">@openfin/core-web</span><span class="hl-1"> </span><span class="hl-3">-S</span>
|
|
4
17
|
</code><button type="button">Copy</button></pre>
|
|
5
18
|
|
|
6
|
-
<
|
|
19
|
+
<h3 id="host-the-shared-worker" class="tsd-anchor-link">Host the <code>@openfin/core-web</code> Shared Worker<a href="#host-the-shared-worker" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
20
|
+
<p>An <code>@openfin/core-web/shared-worker</code> entry point is included in this package's distribution. This is a non-customizable, standalone piece of javascript that must be hosted on your server for <code>@openfin/core-web</code> to function.</p>
|
|
7
21
|
<p>This file has already been bundled, which means you just need to host it on a web server on a known URL.</p>
|
|
8
|
-
<
|
|
22
|
+
<h2 id="build-a-web-broker" class="tsd-anchor-link">Build a Web Broker<a href="#build-a-web-broker" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
23
|
+
<p>An HTML page, loaded as a hidden iframe by clients, must be hosted in the same origin as the <code>@openfin/shared-worker</code>. This iframe acts as a gatekeeper to the <code>shared-worker</code> and therefore must be hosted on the same domain.</p>
|
|
9
24
|
<p>In order to build a Web Broker, the following requirements must be met:</p>
|
|
10
25
|
<ol>
|
|
11
26
|
<li>
|
|
12
|
-
<p>You must host the <code>@openfin/core-web/shared-worker</code> bundle on a domain (for example <a href="https://www.example.com/mysharedworker.js"
|
|
27
|
+
<p>You must host the <code>@openfin/core-web/shared-worker</code> bundle on a domain (for example <a href="https://www.example.com/mysharedworker.js">https://www.example.com/mysharedworker.js</a>).</p>
|
|
13
28
|
</li>
|
|
14
29
|
<li>
|
|
15
|
-
<p>You must host a web broker page on that same domain (for example, <a href="https://www.example.com/web-broker"
|
|
30
|
+
<p>You must host a web broker page on that same domain (for example, <a href="https://www.example.com/web-broker">https://www.example.com/web-broker</a>).</p>
|
|
16
31
|
</li>
|
|
17
32
|
<li>
|
|
18
33
|
<p>That page must call <code>init</code> from <code>@openfin/core-web/iframe-broker</code> with the URL of the shared worker hosted in step 1.</p>
|
|
19
|
-
<pre><code class="typescript"><span class="hl-
|
|
34
|
+
<pre><code class="typescript"><span class="hl-4">// Runs on https://www.example.com/web-broker</span><br/><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">init</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web/iframe-broker'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">sharedWorkerUrl</span><span class="hl-1"> = </span><span class="hl-2">'https://www.example.com/mysharedworker.js'</span><span class="hl-1">;</span><br/><br/><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">init</span><span class="hl-1">({ </span><span class="hl-6">sharedWorkerUrl</span><span class="hl-1"> });</span>
|
|
20
35
|
</code><button type="button">Copy</button></pre>
|
|
21
36
|
|
|
22
37
|
</li>
|
|
23
38
|
</ol>
|
|
24
39
|
<p>Here is a basic example of hosting a Web Broker:</p>
|
|
25
|
-
<
|
|
40
|
+
<h3 id="example-set-up-a-basic-web-broker" class="tsd-anchor-link">Example: Set up a Basic Web Broker<a href="#example-set-up-a-basic-web-broker" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
41
|
+
<p>First, host <code>@openfin/core-web/shared-worker</code> at <code>/openfin-shared-worker.js</code></p>
|
|
26
42
|
<p>File: iframe-broker.html</p>
|
|
27
|
-
<pre><code class="html"><span class="hl-
|
|
43
|
+
<pre><code class="html"><span class="hl-8"><</span><span class="hl-9">html</span><span class="hl-8">></span><br/><span class="hl-1"> </span><span class="hl-8"><</span><span class="hl-9">body</span><span class="hl-8">></span><br/><span class="hl-1"> </span><span class="hl-8"><</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">src</span><span class="hl-10">=</span><span class="hl-12">"iframe-broker.js"</span><span class="hl-8">></</span><span class="hl-9">script</span><span class="hl-8">></span><br/><span class="hl-1"> </span><span class="hl-8"></</span><span class="hl-9">body</span><span class="hl-8">></span><br/><span class="hl-8"></</span><span class="hl-9">html</span><span class="hl-8">></span>
|
|
28
44
|
</code><button type="button">Copy</button></pre>
|
|
29
45
|
|
|
30
46
|
<p>File: iframe-broker.js</p>
|
|
31
|
-
<pre><code class="typescript"><span class="hl-
|
|
47
|
+
<pre><code class="typescript"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">init</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web/iframe-broker'</span><span class="hl-1">;</span><br/><br/><span class="hl-0">init</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">sharedWorkerUrl:</span><span class="hl-1"> </span><span class="hl-2">`</span><span class="hl-3">${</span><span class="hl-6">location</span><span class="hl-10">.</span><span class="hl-6">origin</span><span class="hl-3">}</span><span class="hl-2">/openfin-shared-worker.js`</span><br/><span class="hl-1">});</span>
|
|
32
48
|
</code><button type="button">Copy</button></pre>
|
|
33
49
|
|
|
34
|
-
<
|
|
50
|
+
<h2 id="reject-connections" class="tsd-anchor-link">Reject Connections<a href="#reject-connections" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
51
|
+
<p>As an owner of an Iframe Broker, you should first rely on existing web security tools such as the frame-ancestors CSP rule to prevent content from connecting to you which you don't expect.</p>
|
|
35
52
|
<p><code>@openfin/core-web</code> exposes a <code>rejectConnections</code> utility if you wish to implement custom rejection logic. If neither <code>init</code> or <code>rejectConnection</code> is invoked, an embedding client may hang indefinitely.</p>
|
|
36
|
-
<
|
|
53
|
+
<h3 id="example-reject-a-cross-origin-connection-using" class="tsd-anchor-link">Example: Reject a Cross Origin Connection using <code>@openfin/core-web/iframe-broker</code><a href="#example-reject-a-cross-origin-connection-using" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
54
|
+
<pre><code class="typescript"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">init</span><span class="hl-1">, </span><span class="hl-6">rejectConnections</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web/iframe-broker'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// If the origins do not match.</span><br/><span class="hl-5">if</span><span class="hl-1"> (</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">URL</span><span class="hl-1">(</span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-6">referrer</span><span class="hl-1">).</span><span class="hl-6">origin</span><span class="hl-1"> !== </span><span class="hl-6">location</span><span class="hl-1">.</span><span class="hl-6">origin</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">rejectConnections</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">reason:</span><span class="hl-1"> </span><span class="hl-2">'Connections from this domain are not supported'</span><span class="hl-1"> </span><span class="hl-4">// Reason allows an error to be returned to the connecting client.</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">} </span><span class="hl-5">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">init</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">sharedWorkerUrl:</span><span class="hl-1"> </span><span class="hl-2">`</span><span class="hl-3">${</span><span class="hl-6">location</span><span class="hl-10">.</span><span class="hl-6">origin</span><span class="hl-3">}</span><span class="hl-2">/openfin-shared-worker.js`</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
|
37
55
|
</code><button type="button">Copy</button></pre>
|
|
38
56
|
|
|
39
|
-
<
|
|
40
|
-
<
|
|
57
|
+
<h2 id="experimental-enable-cross-tab-support" class="tsd-anchor-link">Experimental: Enable Cross Tab Support<a href="#experimental-enable-cross-tab-support" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
58
|
+
<p>By default, <code>@openfin/core-web</code> disables the sharing of connections across browser Tabs. However, this feature may be enabled by specifying the following flag in an IFrame Broker:</p>
|
|
59
|
+
<h3 id="example-enable-cross-tab-support" class="tsd-anchor-link">Example: Enable Cross Tab Support<a href="#example-enable-cross-tab-support" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
60
|
+
<pre><code class="typescript"><span class="hl-0">init</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">sharedWorkerUrl:</span><span class="hl-1"> </span><span class="hl-2">`</span><span class="hl-3">${</span><span class="hl-6">location</span><span class="hl-10">.</span><span class="hl-6">origin</span><span class="hl-3">}</span><span class="hl-2">/openfin-shared-worker.js`</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">experimental:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">crossTab:</span><span class="hl-1"> </span><span class="hl-2">'same-site'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
41
61
|
</code><button type="button">Copy</button></pre>
|
|
42
62
|
|
|
43
|
-
<
|
|
44
|
-
<
|
|
63
|
+
<h3 id="example-enable-loglevel-for-debugging" class="tsd-anchor-link">Example: Enable logLevel for Debugging<a href="#example-enable-loglevel-for-debugging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
64
|
+
<p><code>@openfin/core-web</code> features configurable logging using the <code>logLevel</code> connection option. It accepts the following values: <code>'debug'</code>, <code>'info'</code>, <code>'warn'</code>, <code>'error'</code>, <code>'none'</code>. By default it is set to <code>'error'</code>. Change the level to see more information in the console:</p>
|
|
65
|
+
<pre><code class="typescript"><span class="hl-0">init</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">sharedWorkerUrl:</span><span class="hl-1"> </span><span class="hl-2">`</span><span class="hl-3">${</span><span class="hl-6">location</span><span class="hl-10">.</span><span class="hl-6">origin</span><span class="hl-3">}</span><span class="hl-2">/openfin-shared-worker.js`</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">logLevel:</span><span class="hl-1"> </span><span class="hl-2">'debug'</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">fin</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">connect</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">connectionInheritance:</span><span class="hl-1"> </span><span class="hl-2">'enabled'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">options:</span><span class="hl-1"> { </span><span class="hl-6">brokerUrl</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">platform:</span><span class="hl-1"> { </span><span class="hl-6">layoutSnapshot</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">logLevel:</span><span class="hl-1"> </span><span class="hl-2">'debug'</span><br/><span class="hl-1">});</span>
|
|
45
66
|
</code><button type="button">Copy</button></pre>
|
|
46
67
|
|
|
47
|
-
<
|
|
68
|
+
<h3 id="example-capture-debug-logs-to-your-own-services" class="tsd-anchor-link">Example: Capture debug logs to your own services<a href="#example-capture-debug-logs-to-your-own-services" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
69
|
+
<p><code>@openfin/core-web</code> enables capturing logs via an optional <code>logger</code> connection option. It accepts an implementation of <code>CustomLogger</code>, which allows you to forward logs to your own logging infrastructure or external services.</p>
|
|
48
70
|
<p>The <code>CustomLogger</code> interface requires four methods: <code>debug</code>, <code>info</code>, <code>warn</code>, and <code>error</code>, each accepting a string message.</p>
|
|
49
|
-
<pre><code class="typescript"><span class="hl-
|
|
71
|
+
<pre><code class="typescript"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">connect</span><span class="hl-1">, </span><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">CustomLogger</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">myLogger</span><span class="hl-1">: </span><span class="hl-13">CustomLogger</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">debug</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">message</span><span class="hl-1">: </span><span class="hl-13">string</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {...},</span><br/><span class="hl-1"> </span><span class="hl-0">info</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">message</span><span class="hl-1">: </span><span class="hl-13">string</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {...},</span><br/><span class="hl-1"> </span><span class="hl-0">warn</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">message</span><span class="hl-1">: </span><span class="hl-13">string</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {...},</span><br/><span class="hl-1"> </span><span class="hl-0">error</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">message</span><span class="hl-1">: </span><span class="hl-13">string</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {...}</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">fin</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">connect</span><span class="hl-1">({</span><br/><span class="hl-1"> ...,</span><br/><span class="hl-1"> </span><span class="hl-6">logger:</span><span class="hl-1"> </span><span class="hl-6">myLogger</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">logLevel:</span><span class="hl-1"> </span><span class="hl-2">'debug'</span><br/><span class="hl-1">});</span>
|
|
50
72
|
</code><button type="button">Copy</button></pre>
|
|
51
73
|
|
|
52
74
|
<blockquote>
|
|
53
75
|
<p><strong>Note:</strong> The <code>logger</code> option respects the <code>logLevel</code> setting. Only messages at or above the specified level will get propagated.</p>
|
|
54
76
|
</blockquote>
|
|
55
77
|
<p>Similar functionality exists for setting up a web broker:</p>
|
|
56
|
-
<pre><code class="typescript"><span class="hl-
|
|
78
|
+
<pre><code class="typescript"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">init</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web/iframe-broker'</span><span class="hl-1">;</span><br/><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">CustomLogger</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web'</span><span class="hl-1">;</span><br/><br/><span class="hl-0">init</span><span class="hl-1">({</span><br/><span class="hl-1"> ...,</span><br/><span class="hl-1"> </span><span class="hl-6">logger:</span><span class="hl-1"> </span><span class="hl-6">myLogger</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">logLevel:</span><span class="hl-1"> </span><span class="hl-2">'debug'</span><br/><span class="hl-1">});</span>
|
|
57
79
|
</code><button type="button">Copy</button></pre>
|
|
58
80
|
|
|
59
|
-
<
|
|
81
|
+
<h2 id="create-layouts" class="tsd-anchor-link">Create Layouts<a href="#create-layouts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
82
|
+
<p>Layouts in the web are very similar to the desktop OpenFin environment. They consist of a layout configuration that describes the rows/columns/view components. The major difference is that the <code>layout</code> key is not supported. Instead, we expose the <code>layoutSnapshot</code> key to plug into the multiple-layout architecture. See the <a href="https://developers.openfin.co/of-docs/docs/multi-layouts">Multi-Layout guide</a> for more information on how to set it up.</p>
|
|
60
83
|
<p>Note that you can achieve a single layout by having only 1 key in your <code>layoutSnapshot</code>:</p>
|
|
61
|
-
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-
|
|
84
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">layoutSnapshot</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">layouts:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">layout:</span><span class="hl-1"> { ... }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
|
62
85
|
</code><button type="button">Copy</button></pre>
|
|
63
86
|
|
|
64
87
|
<p>The JSON structure of the underlying layout options is interchangeable, though not identical, between Desktop and Web. Web Layout Snapshots have an optional <code>web</code> property within the view <code>componentState</code> options which stores web specific properties. This <code>web</code> property is ignored on desktop.</p>
|
|
65
|
-
<
|
|
88
|
+
<h3 id="layout-settings" class="tsd-anchor-link">Layout Settings<a href="#layout-settings" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
89
|
+
<p>Layouts in the web support the following <a href="https://cdn.openfin.co/docs/javascript/stable/interfaces/OpenFin.LayoutOptions.html#settings"><code>LayoutOptions.settings</code></a>:</p>
|
|
66
90
|
<ul>
|
|
67
91
|
<li><code>reorderEnabled</code> (Default value <strong>true</strong>): If true, users can re-arrange the layout by dragging items by their tabs to the desired location. Note, unlike in an OpenFin environment the dragging of items is limited to the current window.</li>
|
|
68
92
|
<li><code>hasHeaders</code> (Default value <strong>true</strong>): Turns tab headers on or off. If false, the layout will be displayed with splitters only.</li>
|
|
69
93
|
<li><code>preventSplitterResize</code> (Default value <strong>false</strong>): When true the splitters will not be draggable and the layout will not resize.</li>
|
|
70
94
|
<li><code>showMaximiseIcon</code> (Default value <strong>false</strong>): Enables maximise button for stacks. The button maximises the current tab to fill the entire layout container.</li>
|
|
71
95
|
</ul>
|
|
72
|
-
<
|
|
73
|
-
<
|
|
96
|
+
<h3 id="permissions" class="tsd-anchor-link"><code><iframe></code> Permissions<a href="#permissions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
97
|
+
<p>To enable web API usage in iframes view <code>componentState</code> includes a <code>permissions</code> field which maps to <code>allow</code> attributes in view iframes to enable web APIs. Currently the only supported values are <code>'clipboard-read'</code> and <code>'clipboard-sanitized-write'</code>.</p>
|
|
98
|
+
<h4 id="example-snapshot-with-clipboard-permissions-enabled" class="tsd-anchor-link">Example: Snapshot with Clipboard Permissions Enabled<a href="#example-snapshot-with-clipboard-permissions-enabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4>
|
|
99
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">layoutSnapshot</span><span class="hl-1">: </span><span class="hl-13">WebLayoutSnapshot</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">layouts:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">tab1:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'row'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'stack'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">'Example'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'component'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentName:</span><span class="hl-1"> </span><span class="hl-2">'view'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentState:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">url:</span><span class="hl-1"> </span><span class="hl-2">'http://example.com/'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">permissions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">webAPIs:</span><span class="hl-1"> [</span><span class="hl-2">'clipboard-read'</span><span class="hl-1">, </span><span class="hl-2">'clipboard-sanitized-write'</span><span class="hl-1">]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">};</span>
|
|
74
100
|
</code><button type="button">Copy</button></pre>
|
|
75
101
|
|
|
76
|
-
<
|
|
77
|
-
<
|
|
102
|
+
<h3 id="example-retrieve-a-layoutsnapshot-from-both-desktop-and-web-environments" class="tsd-anchor-link">Example: Retrieve a layoutSnapshot from both desktop and web environments<a href="#example-retrieve-a-layoutsnapshot-from-both-desktop-and-web-environments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
103
|
+
<p>From within your OpenFin v34+ Desktop environment, retrieve the current layoutSnapshot:</p>
|
|
104
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">layoutManager</span><span class="hl-1"> = </span><span class="hl-6">fin</span><span class="hl-1">.</span><span class="hl-6">Platform</span><span class="hl-1">.</span><span class="hl-6">Layout</span><span class="hl-1">.</span><span class="hl-0">getCurrentLayoutManagerSync</span><span class="hl-1">();</span><br/><span class="hl-4">// returns an object like: { layouts: { ... } } where each key in layouts.<key> is it's own separate layout configuration</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">layoutSnapshot</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-6">layoutManager</span><span class="hl-1">.</span><span class="hl-0">getLayoutSnapshot</span><span class="hl-1">();</span>
|
|
78
105
|
</code><button type="button">Copy</button></pre>
|
|
79
106
|
|
|
80
107
|
<p>Note that the <code>fin.Platform.Layout</code> API is exactly the same in web, so you can retrieve the Web Layout Snapshot using the same code.</p>
|
|
81
|
-
<
|
|
82
|
-
<
|
|
108
|
+
<h3 id="example-create-a-layoutsnapshot-with-2-layouts-and-initialize-it-via-connect-call" class="tsd-anchor-link">Example: Create a layoutSnapshot with 2 layouts and initialize it via connect call<a href="#example-create-a-layoutsnapshot-with-2-layouts-and-initialize-it-via-connect-call" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
109
|
+
<p>In order to use layouts, specify the <code>platform</code> option to the <code>connect</code> call and pass in the <code>layoutSnapshot</code>.</p>
|
|
110
|
+
<pre><code class="typescript"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-6">connect</span><span class="hl-1">, </span><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">WebLayoutSnapshot</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-2">'@openfin/core-web'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">brokerUrl</span><span class="hl-1"> = </span><span class="hl-2">'http://example.com/web-broker'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Presumably retrieved from fin.Platform.Layout.getCurrentLayoutManagerSync().getLayoutSnapshot()</span><br/><span class="hl-4">// in a v34+ Desktop environment, but also can be manually constructed like this:</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">layoutSnapshot</span><span class="hl-1">: </span><span class="hl-13">WebLayoutSnapshot</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">layouts:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">tab1:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'row'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'stack'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">'Example'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'component'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentName:</span><span class="hl-1"> </span><span class="hl-2">'view'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentState:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">url:</span><span class="hl-1"> </span><span class="hl-2">'http://example.com/'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'stack'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">'Example'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'component'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentName:</span><span class="hl-1"> </span><span class="hl-2">'view'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentState:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">url:</span><span class="hl-1"> </span><span class="hl-2">'http://example.com/'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">tab2:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'stack'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">content:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">'Example'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-2">'component'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentName:</span><span class="hl-1"> </span><span class="hl-2">'view'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">componentState:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">url:</span><span class="hl-1"> </span><span class="hl-2">'http://example.com/'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-1">(</span><span class="hl-3">async</span><span class="hl-1"> () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Connect to the OpenFin Web Broker. Pass in the `platform` key with a layoutSnapshot.</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">fin</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">connect</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">connectionInheritance:</span><span class="hl-1"> </span><span class="hl-2">'enabled'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">options:</span><span class="hl-1"> { </span><span class="hl-6">brokerUrl</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">platform:</span><span class="hl-1"> { </span><span class="hl-6">layoutSnapshot</span><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">container</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-0">getElementById</span><span class="hl-1">(</span><span class="hl-2">'layout-container'</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-4">// You may now use the `fin` object. In this case, we want to initialize and create layouts.</span><br/><span class="hl-1"> </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-6">fin</span><span class="hl-1">.</span><span class="hl-6">Platform</span><span class="hl-1">.</span><span class="hl-6">Layout</span><span class="hl-1">.</span><span class="hl-0">init</span><span class="hl-1">({ </span><span class="hl-6">container</span><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-4">// For multi-layout information see https://developers.openfin.co/of-docs/docs/multi-layouts</span><br/><span class="hl-1"> </span><span class="hl-4">// In the multi-layout case we would also call `fin.Platform.Layout.create()`.</span><br/><span class="hl-1">})();</span>
|
|
83
111
|
</code><button type="button">Copy</button></pre>
|
|
84
112
|
|
|
85
113
|
<p>Note that cross-tab support is experimental, browser-dependent and respects each browser's privacy sandbox.</p>
|
|
86
|
-
<
|
|
114
|
+
<h2 id="api-reference" class="tsd-anchor-link">API Reference<a href="#api-reference" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
115
|
+
<p>(Please note, these links work in your IDE and not on <a href="http://npmjs.com">npmjs.com</a>, we will update this soon.)</p>
|
|
87
116
|
<ul>
|
|
88
117
|
<li><a href="../out/docs/@openfin/core-web/README.md">@openfin/core-web</a></li>
|
|
89
118
|
<li><a href="../out/docs/@openfin/core-web/iframe-broker/README.md">@openfin/core-web/iframe-broker</a></li>
|
|
90
119
|
<li><a href="../out/docs/@openfin/core-web/shared-worker/README.md">@openfin/core-web/shared-worker</a></li>
|
|
91
120
|
</ul>
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
<li><a href="https://
|
|
121
|
+
<h2 id="see-also" class="tsd-anchor-link">See Also<a href="#see-also" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
122
|
+
<ul>
|
|
123
|
+
<li><a href="https://developers.openfin.co/of-docs/docs/container-overview">OpenFin Container Developer guide</a></li>
|
|
124
|
+
<li><a href="https://developer.openfin.co/docs/javascript/stable">Fin API reference</a></li>
|
|
95
125
|
</ul>
|
|
96
|
-
</div></div
|
|
126
|
+
</div></div>
|
|
127
|
+
<div class="col-sidebar">
|
|
128
|
+
<div class="page-menu">
|
|
129
|
+
<div class="tsd-navigation settings">
|
|
130
|
+
<details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>
|
|
131
|
+
<h3>Settings</h3></summary>
|
|
132
|
+
<div class="tsd-accordion-details">
|
|
133
|
+
<div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span>
|
|
134
|
+
<ul id="tsd-filter-options">
|
|
135
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
|
|
136
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div>
|
|
137
|
+
<div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
|
|
138
|
+
<details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>
|
|
139
|
+
<h3>On This Page</h3></summary>
|
|
140
|
+
<div class="tsd-accordion-details"><a href="#platform-developer-guide"><span>Platform <wbr/>Developer <wbr/>Guide</span></a>
|
|
141
|
+
<ul>
|
|
142
|
+
<li><a href="#first-steps"><span>First <wbr/>Steps</span></a></li>
|
|
143
|
+
<li>
|
|
144
|
+
<ul>
|
|
145
|
+
<li><a href="#host-the-shared-worker"><span>Host the <wbr/>Shared <wbr/>Worker</span></a></li></ul></li>
|
|
146
|
+
<li><a href="#build-a-web-broker"><span>Build a <wbr/>Web <wbr/>Broker</span></a></li>
|
|
147
|
+
<li>
|
|
148
|
+
<ul>
|
|
149
|
+
<li><a href="#example-set-up-a-basic-web-broker"><span>Example: <wbr/>Set up a <wbr/>Basic <wbr/>Web <wbr/>Broker</span></a></li></ul></li>
|
|
150
|
+
<li><a href="#reject-connections"><span>Reject <wbr/>Connections</span></a></li>
|
|
151
|
+
<li>
|
|
152
|
+
<ul>
|
|
153
|
+
<li><a href="#example-reject-a-cross-origin-connection-using"><span>Example: <wbr/>Reject a <wbr/>Cross <wbr/>Origin <wbr/>Connection using </span></a></li></ul></li>
|
|
154
|
+
<li><a href="#experimental-enable-cross-tab-support"><span>Experimental: <wbr/>Enable <wbr/>Cross <wbr/>Tab <wbr/>Support</span></a></li>
|
|
155
|
+
<li>
|
|
156
|
+
<ul>
|
|
157
|
+
<li><a href="#example-enable-cross-tab-support"><span>Example: <wbr/>Enable <wbr/>Cross <wbr/>Tab <wbr/>Support</span></a></li>
|
|
158
|
+
<li><a href="#example-enable-loglevel-for-debugging"><span>Example: <wbr/>Enable log<wbr/>Level for <wbr/>Debugging</span></a></li>
|
|
159
|
+
<li><a href="#example-capture-debug-logs-to-your-own-services"><span>Example: <wbr/>Capture debug logs to your own services</span></a></li></ul></li>
|
|
160
|
+
<li><a href="#create-layouts"><span>Create <wbr/>Layouts</span></a></li>
|
|
161
|
+
<li>
|
|
162
|
+
<ul>
|
|
163
|
+
<li><a href="#layout-settings"><span>Layout <wbr/>Settings</span></a></li>
|
|
164
|
+
<li><a href="#permissions"><span> <wbr/>Permissions</span></a></li>
|
|
165
|
+
<li>
|
|
166
|
+
<ul>
|
|
167
|
+
<li><a href="#example-snapshot-with-clipboard-permissions-enabled"><span>Example: <wbr/>Snapshot with <wbr/>Clipboard <wbr/>Permissions <wbr/>Enabled</span></a></li></ul></li>
|
|
168
|
+
<li><a href="#example-retrieve-a-layoutsnapshot-from-both-desktop-and-web-environments"><span>Example: <wbr/>Retrieve a layout<wbr/>Snapshot from both desktop and web environments</span></a></li>
|
|
169
|
+
<li><a href="#example-create-a-layoutsnapshot-with-2-layouts-and-initialize-it-via-connect-call"><span>Example: <wbr/>Create a layout<wbr/>Snapshot with 2 layouts and initialize it via connect call</span></a></li></ul></li>
|
|
170
|
+
<li><a href="#api-reference"><span>API <wbr/>Reference</span></a></li>
|
|
171
|
+
<li><a href="#see-also"><span>See <wbr/>Also</span></a></li></ul></div></details></div>
|
|
172
|
+
<div class="site-menu">
|
|
173
|
+
<nav class="tsd-navigation"><a href="../index.html">@openfin/core-web</a>
|
|
174
|
+
<ul class="tsd-small-nested-navigation" id="tsd-nav-container">
|
|
175
|
+
<li>Loading...</li></ul></nav></div></div></div><footer>
|
|
176
|
+
<p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer>
|
|
177
|
+
<div class="overlay"></div></body></html>
|