From 910c90b0566dcc5e4e79766a283aa7edabe7bf46 Mon Sep 17 00:00:00 2001 From: ShashiSubramnya Date: Thu, 3 Aug 2023 22:47:12 +0530 Subject: [PATCH 1/4] example update --- modules/ROOT/pages/getting-started.adoc | 88 +++++++++++++++++-------- 1 file changed, 59 insertions(+), 29 deletions(-) diff --git a/modules/ROOT/pages/getting-started.adoc b/modules/ROOT/pages/getting-started.adoc index f7e244581..7f0da29a3 100644 --- a/modules/ROOT/pages/getting-started.adoc +++ b/modules/ROOT/pages/getting-started.adoc @@ -61,13 +61,13 @@ import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk'; // NPM ; -// Makes the SDK available on global namespace window.tsembed +// Make the SDK available on global namespace window.tsembed // ES6 from web import { -LiveboardEmbed, -AuthType, -init, + LiveboardEmbed, + AuthType, + init, } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js'; ---- @@ -109,7 +109,7 @@ Use the **SearchBarEmbed** component to embed only the ThoughtSpot Search bar an [#initSdk] === Initialize the SDK -After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type. +After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type. For other supported authentication methods, see xref:embed-authentication.adoc[Authentication]. [source,JavaScript] ---- @@ -121,8 +121,6 @@ init({ thoughtSpotHost:: _String_. Hostname or IP address of the ThoughtSpot application. -For other supported authentication methods, see xref:embed-authentication.adoc[Authentication]. - == Define the object instance and properties Create an object instance and define object properties. This example shows the code sample for a Liveboard object: @@ -157,35 +155,68 @@ liveboardEmbed.render(); ---- == Code sample + +==== JavaScript [source,Javascript] ---- -// NPM -import { LiveboardEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk'; -// or ES6 -// import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js'; - -init({ - thoughtSpotHost: '<%=tshost%>', - authType: AuthType.None, +import { + LiveboardEmbed, + EmbedEvent, + HostEvent, +} from '@thoughtspot/visual-embed-sdk'; + +const lb = new LiveboardEmbed('#container', { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + runtimeFilters: [], +}); +// [Optional]: Register event listeners. +lb.on(EmbedEvent.LiveboardRendered, (e) => { + /* handler */ }); -const liveboardEmbed = new LiveboardEmbed( - document.getElementById('ts-embed'), +// Do not forget to call render. +lb.render(); + +// [Optional]: Trigger events on the lb +lb.trigger(HostEvent.UpdateRuntimeFilters, [ { - frameParams: { - width: '100%', - height: '100%', - }, - liveboardId: '<%=liveboardGUID%>', - vizId: '<%=vizGUID%>', + columnName: 'col1', + operator: RuntimeFilterOp.EQ, + values: ['val1'], }, -}); +]); +---- -liveboardEmbed.render(); +`#container` is a selector for the DOM node which the code assumes is already attached to DOM. The SDK will render the ThoughtSpot component inside this container element. -liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => { - liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']); -}); +==== React +[source,TypeScript] +---- +import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react'; + +const App = () => { + const embedRef = useEmbedRef(); + const onLiveboardRendered = () => { + embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [ + { + columnName: 'col1', + operator: RuntimeFilterOp.EQ, + values: ['val1'], + }, + ]); + }; + return ( + + ); +}; ---- //// @@ -208,4 +239,3 @@ For more information about embedding ThoughtSpot app or its objects using SDK, s * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank] * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank] * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials, window=_blank] - From 370238879be46b1b775bf7ee227bee73ea8f1b59 Mon Sep 17 00:00:00 2001 From: ShashiSubramnya Date: Thu, 3 Aug 2023 22:48:57 +0530 Subject: [PATCH 2/4] code sample update --- modules/ROOT/pages/getting-started.adoc | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/ROOT/pages/getting-started.adoc b/modules/ROOT/pages/getting-started.adoc index 7f0da29a3..7e5615304 100644 --- a/modules/ROOT/pages/getting-started.adoc +++ b/modules/ROOT/pages/getting-started.adoc @@ -115,11 +115,10 @@ After importing the package, specify the hostname or IP address of your ThoughtS ---- init({ thoughtSpotHost: "https://:", - authType: AuthType.EmbeddedSSO, + authType: , + ... // other authType dependent properties. }); ---- -thoughtSpotHost:: -_String_. Hostname or IP address of the ThoughtSpot application. == Define the object instance and properties Create an object instance and define object properties. This example shows the code sample for a Liveboard object: From 1b38116a8f4e12addf5832ca64cde2a38251453c Mon Sep 17 00:00:00 2001 From: ShashiSubramnya Date: Fri, 4 Aug 2023 23:58:11 +0530 Subject: [PATCH 3/4] link fixes --- modules/ROOT/pages/ask-docs.adoc | 2 +- modules/ROOT/pages/best-practices.adoc | 2 +- modules/ROOT/pages/code-samples.adoc | 2 +- modules/ROOT/pages/common/nav.adoc | 22 ++++++++++----------- modules/ROOT/pages/embed-pinboard.adoc | 5 ----- modules/ROOT/pages/embed-search.adoc | 7 +------ modules/ROOT/pages/embed-ts-react-app.adoc | 12 ++++++++--- modules/ROOT/pages/enable-liveboardv2.adoc | 2 +- modules/ROOT/pages/faqs.adoc | 2 +- modules/ROOT/pages/full-embed.adoc | 5 ----- modules/ROOT/pages/getting-started.adoc | 23 ++++++++++++++++------ modules/ROOT/pages/rel-page-sw.adoc | 2 +- modules/ROOT/pages/sdk-reference.adoc | 3 +-- modules/ROOT/pages/visual-embed-sdk.adoc | 2 +- 14 files changed, 46 insertions(+), 45 deletions(-) diff --git a/modules/ROOT/pages/ask-docs.adoc b/modules/ROOT/pages/ask-docs.adoc index b61f4651d..94a0326a1 100644 --- a/modules/ROOT/pages/ask-docs.adoc +++ b/modules/ROOT/pages/ask-docs.adoc @@ -1,7 +1,7 @@ = Ask Docs :toc: true -:page-title: Ask TSE Docs +:page-title: Ask Visual Embed SDK Docs :page-pageid: ask-docs :page-description: ThoughtSpot Embed SDK docs GPT Q&A diff --git a/modules/ROOT/pages/best-practices.adoc b/modules/ROOT/pages/best-practices.adoc index 9f3a2751f..1f0cd1161 100644 --- a/modules/ROOT/pages/best-practices.adoc +++ b/modules/ROOT/pages/best-practices.adoc @@ -62,7 +62,7 @@ appEmbed.render(); == Related resources -* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] +* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank] * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank] * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials] diff --git a/modules/ROOT/pages/code-samples.adoc b/modules/ROOT/pages/code-samples.adoc index d4d0509c2..724c65a40 100644 --- a/modules/ROOT/pages/code-samples.adoc +++ b/modules/ROOT/pages/code-samples.adoc @@ -319,7 +319,7 @@ See the following pages: * xref:home.adoc[Developer documentation] + * xref:rest-api-reference.adoc[REST API Reference Guide] + * link:https://developers.thoughtspot.com/guides[Tutorials, window=_blank] + -* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] + +* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] + * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub respository, window=_blank] + * link:https://github.com/thoughtspot/ts_rest_api_and_tml_tools[REST API and TML Python library and examples, window=_blank] + * link:https://github.com/thoughtspot/ts_everywhere_resources[Visual Embed SDK examples, window=_blank] + diff --git a/modules/ROOT/pages/common/nav.adoc b/modules/ROOT/pages/common/nav.adoc index 07970f795..5c3872fe6 100644 --- a/modules/ROOT/pages/common/nav.adoc +++ b/modules/ROOT/pages/common/nav.adoc @@ -4,7 +4,7 @@ [navSection] -* link:{{navprefix}}/ask-docs[AskDocs ^New^] +* link:{{navprefix}}/ask-docs[AskDocs ^Beta^] * link:{{navprefix}}/whats-new[What's New] ** link:{{navprefix}}/whats-new[New features] @@ -29,16 +29,16 @@ * link:{{navprefix}}/getting-started[Embed ThoughtSpot] ** link:{{navprefix}}/getting-started[Get started] -** Embed with Visual Embed SDK -** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components] -*** link:{{navprefix}}/embed-liveboard[Embed a Liveboard] -**** link:{{navprefix}}/Liveboard-new-experience[Embed a Liveboard] -*** link:{{navprefix}}/embed-a-viz[Embed a visualization] -*** link:{{navprefix}}/full-embed[Embed full application] -*** link:{{navprefix}}/search-embed[Embed search page] -**** link:{{navprefix}}/search-assist[Enable Search Assist] -*** link:{{navprefix}}/embed-searchbar[Embed search bar] -** link:{{navprefix}}/react-app-embed[Embed in a React app] +** Embed using Visual Embed SDK +*** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components] +**** link:{{navprefix}}/embed-liveboard[Embed a Liveboard] +***** link:{{navprefix}}/Liveboard-new-experience[Liveboard new experience] +**** link:{{navprefix}}/embed-a-viz[Embed a visualization] +**** link:{{navprefix}}/full-embed[Embed full application] +**** link:{{navprefix}}/search-embed[Embed search page] +***** link:{{navprefix}}/search-assist[Enable Search Assist] +**** link:{{navprefix}}/embed-searchbar[Embed search bar] +*** link:{{navprefix}}/react-app-embed[Embed in a React app] ** link:{{navprefix}}/VisualEmbedSdk[Visual Embed SDK Reference] *** Embed components **** link:{{navprefix}}/Class_SearchEmbed[SearchEmbed] diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index 698b007b0..679b88cab 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -267,8 +267,3 @@ liveboardEmbed.render(); image::./images/embed-lb.png[Liveboard embed] . Explore the charts and tables, and verify if objects render and show the desired data. - -== Additional resources - -* For code examples, see xref:code-samples.adoc[Code samples]. -* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference]. diff --git a/modules/ROOT/pages/embed-search.adoc b/modules/ROOT/pages/embed-search.adoc index 630c2dba6..629b62917 100644 --- a/modules/ROOT/pages/embed-search.adoc +++ b/modules/ROOT/pages/embed-search.adoc @@ -304,9 +304,4 @@ image::./images/embed-search.png[Search embed] The following figure shows a chart created from search query on an embedded Search page: + [.bordered] -image::./images/searchembed-with-chart.png[Search page embed] - -== Additional resources - -* For code examples, see xref:code-samples.adoc[Code samples]. -* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference]. +image::./images/searchembed-with-chart.png[Search page embed] \ No newline at end of file diff --git a/modules/ROOT/pages/embed-ts-react-app.adoc b/modules/ROOT/pages/embed-ts-react-app.adoc index 1df38238f..32ab7f7f4 100644 --- a/modules/ROOT/pages/embed-ts-react-app.adoc +++ b/modules/ROOT/pages/embed-ts-react-app.adoc @@ -702,7 +702,13 @@ export default App; == Additional resources -* For information about events, see xref:embed-events.adoc[Interact with events]. -* For information about Action enumerations, see xref:embed-actions.adoc[Show or hide UI actions]. -* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference]. +* xref:LiveboardEmbed.adoc[LiveboardEmbed] +* xref:LiveboardViewConfig.adoc[LiveboardViewConfig] +* xref:SearchEmbed.adoc[SearchEmbed] +* xref:SearchViewConfig.adoc[SearchViewConfig] +* xref:AppEmbed.adoc[AppEmbed] +* xref:AppViewConfig.adoc[LiveboardViewConfig] +* xref:HostEvent.adoc[HostEvent] +* xref:EmbedEvent.adoc[EmbedEvent] +* xref:Actions.adoc[Actions] * For Javascript code examples, see link:https://github.com/thoughtspot/quickstarts/tree/main/react-starter-app[Code samples, window=_blank]. diff --git a/modules/ROOT/pages/enable-liveboardv2.adoc b/modules/ROOT/pages/enable-liveboardv2.adoc index f5a9c38d8..b6020fad6 100644 --- a/modules/ROOT/pages/enable-liveboardv2.adoc +++ b/modules/ROOT/pages/enable-liveboardv2.adoc @@ -167,4 +167,4 @@ For more information, see link:https://docs.thoughtspot.com/cloud/latest/liveboa * For information about how to embed a Liveboard, see xref:embed-pinboard.adoc[Embed a Liveboard]. * For code examples, see xref:code-samples.adoc[Code samples]. -* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference]. +* For more information about the SDK APIs and attributes, see xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]. diff --git a/modules/ROOT/pages/faqs.adoc b/modules/ROOT/pages/faqs.adoc index 737a1d2f0..c65843027 100644 --- a/modules/ROOT/pages/faqs.adoc +++ b/modules/ROOT/pages/faqs.adoc @@ -337,7 +337,7 @@ To learn more about the SDK, see the following resources: + * xref:visual-embed-sdk.adoc[Visual Embed SDK] in Developer Documentation * link:https://developers.thoughtspot.com/guides[Quick starts and tutorials, window=_blank] -* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] +* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] ==== .Where can I find code samples for Visual Embed SDK? diff --git a/modules/ROOT/pages/full-embed.adoc b/modules/ROOT/pages/full-embed.adoc index e5db51b1a..3b33682a4 100644 --- a/modules/ROOT/pages/full-embed.adoc +++ b/modules/ROOT/pages/full-embed.adoc @@ -317,8 +317,3 @@ For more information about events, see the following pages: image::./images/appEmbed.png[Full application embed] . Explore the charts and tables, and verify if objects render and show the desired data. - -== Additional resources - -* For code examples, see xref:code-samples.adoc[Code samples]. -* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference]. diff --git a/modules/ROOT/pages/getting-started.adoc b/modules/ROOT/pages/getting-started.adoc index 7e5615304..c31e468c0 100644 --- a/modules/ROOT/pages/getting-started.adoc +++ b/modules/ROOT/pages/getting-started.adoc @@ -107,7 +107,7 @@ Use the **SearchBarEmbed** component to embed only the ThoughtSpot Search bar an ++++ [#initSdk] -=== Initialize the SDK +== Initialize the SDK After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type. For other supported authentication methods, see xref:embed-authentication.adoc[Authentication]. @@ -120,7 +120,7 @@ init({ }); ---- -== Define the object instance and properties +=== Define the object instance and properties Create an object instance and define object properties. This example shows the code sample for a Liveboard object: [source,JavaScript] @@ -139,11 +139,19 @@ const liveboardEmbed = new LiveboardEmbed( == Register events -Subscribe and listen to events triggered when the embedded object interacts with your app. +Subscribe and listen to events triggered when the embedded object interacts with your app. The following example registers `LiveboardRendered` and `SetVisibleVizs` events. The `LiveboardRendered` embed event is emitted when the embedding application renders the Liveboard and triggers the `SetVisibleVizs` event to show specific visualizations on the Liveboard. + +[source,JavaScript] +---- +liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => { + liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']); +}); +---- * xref:HostEvent.adoc[HostEvent] * xref:EmbedEvent.adoc[EmbedEvent] + == Render the embedded object Render the embedded application. @@ -154,8 +162,6 @@ liveboardEmbed.render(); ---- == Code sample - -==== JavaScript [source,Javascript] ---- import { @@ -192,7 +198,10 @@ lb.trigger(HostEvent.UpdateRuntimeFilters, [ `#container` is a selector for the DOM node which the code assumes is already attached to DOM. The SDK will render the ThoughtSpot component inside this container element. -==== React + +== Embed in a React app +ThoughtSpot provides React components for embedding Search, Liveboard, and the full ThoughtSpot application in a React app. In this example, + [source,TypeScript] ---- import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react'; @@ -218,6 +227,8 @@ const App = () => { }; ---- +For more information, see xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app]. + //// === Embed ThoughtSpot objects After you initialize the SDK, create embed object classes and define object properties. + diff --git a/modules/ROOT/pages/rel-page-sw.adoc b/modules/ROOT/pages/rel-page-sw.adoc index 4c459f2ab..3cd625dfc 100644 --- a/modules/ROOT/pages/rel-page-sw.adoc +++ b/modules/ROOT/pages/rel-page-sw.adoc @@ -39,7 +39,7 @@ The minimum SDK version required for embedding ThoughtSpot Software in your app You can upgrade to a later version if required. However, you must exercise caution before upgrading to a new version because the new versions may introduce breaking changes. The new version may also include APIs, methods, and attributes for features that are not yet available on your ThoughtSpot Software release. -For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]. +For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]. == REST API diff --git a/modules/ROOT/pages/sdk-reference.adoc b/modules/ROOT/pages/sdk-reference.adoc index 5649a2ea6..8b711e38b 100644 --- a/modules/ROOT/pages/sdk-reference.adoc +++ b/modules/ROOT/pages/sdk-reference.adoc @@ -24,8 +24,7 @@ For more specific information on Embed options and functions, see the link:http * link:{{visualEmbedSDKPrefix}}/classes/SearchEmbed.html[SearchEmbed, window=_blank] * link:{{visualEmbedSDKPrefix}}/classes/SearchBarEmbed.html[SearchBarEmbed, window=_blank] -For more specific information on Embed options and functions, see the link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]. - +For more specific information on Embed options and functions, see the xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]. == Additional resources diff --git a/modules/ROOT/pages/visual-embed-sdk.adoc b/modules/ROOT/pages/visual-embed-sdk.adoc index b5dc429b6..25ab1b2c5 100644 --- a/modules/ROOT/pages/visual-embed-sdk.adoc +++ b/modules/ROOT/pages/visual-embed-sdk.adoc @@ -98,7 +98,7 @@ Learn how to xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app]. [div boxDiv boxFullWidth] -- -* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] +* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials] * link:https://github.com/thoughtspot/visual-embed-sdk[Visual Embed SDK GitHub repository, window=_blank] * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank] From 882348763d7ce09a86f0e610cab3796364fb0a9f Mon Sep 17 00:00:00 2001 From: ShashiSubramanya <76986173+ShashiSubramanya@users.noreply.github.com> Date: Tue, 8 Aug 2023 09:23:24 +0530 Subject: [PATCH 4/4] Update getting-started.adoc --- modules/ROOT/pages/getting-started.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/getting-started.adoc b/modules/ROOT/pages/getting-started.adoc index c31e468c0..82099cb4a 100644 --- a/modules/ROOT/pages/getting-started.adoc +++ b/modules/ROOT/pages/getting-started.adoc @@ -200,7 +200,7 @@ lb.trigger(HostEvent.UpdateRuntimeFilters, [ == Embed in a React app -ThoughtSpot provides React components for embedding Search, Liveboard, and the full ThoughtSpot application in a React app. In this example, +ThoughtSpot provides React components for embedding Search, Liveboard, and the full ThoughtSpot application in a React app. The following code sample shows how to embed a Liveboard component in a React app: [source,TypeScript] ----