diff --git a/modules/ROOT/pages/api-changelog.adoc b/modules/ROOT/pages/api-changelog.adoc index 2f4450c14..2741bdf00 100644 --- a/modules/ROOT/pages/api-changelog.adoc +++ b/modules/ROOT/pages/api-changelog.adoc @@ -8,6 +8,85 @@ This changelog lists only the changes introduced in the Visual Embed SDK. For information about new features and enhancements available for embedded analytics, see xref:whats-new.adoc[What's New]. +== Version 1.40.0, July 2025 + +[width="100%" cols="1,4"] +|==== +|[tag greenBackground]#NEW FEATURE# a| *Fullscreen presentation mode controls for embedded Liveboards and visualizations* + +Developers can now control whether a visualization or Liveboard can be presented in full screen mode using the `disableFullscreenPresentation` attribute. By default, the full screen mode is disabled on embedded Liveboards and visualizations. +|[tag greenBackground]#NEW FEATURE# a| *PDF download settings* + +Developers can now control the display of *Include cover page* and *Include filter page(s)* options on the Download PDF dialog for Liveboards. The *Include cover page* and *Include filter page(s)* options are disabled by default on ThoughtSpot instances. When this feature is enabled, developers can use the `coverAndFilterOptionInPDF` attribute to show or hide these options for the Liveboard users in their embedding app. + +|[tag greenBackground]#NEW FEATURE# a| *Parameter for overriding a default primary action* + + +If Spotter is enabled on your instance, the *Spotter* button appears by default as the primary action on embedded Liveboard charts; if Spotter is not enabled, the *Explore* button is set as the primary action. If you want to replace the primary action with a different action, you can now use the `primaryAction` attribute. + +For more information, see xref:embed-actions.adoc#_override_default_primary_actions[Override default primary action]. + +|[tag greenBackground]#NEW FEATURE# a| *Full application embed experience enhancements* + + +The SDK now includes the `hideObjectSearch` property, which allows developers to hide the object search button in the navigation bar when embedding the full application. + +|[tag greenBackground]#NEW FEATURE# a| *Host events* + + +In this version, the SDK introduces the following host event handlers: + +- `HostEvent.ExitPresentMode` + +Triggers the exit action that allows users to exit the Liveboard or visualization present mode. +- `HostEvent.SpotterSearch` + +Triggers a search operation for the specified query string Spotter embed. +- `HostEvent.PreviewSpotterData` + +Triggers the *Preview data* action that shows the data used for Spotter conversations. +- `HostEvent.ResetSpotterConversation` + +Triggers the *Reset* action to reset a Spotter conversation. +- `HostEvent.EditLastPrompt` + +Triggers the edit prompt action. +- `HostEvent.DeleteLastPrompt` + +Triggers the delete prompt action. + +For more information, see xref:HostEvent.adoc[HostEvent]. + +|[tag greenBackground]#NEW FEATURE# a|*Events support for Spotter embed* + +You can now use the following host events in Spotter embed: + +- `HostEvent.DownloadAsCsv` +- `HostEvent.DownloadAsPng` +- `HostEvent.DownloadAsXlsx` +- `HostEvent.Edit` +- `HostEvent.GetParameters` +- `HostEvent.GetTML` +- `HostEvent.MakeACopy` +- `HostEvent.Pin` +- `HostEvent.Save` + +For more information, see xref:HostEvent.adoc[HostEvent]. + +|[tag greenBackground]#NEW FEATURE# a| *Lazy loading with full height* + +The SDK introduces `lazyLoadingForFullHeight` parameter, which enables progressive loading of visualizations on an embedded Liveboard. +This parameter works in conjunction with the `fullHeight` attribute. When both these attributes are enabled, only the visualizations in the current viewport are loaded initially, while the other visualizations load as the user scrolls the Liveboard page. + +[NOTE] +==== +To use these attributes effectively in embedded applications, your ThoughtSpot instance must be upgraded to version 10.12.0.cl or later. +==== +|==== + +//// + +TBD 10.12 events + +- `HostEvent.AnswerChartSwitcher` +- `HostEvent.AskSpotter` +- `HostEvent.DeleteLastPrompt` +- `HostEvent.EditLastPrompt` +- `HostEvent.PreviewSpotterData` +- `HostEvent.ResetSpotterConversation` +- `HostEvent.SpotterSearch` + +//// + == Version 1.39.0, July 2025 [width="100%" cols="1,4"] @@ -31,6 +110,54 @@ For ThoughtSpot instances that have the new Spotter feedback and coaching workfl [NOTE] The **Add to Coaching** feature is currently in beta and is turned off by default on embed deployments. To enable this feature on your instance, contact ThoughtSpot Support. +|[tag greenBackground]#NEW FEATURE# a|*Events support for Spotter embed* + +New embed events:: + +- `EmbedEvent.ExitPresentMode` + +Emits when a user exits the Liveboard or visualization presentation mode. +- `EmbedEvent.LastPromptDeleted` + +Emits when a query prompt in Spotter embed is deleted. +- `EmbedEvent.LastPromptEdited` + +Emits when a query prompt in Spotter embed is edited. +- `EmbedEvent.ResetSpotterConversation` + +Emits when a Spotter query is reset. +- `EmbedEvent.PreviewSpotterData` + +Emits when a user clicks the Preview data button in the Spotter conversation panel. +- `EmbedEvent.SpotterQueryTriggered` +Emits when a Spotter query is triggered. + +The following embed events are also supported in Spotter embed: + +- `EmbedEvent.AddRemoveColumns` +- `EmbedEvent.AnswerChartSwitcher` +- `EmbedEvent.AuthExpire` +- `EmbedEvent.AuthInit` +- `EmbedEvent.CopyToClipboard` +- `EmbedEvent.CustomAction` +- `EmbedEvent.Data` +- `EmbedEvent.DataSourceSelected` +- `EmbedEvent.DialogClose` +- `EmbedEvent.DialogOpen` +- `EmbedEvent.Download` +- `EmbedEvent.DownloadAsCsv` +- `EmbedEvent.DownloadAsPng` +- `EmbedEvent.DownloadAsXlsx` +- `EmbedEvent.DrillDown` +- `EmbedEvent.DrillExclude` +- `EmbedEvent.DrillInclude` +- `EmbedEvent.Edit` +- `EmbedEvent.Error` +- `EmbedEvent.Load` +- `EmbedEvent.Pin` +- `EmbedEvent.Save` +- `EmbedEvent.TableVizRendered` +- `EmbedEvent.VizPointClick` +- `EmbedEvent.VizPointDoubleClick` +- `EmbedEvent.VizPointRightClick` + +For more information, see xref:EmbedEvent.adoc[EmbedEvent]. + |==== == Version 1.38.0, June 2025 diff --git a/modules/ROOT/pages/common/nav.adoc b/modules/ROOT/pages/common/nav.adoc index 396200e61..7cfcb2a5b 100644 --- a/modules/ROOT/pages/common/nav.adoc +++ b/modules/ROOT/pages/common/nav.adoc @@ -121,7 +121,7 @@ include::generated/typedoc/CustomSideNav.adoc[] **** [.typedoc-Interface]#link:{{navprefix}}/Interface_RuntimeFilter[RuntimeFilter]# **** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_RuntimeFilterOp[RuntimeFilterOp]# *** Others -**** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_Action[Actions]# +**** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_Action[Action]# **** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_ContextMenuTriggerOptions[ContextMenuTriggerOptions]# **** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_DataSourceVisualMode[DataSourceVisualMode]# **** [.typedoc-Enumeration]#link:{{navprefix}}/Enumeration_Page[Page]# diff --git a/modules/ROOT/pages/configure-saml.adoc b/modules/ROOT/pages/configure-saml.adoc index d48f7b0d7..7fdd77b4a 100644 --- a/modules/ROOT/pages/configure-saml.adoc +++ b/modules/ROOT/pages/configure-saml.adoc @@ -232,10 +232,10 @@ Request binding;; Binding used for mapping the SAML protocol message. The default is HTTP-POST. Request signature algorithm;; -Signature algorithm used to sign the authentication request to your IDP. The default is SHA-256. +Signature algorithm used to sign the authentication request to your IDP. The default is SHA-256, but it is important to match it to the algorithm used by the IDP. Response signature algorithm;; -The minimum signature algorithm used to validate the SAML assertion from the IDP. The default is SHA-256. +The minimum signature algorithm used to validate the SAML assertion from the IDP. The default is SHA-256, but it is important to match it to the algorithm used by the IDP. Max clock skew time in seconds;; The allowed skew time, after which the authentication response is rejected and sent back from the IDP. The default is 86400. diff --git a/modules/ROOT/pages/data-report-v2-api.adoc b/modules/ROOT/pages/data-report-v2-api.adoc index 2de5227f9..e1c5c46fb 100644 --- a/modules/ROOT/pages/data-report-v2-api.adoc +++ b/modules/ROOT/pages/data-report-v2-api.adoc @@ -357,7 +357,7 @@ curl -X POST \ * HTML rendering is not supported for PDF exports of Answers with tables. ==== -== Pagination settings for Data and Report APIs +== Pagination settings for Data APIs When you make REST API calls to some v2 Data endpoints to query data, the API may return many rows of data in response. By default, the following parameters are set in API requests to the v2 Data API endpoints: diff --git a/modules/ROOT/pages/developer-playground.adoc b/modules/ROOT/pages/developer-playground.adoc index 47bfa6898..093044454 100644 --- a/modules/ROOT/pages/developer-playground.adoc +++ b/modules/ROOT/pages/developer-playground.adoc @@ -165,7 +165,7 @@ searchOptions: { } ---- -a|**Hide Sage Answer header** +a|**Hide AI-Answer header** Hides the Answer header container. diff --git a/modules/ROOT/pages/development-and-deployment.adoc b/modules/ROOT/pages/development-and-deployment.adoc index b201c8e94..98932ab93 100644 --- a/modules/ROOT/pages/development-and-deployment.adoc +++ b/modules/ROOT/pages/development-and-deployment.adoc @@ -21,6 +21,11 @@ xref:orgs.adoc[Orgs] are fully separated tenants on a single ThoughtSpot instanc Once your environments are configured, you can xref:version_control.adoc#moving-tml-changes-between-environments[move data models and content] from the initial "dev environment" to any other environment using the xref:git-rest-api-guide.adoc[Git integration REST APIs]. +[NOTE] +==== +ThoughtSpot does not recommend TML export and import across different versions of ThoughtSpot application because the TML syntax, supported features, and object schemas can vary between releases and can sometimes lead to compatibility issues and validation errors. +==== + //// If you have used ThoughtSpot for a long time and are enabling Orgs for the first time, please see xref:moving-to-orgs.adoc[moving to Orgs from single-tenant ThoughtSpot instance]. //// diff --git a/modules/ROOT/pages/embed-actions.adoc b/modules/ROOT/pages/embed-actions.adoc index cc9fc20d2..b7587e859 100644 --- a/modules/ROOT/pages/embed-actions.adoc +++ b/modules/ROOT/pages/embed-actions.adoc @@ -1,4 +1,4 @@ -= Customize menus += Customize menu elements :toc: true :toclevels: 2 @@ -6,46 +6,54 @@ :page-pageid: action-config :page-description: Show or hide actions in embedded Liveboards, visualizations and ThoughtSpot application -ThoughtSpot visualizations, Liveboards, and saved search answers support several actions and menu commands for various user-initiated operations. These actions appear as primary buttons, or as menu commands in *More* image:./images/icon-more-10px.png[the more options menu] or contextual menu. When you embed a ThoughtSpot Liveboard, visualization, or the entire application experience in another app, xref:embed-actions.adoc#standard-actions[these actions] will be available to all users by default. However, your application users may not require all the available menu actions, or you might want to restrict access to certain features. +The Visual Embed SDK allows you to customize the menu actions for the ThoughtSpot components embedded in your app. -With Visual Embed SDK APIs, you can define a set of actions that your application users can access and use. The Visual Embed SDK packages support the following APIs to configure the visibility and availability of actions: +== Overview -visibleActions:: -Allows you to define a list of actions that can be made visible to your application users. If your embedded instance requires only a few actions, you can use the `visibleActions` API to add only those actions to the embedded UI. +Menu actions in ThoughtSpot UI are available as: -disabledActions:: -Allows you to define a list of actions that will appear as disabled in the UI. You can also specify a reason for disabling the action. For example, your application user may require a specific privilege to schedule a Liveboard job, so you may want to disable this action and specify a reason, such as `Contact your administrator to enable this feature`. +* Primary buttons + +Buttons that trigger an action for an entire page or a container. For example, the *Save* button in the Answer page. +* More (`...`) options +* Contextual menu that appears on right-clicking -hiddenActions:: -Allows you to hide the actions that you don't want your users to see. If your embedded instance requires most of the actions, and you need to hide a few, you can use this API to hide only those actions. +When you embed a ThoughtSpot component in your app, xref:embed-actions.adoc#standard-actions[these actions] will be available to all users by default. However, your application users may not require all the menu actions, or you might want to restrict access to certain features. -include::{path}/custom-action-note.adoc[] +Visual Embed SDK provides a set of attributes and action IDs to control the availability and appearance of actions: -== Configuration recommendations +* `visibleActions` array + +Defines a list of actions that are visible to your application users. Use `visibleActions` when you want to show only a small subset of actions in the embedded view. -* Use `visibleActions` when you want to show only a small subset of actions in the embedded ThoughtSpot UI. -* The SDK doesn't support configuring both `visibleActions` and `hiddenActions`. Before you define `visibleActions`, make sure there are no hidden actions configured. -* If you want to show all menu actions to your users and hide only a few, use the `hiddenActions` attribute to hide these actions. -* If you are configuring `visibleActions` in the AppEmbed SDK package, make sure to include all the actions that you want to show on **Liveboards**, **Visualizations**, and the *Saved Answers* page. -* Use the appropriate action string to show or hide a UI action. For a comprehensive list of UI actions and the action strings in the SDK, see xref:embed-actions.adoc#standard-actions[Supported actions]. +* `disabledActions` array + +The actions specified in this array will appear as grayed-out and unavailable. You can also specify a reason for disabling the actions in the `disabledActionReason` attribute. For example, your application might need a specific privilege to schedule a Liveboard job. In this case, you may want to disable the Liveboard schedule action and display the message "Contact your administrator to enable this feature" on hover. -== Define visible actions +* `hiddenActions` array + +Hides the actions in the embed view. If your embed requires most of the default actions, and you want to hide only a few, use `hiddenActions`. -The Visual Embed SDK packages support the `visibleActions` attribute, which allows you to define an array of action strings. -For example, if you set the attribute as: +* `primaryAction` attribute + +Allows overriding the action assigned to a primary button in the visualization UI. -[source,Javascript] ----- -visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsCSV,Action.Pin] ----- +[IMPORTANT] +==== +* The SDK doesn't support configuring both `visibleActions` and `hiddenActions`. +* Use the appropriate action ID to show or hide a UI action. For a comprehensive list of action IDs available for ThoughtSpot components, see xref:Action.adoc[Actions]. +* For xref:custom-actions.adoc[custom actions], ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as `Send Email`, ThoughtSpot sets the ID for this action as `send-email` by default. You can use this action ID the `disabledActions`, `hiddenActions`, or `visibleActions` array. +* When configuring `visibleActions` in full application embed, ensure that the configured actions are displayed across all applicable embedded pages. +* Try out the actions in the +++ +Visual Embed Playground ++++ and verify the results before updating your code. +==== + +== Visible actions -Only the actions specified in the `visibleActions` attribute will appear in the embedded UI. The embedded application users can access and use the **Save**, **Show underlying data**, *Download as CSV*, and *Pin* menu actions. +The Visual Embed SDK packages support the `visibleActions` attribute, which allows you to define an array of action IDs that correspond to the action in the UI element. -++++ -Try it out -++++ +For example, to show only the **Save**, **Show underlying data**, *Download as CSV*, and *Pin* menu actions in the embedded UI, specify the action IDs in the `visibleActions` array: -+++

+++ +[source,Javascript] +---- +visibleActions: [Action.Save, Action.ShowUnderlyingData, Action.Download, Action.DownloadAsCsv, Action.Pin] +---- If the `visibleActions` attribute is set as an empty array, no actions will appear in the embedded UI. @@ -53,129 +61,87 @@ If the `visibleActions` attribute is set as an empty array, no actions will appe ---- visibleActions: [] ---- - -++++ -Try it out -++++ -+++

+++ - -If you set both `visibleActions` and `disabledActions` attributes as empty arrays, no actions will be visible in the embedded UI: +If the actions are in a nested menu, you must specify the action ID for parent element along with action ID. For example, to show only *PDF* option in the *Download* menu, specify the action ID for both: [source,Javascript] ---- -visibleActions: [] -disabledActions: [] +visibleActions: [Action.Download, Action.DownloadAsPdf] ---- -++++ -Try it out -++++ +=== Visible actions and hidden actions -+++

+++ - -If you specify some action strings in both `visibleActions` and `disabledActions` attributes, the specified menu actions will appear in the embedded UI. However, users will not be able to access the actions set as `disabledActions`. +If both `visibleActions` and `hiddenActions` attributes are defined, the SDK will return a configuration error. -In the following example, the **Download**, **Save**, **Share**, and **Pin** actions are defined as visible actions and therefore will be visible in the embedded UI. However, the *Download* menu action will be disabled. [source,Javascript] ---- -visibleActions: [Action.Download,Action.Save,Action.Share,Action.Pin] -disabledActions: [Action.Download] +visibleActions: [Action.DownloadAsPdf, Action.DownloadAsCsv, Action.Save,Action.ShowUnderlyingData, Action.Pin] +hiddenActions: [Action.DownloadAsPdf, Action.DownloadAsCsv] ---- -++++ -Try it out -++++ - - -+++

+++ - If you specify some action strings in the `visibleActions` attribute and define `hiddenActions` as an empty array, only the actions that are configured to be visible will appear in the embedded UI. [source,Javascript] ---- -visibleActions: [Action.DownloadAsPDF,Action.DownloadAsCSV,Action.Save,Action.ShowUnderlyingData,Action.Pin] +visibleActions: [Action.DownloadAsPdf, Action.DownloadAsCsv, Action.Save, Action.ShowUnderlyingData, Action.Pin] hiddenActions: [] ---- -++++ -Try it out -++++ - -+++

+++ - If the `visibleActions` attribute is set as an empty array and the action strings are specified in the `hiddenActions` attribute, the `visibleActions` definition takes precedence. Therefore, no actions will appear in the embedded UI. [source,Javascript] ---- visibleActions: [] -hiddenActions: [Action.DownloadAsPDF,Action.DownloadAsCSV] +hiddenActions: [Action.DownloadAsPdf, Action.DownloadAsCsv] ---- -++++ -Try it out -++++ - -+++

+++ - -If both `visibleActions` and `hiddenActions` attributes are defined, the SDK will return a configuration error. +If both `visibleActions` and `hiddenActions` attributes are defined as an empty array, the `visibleActions` definition takes precedence and no actions will appear in the embedded UI. [source,Javascript] ---- -visibleActions: [Action.DownloadAsPDF,Action.DownloadAsCSV,Action.Save,Action.ShowUnderlyingData,Action.Pin] -hiddenActions: [Action.DownloadAsPDF,Action.DownloadAsCSV] +visibleActions: [] +hiddenActions: [] ---- -++++ -Try it out -++++ +=== Visible actions and disabled actions -+++

+++ - -If both `visibleActions` and `hiddenActions` attributes are defined as an empty array, the `visibleActions` definition takes precedence and no actions will appear in the embedded UI. +When both `visibleActions` and `disabledActions` attributes are set as empty arrays, no actions will be visible in the embedded UI: [source,Javascript] ---- visibleActions: [] -hiddenActions: [] +disabledActions: [] ---- -++++ -Try it out -++++ +If you specify some action IDs in both `visibleActions` and `disabledActions` attributes, the specified menu actions will appear in the embedded UI. However, users will not be able to use the disabled actions. -== Disable actions +In the following example, the **Download**, **Save**, **Share**, and **Pin** actions are defined as visible actions and therefore will be visible in the embedded UI. However, the *Download* menu action will be disabled. -If you want to restrict user access to certain actions in the embedded ThoughtSpot Liveboard, visualization, or search results page, you can disable these actions in the embed config view. +[source,Javascript] +---- +visibleActions: [Action.Download, Action.Save, Action.Share, Action.Pin] +disabledActions: [Action.Download] +---- -The `disabledActions` attribute in the Visual Embed SDK allows you to specify one or several actions and disable these actions on a Liveboard, Answer, or visualization page. +== Disable actions -For example, to disable the *Show underlying data* action from the *More* menu image:./images/icon-more-10px.png[the more options menu], you can specify the `ShowUnderlyingData` action string in the `disabledActions` attribute. +The `disabledActions` attribute in the Visual Embed SDK allows you to specify one or several actions and disable these actions on a Liveboard, Answer, or visualization page. For example, to disable the *Show underlying data* action from the *More* options menu image:./images/icon-more-10px.png[the more options menu], specify the `ShowUnderlyingData` action ID in the `disabledActions` array. [source,JavaScript] ---- disabledActions: [Action.ShowUnderlyingData] ---- -++++ -Try it out -++++ - -Similarly, to disable multiple actions, you can specify the action strings in the `disabledActions` attribute. +Similarly, to disable multiple actions, you can specify the action IDs in the `disabledActions` attribute. [source,JavaScript] ---- -disabledActions: [Action.AddFilter,Action.Present] +disabledActions: [Action.AddFilter, Action.Present] ---- -++++ - -Try it out -++++ - === Disable a custom action -ThoughtSpot allows you to create custom actions for your embedded instance in the Developer portal. If you want to disable a custom action, you can specify the ID of the custom action in the `disabledActions` attribute. +To disable a custom action, specify the ID of the custom action in the `disabledActions` attribute. For example, if a custom action is labeled as *Send Email* and its ID is set as *send-email*, specify `send-email` in the `disabledActions` attribute. @@ -184,7 +150,7 @@ For example, if a custom action is labeled as *Send Email* and its ID is set as disabledActions: ['send-email'] ---- -=== Add a tooltip for disabled attributes +=== Add a tooltip to disabled action To add a tooltip for the disabled attribute, you can specify the message text string in the `disabledActionReason` attribute. @@ -193,11 +159,6 @@ To add a tooltip for the disabled attribute, you can specify the message text st disabledActionReason: "Contact your administrator to enable this action" ---- - -++++ -Try it out -++++ - == Hide actions The Visual Embed SDK allows you to hide specific actions that you may not want to show in the embedded UI. From the list of available actions, you can either define a list of visible actions using the `visibleActions` attribute or hide specific actions that your application may not require using the `hiddenActions` attribute. Configuring actions in both `visibleActions` and `hiddenActions` attributes leads to an error in embedded content rendition. @@ -209,10 +170,6 @@ For example, if you want to hide only the **Download** and *Pin* actions for an hiddenActions: [Action.Download,Action.Pin] ---- -++++ -Try it out -++++ - === Hide a custom action To hide a custom action, specify the ID of the custom action in the `disabledActions` attribute. @@ -223,7 +180,77 @@ For example, if a custom action is labeled as *Send Email* and its ID is set as hiddenActions: ['send-email'] ---- -[#standard-actions] -== Action enumeration members -For more information, see xref:Action.adoc[Actions]. +== Override default primary actions + +For Liveboards embedded in your app, the Visual Embed SDK provides the `primaryAction` attribute that allows you to override the default action assigned to the primary button on Liveboard visualizations. + +If Spotter is enabled on your instance, the Spotter button appears by default as the primary action on embedded Liveboard charts. If Spotter is not enabled on your instance, the *Explore* button is displayed as the default primary action. + +To replace the action assigned to this primary button: +Check if the SDK provides an action ID for the action you want to use as the replacement. +Ensure the action you want to use is not hidden or disabled via the hiddenActions or disabledActions arrays. +Define the new primary action in the SDK configuration: + +. Check if the SDK includes an action ID for the action you want to use as the replacement. +. Ensure that the action that you want to use is not hidden or disabled via `disabledActions` or `hiddenActions` arrays. +. Configure the new primary action: ++ +[source,JavaScript] +---- +const embed = new LiveboardEmbed("#your-own-div", { + liveboardId: "", // Replace with your Liveboard ID + primaryAction: Action.Download, +}); +---- +. Render your embed and verify that the default action is replaced with the action you defined. + +[NOTE] +==== +* The `primaryAction` parameter does not remove the default action; it replaces the action assigned to the primary button. +* If `primaryAction` is configured, the default action is moved to the More options `(...)` menu, and the action you configured appears as the primary button on your Liveboard visualizations. On Answers, the new action is added as a secondary button, positioned above the chart or table along with other primary actions +==== + +== Code sample + +[source,JavaScript] +---- +import { + LiveboardEmbed, + Action, + AuthType, +} from '@thoughtspot/visual-embed-sdk'; + +const embed = new LiveboardEmbed('#embed-div', { + thoughtSpotHost: 'https://your-instance.thoughtspot.com', //Replace it with your ThoughtSpot instance URL + authType: AuthType.None, + liveboardId: '', // Replace it with your Liveboard ID + visibleActions: [Action.Save, Action.Pin, Action.Download, Action.DownloadAsPdf, Action.DownloadAsCsv, Action.DownloadAsPdf, 'send-email'], + hiddenActions: [Action.Share, Action.Present], + disabledActions: [Action.Download], + disabledActionReason: 'Download is restricted for your role. Contact your administrator to enable this action', + primaryAction: Action.Explore, + customActions: [ + { + id: 'custom-action', + label: 'Send Email', + onClick: (context) => { + // Custom logic here + alert('Custom action triggered!'); + }, + }, + ], +}); +embed.render(); +---- + +== Best practices + +* Check the actions IDs in the SDK documentation for version requirements. +* If using older SDK versions, test your configuration to ensure all attributes are supported. +* To handle errors, use embed event listeners. + +== Additional resources +[#standard-actions] +* xref:Action.doc[Action ID] +* xref:embed-action-ref.adoc[Action ID reference] diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index a1e701d43..19d1ee39a 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -62,12 +62,11 @@ For more information about the Liveboard embed object, classes, methods, interfa * xref:LiveboardViewConfig.adoc[LiveboardViewConfig] * xref:Action.adoc[Actions] -== Customize component via LiveboardViewConfig -The second argument of the `LiveboardEmbed()` constructor is a `xref:LiveboardViewConfig.adoc[LiveboardViewConfig]` object. There are a number of properties that affect the display of the UI around the Liveboard and even the display of the Liveboard itself. +== Customize Liveboard view -The `disabledActions`, `hiddenActions`, and `visibleActions` properties of the `LiveboardViewConfig` object all take an array of xref:Action.adoc[Actions] items to control which menu items and buttons display. +The second argument of the `LiveboardEmbed()` constructor is a `xref:LiveboardViewConfig.adoc[LiveboardViewConfig]` object. This object includes several attributes and properties that are frequently used to customize the `LiveboardEmbed` component to fit within the embedding app's UI experience. -For information about the frequently used properties, see xref:embed-pinboard.adoc#common-customizations[common customizations]. +The most common customization is xref:embed-actions.adoc[controlling the visibility of menu items in the embedded view] by configuring the `disabledActions`, `hiddenActions`, and `visibleActions` properties with an array of xref:Action.adoc[Action] IDs. For information about the other frequently used properties, see xref:embed-pinboard.adoc#common-customizations[common customization options]. == Register, handle, and trigger events @@ -104,12 +103,12 @@ image::./images/embed-lb.png[Liveboard embed] [#common-customizations] == Common customization options -Within the *xref:LiveboardViewConfig.adoc[LiveboardViewConfig]*, there are several categories of properties that are frequently used to customize the `LiveboardEmbed` component to fit within the embedding app's UI experience. +The *xref:LiveboardViewConfig.adoc[LiveboardViewConfig]* object includes several properties and attributes that allow fine-grained control of the embedded experience. You can specify settings that enable or disable a specific feature, control visible or disabled menu elements and actions, set tabs and layout preferences, manage filters, hide header, and more. === Show/hide large UI elements Parameters such as `hideLiveboardHeader`, `hideTabPanel`, `isLiveboardHeaderSticky`, `showLiveboardTitle`, and `showLiveboardDescription` control various aspects of the standard embedded Liveboard experience. Note the phrasing of the property name and the description in the documentation to understand whether `true` enables or disables the particular feature. -Along with xref:Action.adoc[Actions] there is very fine-grained control of the display of the `LiveboardEmbed` component, which can be varied for each user or content object displayed depending on the desires of the app development team. +//Along with xref:Action.adoc[Actions], there is very fine-grained control of the display of the `LiveboardEmbed` component, which can vary for each user or content object displayed depending on the desires of the app development team. [.widthAuto] image::./images/liveboard_view_config_callouts_2.png[LiveboardViewConfig parameters] @@ -133,7 +132,28 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { [NOTE] ==== -When `fullHeight` is set to `true`, the SDK ignores the `isLiveboardHeaderSticky:true` setting and the Liveboard header will not be sticky. +When `fullHeight` is set to `true`, the SDK ignores the `isLiveboardHeaderSticky:true` setting, and the Liveboard header will not be sticky. +==== + +=== Customize Liveboard tabs + +By default, the first tab created on a Liveboard is set as the home tab. You can set any tab as an active tab using the `activeTabId` property in the Visual Embed SDK as shown in the example here: + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: "d7a5a08e-a1f7-4850-aeb7-0764692855b8", + activeTabId: "05406350-44ce-488e-abc5-5e8cdd65cf3c", +}); +---- + +[NOTE] +==== +The `activeTabId` property is available only in the `LiveboardEmbed` package and is not supported in the full application embed mode. ==== === Reduce visible tabs and visualizations @@ -141,17 +161,26 @@ When `fullHeight` is set to `true`, the SDK ignores the `isLiveboardHeaderSticky For example, a template Liveboard with many different KPIs could be reduced down to a smaller set by giving a user an interface to select the particular visualizations to show, storing their selections, and using that saved set of visualization GUIDs as the array for `visibleVizs` on page load (there is an equivalent xref:embed-events.adoc[HostEvent] called `SetVisibleVizs` to make an update after the Liveboard has loaded). +[#noteTiles] +=== Add Note tiles +You can add a link:https://docs.thoughtspot.com/cloud/latest/liveboard-notes[Liveboard Note tile, window=_blank] with custom text, images, and links on an embedded Liveboard. + +* Only users with edit access to a Liveboard can add a Note tile. +* Users require `Can upload data` privilege to upload an image to the note tile. +* If you are adding links and images from an external site, or embedding multimedia or a web page in an iFrame, make sure the URLs are added to CORS and CSP allowlists. For more information, see xref:security-settings.adoc[Security settings]. + === Redefine Liveboard breakpoint widths When turned on, the `enable2ColumnLayout` allows for customising the Liveboard breakpoint width for embedded users. The current 12 column layout changes to 2 columns per row at 1024px, and to 1 column per row layout at 630px in the new Liveboard experience. Once enabled, these breakpoints would apply to all Liveboards in the ThoughtSpot instance, and cannot be set only for individual Liveboards. These breakpoint widths are customisable for the embedded customers. Contact ThoughtSpot support for assistance with customisation. + +//// [#lbv2] == Liveboard experience Starting from 10.1.0.cl, the link:https://docs.thoughtspot.com/cloud/latest/deprecation#_removed_in_10_1_0_cl[classic experience for liveboards has been deprecated]. -//// The new Liveboard experience provides an improved interface with several new features and enhancements. The following figure shows the menu actions available on a Liveboard page in the new experience: [.bordered] @@ -172,10 +201,10 @@ The following actions are deprecated in the new experience mode: ** The edit title icon on visualization tiles ** The *Share* button on visualizations -//// + === Liveboard tabs -The new Liveboard experience allows you to organize your visualizations into tabs. Liveboard tabs allow you to logically group visualization into specific categories and allow users to access them easily. +Liveboard tabs allow you to logically group visualization into specific categories and allow users to access them easily. To create, edit, or move visualizations to a tab, you require edit access to a Liveboard. @@ -183,31 +212,11 @@ To create, edit, or move visualizations to a tab, you require edit access to a L * To add a visualization to a tab on a Liveboard, click *Move to tab* from the More image:./images/icon-more-10px.png[the more options menu] menu. + You can also pin a visualization to a Liveboard tab using the **Pin** action on the Answer page. +//// -==== Set a tab as an active tab - -By default, the first tab created on a Liveboard is set as the home tab. You can set any tab as an active tab using the `activeTabId` property in the Visual Embed SDK as shown in the example here: - -[source,JavaScript] ----- -const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { - frameParams: { - width: '100%', - height: '100%', - }, - liveboardId: "d7a5a08e-a1f7-4850-aeb7-0764692855b8", - activeTabId: "05406350-44ce-488e-abc5-5e8cdd65cf3c", -}); ----- - -[NOTE] -==== -The `activeTabId` property is available only in the `LiveboardEmbed` package and is not supported in the full application embed mode. -==== - -=== Filters +=== Customize filters -To view specific data across the tables and charts on an embedded Liveboard, users can use Liveboard filter options. You can apply filters when embedding a Liveboard or xref:runtime-filters.adoc[apply runtime filters] via Visual Embed SDK and load the Liveboard with filters applied. +To view specific data across the tables and charts on an embedded Liveboard, users can use Liveboard filter options. You can embed a Liveboard with filters already applied or xref:runtime-filters.adoc[define runtime filters] in the Visual Embed SDK and apply filters during load time. Embedding application users can also apply filters across visualizations using the link:https://docs.thoughtspot.com/cloud/latest/liveboard-filters-cross[cross-filter feature, window=_blank]. @@ -399,6 +408,29 @@ liveboardEmbed.trigger(HostEvent.UpdateFilters, { ---- |===== +==== Customize filter visibility in Liveboard tabs +Filters and parameters that are not relevant to the visualizations in a tab can be hidden by default on an embedded Liveboard. This feature is disabled by default on ThoughtSpot embedded instances. To enable this feature, set `hideIrrelevantChipsInLiveboardTabs` to `true`. + +[NOTE] +==== +This feature is supported only if compact header is enabled on your Liveboard. To enable compact header, use the `isLiveboardCompactHeaderEnabled` attribute. +==== + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', // Replace it with your Liveboard ID + isLiveboardCompactHeaderEnabled: true, + hideIrrelevantChipsInLiveboardTabs: true, + // ... other embed view configuration settings +}); +---- + + //// | `EXACT_DATE_TIME` |Specify the date and time in epoch or the regular date and time format. For example, 2023/07/31 22:50:05. a|[source,JavaScript] @@ -468,18 +500,14 @@ liveboardEmbed.trigger(HostEvent.UpdateFilters, { //// -[#noteTiles] -=== Note tiles -You can add a link:https://docs.thoughtspot.com/cloud/latest/liveboard-notes[Liveboard Note tile, window=_blank] with custom text, images, and links on an embedded Liveboard. -* Only users with edit access to a Liveboard can add a Note tile. -* Users require `Can upload data` privilege to upload an image to the note tile. -* If you are adding links and images from an external site, or embedding multimedia or web page in an iFrame, make sure the URLs are added to CORS and CSP allowlists. For more information, see xref:security-settings.adoc[Security settings]. +=== Liveboard comments + +ThoughtSpot does not support adding comments, replying, or subscribing to comment threads on embedded Liveboards. -=== Commenting on Liveboards -Users on a non-embedded ThoughtSpot application instance can add comments, reply to comments, or subscribe to comment threads on a Liveboard. However, if the Liveboard is embedded in another application, the comment icon will not be visible to the embedded application users regardless of their access privileges. +//if the Liveboard is embedded in another application, the comment icon will not be visible to the embedded application users regardless of their access privileges. == Additional resources * For information about runtime overrides, see xref:runtime-filters.adoc[Runtime filters] and xref:runtime-parameters.adoc[Runtime Parameter overrides]. -* For code examples, see xref:code-samples.adoc[Code samples]. +* For code examples, see link:https://github.com/thoughtspot/developer-examples/tree/main/visual-embed/liveboard[Developer examples^]. * For more information about the SDK APIs and attributes, see xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]. diff --git a/modules/ROOT/pages/embed-spotter-agent.adoc b/modules/ROOT/pages/embed-spotter-agent.adoc new file mode 100644 index 000000000..170684b48 --- /dev/null +++ b/modules/ROOT/pages/embed-spotter-agent.adoc @@ -0,0 +1,498 @@ += Embed Spotter Agent +:toc: true +:toclevels: 3 + +:page-title: Embed Spotter Agent +:page-pageid: embed-spotter-agent +:page-description: You can use the SpotterAgentEmbed SDK library to embed Spotter experience in your application. + +Spotter Agent is an embeddable AI analyst component from ThoughtSpot that enables you to integrate natural language data search and analysis into your own applications. Unlike the standard Spotter embed, which provides a ready-made search bar and interface, Spotter Agent is designed for deeper integration and customization. It allows you to build your own UI or agent experience, broker user questions to ThoughtSpot, and receive structured answers and visualizations, giving you full control over the look, feel, and workflow of the embedded analytics experience. + +== How is Spotter Agent Embedding Different from Spotter Embed? + +* Spotter embed provides a pre-built search bar and interface for quick embedding. +* Spotter Agent embedding is intended for custom agent or chatbot experiences, letting you control the UI and workflow while leveraging ThoughtSpot’s AI-powered analytics engine. + +== Prerequisites + +* Access to a ThoughtSpot instance. +* Your application domain must be allowlisted in ThoughtSpot CSP and CORS settings. +* Admin or developer privileges in ThoughtSpot. +* A worksheet or table to use as the data source. + +== Install the Visual Embed SDK + +[source,bash] +---- +npm install @thoughtspot/visual-embed-sdk +---- + +== Import the SDK and Components + +[source,js] +---- +import { AuthType, init } from '@thoughtspot/visual-embed-sdk'; +import { SpotterAgentEmbed, SpotterAgentViewConfig } from '@thoughtspot/visual-embed-sdk/react'; +---- + +== Initialize the SDK + +[source,js] +---- +init({ + thoughtSpotHost: 'https://', + authType: AuthType.None // Or AuthType.TrustedAuthToken, etc. +}); +---- + +== Configure SpotterAgentViewConfig + +[source,js] +---- +const viewConfig = { + worksheetId: '', // Required: Data source object ID + searchQuery: 'sales by region', // Optional: Initial query + runtimeFilters: [ + { + columnName: 'region', + operator: 'EQ', + values: ['West'] + } + ], // Optional: Pre-filtered context + visibleActions: [ + 'Action.Save', + 'Action.Download', + 'Action.DownloadAsPDF' + ], // Optional: Show only these actions + disabledActions: [ + 'Action.Download' + ], // Optional: Disable specific actions + disabledActionReason: { + 'Action.Download': 'Download is not allowed for this user' + }, // Optional: Tooltip for disabled actions + hideSourceSelection: true, // Optional: Hide data source selector + disableSourceSelection: false, // Optional: Disable data source selection + locale: 'en-US', // Optional: Set locale + showSpotterLimitations: false, // Optional: Show Spotter limitations + hideSampleQuestions: true // Optional: Hide sample questions +}; +---- + +== Embed the Spotter Agent + +[source,jsx] +---- + console.log('Spotter Agent loaded')} + onInit={() => console.log('Spotter Agent initialized')} +/> +---- + +== Register and Handle Events + +You can handle Spotter Agent events for analytics and integration. + +[source,jsx] +---- + +---- + +*Common events include:* +- `onLoad`: Fires when Spotter Agent is loaded. +- `onInit`: Fires when Spotter Agent is initialized. +- `onData`: Fires when data is returned from a query. +- `onError`: Fires on error. + +== Customizing the UI + +* Use `visibleActions`, `hiddenActions`, and `disabledActions` in the config to control menu actions. Do not use both `visibleActions` and `hiddenActions` at the same time [1], [2], [3]. +* To apply custom styles, use CSS variables such as: ++ +[source,css] +---- +:root { + --ts-var-spotter-input-background: #f5f5f5; + --ts-var-spotter-prompt-background: #e0e0e0; +} +---- + + +== Test the Embedded Spotter Agent + +* Start your app. +* Verify Spotter Agent loads and is interactive. +* Confirm initial query and runtime filters are applied. +* Test event handlers and UI customizations. + +== Additional Notes + +* Use only `answerId` for event tracking in SpotterAgentEmbed. +* SpotterAgentEmbed supports both host and embed events for two-way communication. +* For advanced use, refer to the official SDK and API documentation. + + + + + + + + + + + + + + + + + + + + + + + +//// + +== Runtime Filters + +* Pass runtime filters in the `runtimeFilters` array in the config. +* Filters are applied to the initial query and search suggestions. +* Invalid filters are handled gracefully (error message or ignored). + + +ThoughtSpot supports Natural Language Search queries and AI-generated Answers. With ThoughtSpot Spotter, this experience is further enhanced to provide a conversational interface for users to query data, ask follow-up questions, and get insights. + +Visual Embed SDK offers several options to seamlessly embed conversational analytics within your applications and customize the interface and experience as per your organization's branding guidelines. + +To integrate Spotter capabilities into other apps, ThoughtSpot provides the following components: + +* To embed the full Spotter interface with a conversation panel that allows natural language text strings, data source selection, and interactions with AI generated Answers, use the `SpotterEmbed` component. + + +* To integrate Spotter Agent capabilities in a chatbot, use the `SpotterAgentEmbed` component. + + +[NOTE] +==== +The `ConversationEmbed` and `BodylessConversation` components are deprecated and replaced with `SpotterEmbed` and `SpotterAgentEmbed` respectively in Visual Embed SDK v1.38.0 and later. +==== + +This article describes how to embed the Spotter interface using the `SpotterEmbed` component. For information about how to integrate Spotter Agent capabilities without body in a chatbot, see xref:spotter-in-custom-chatbot.adoc[Integrate Spotter into your chatbot]. + +== Before you begin + +Before you begin, check the following: + +* Spotter is enabled on your ThoughtSpot instance. +* You have access to the latest version of the Visual Embed SDK or at least v1.33.1. + +== Import the SDK package + +Import the `SpotterEmbed` SDK library to your application environment: + +**npm** +[source,JavaScript] +---- +import { + SpotterEmbed, + AuthType, + init, + prefetch, +} +from '@thoughtspot/visual-embed-sdk'; +---- + +**ES6** +[source,JavaScript] +---- +