From 6c055493d5b63ddbb6287983ed3279ab36ddbaf2 Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Thu, 27 Aug 2026 22:21:54 +0530 Subject: [PATCH 1/6] SCAL-332993-332931 --- modules/ROOT/pages/customize-css-styles.adoc | 1 + modules/ROOT/pages/embed-pinboard.adoc | 81 ++++++++++++++++++++ 2 files changed, 82 insertions(+) diff --git a/modules/ROOT/pages/customize-css-styles.adoc b/modules/ROOT/pages/customize-css-styles.adoc index 067cd0da9..46ab5e07c 100644 --- a/modules/ROOT/pages/customize-css-styles.adoc +++ b/modules/ROOT/pages/customize-css-styles.adoc @@ -199,6 +199,7 @@ Use the following variables to customize the Liveboard page elements. |`--ts-var-liveboard-header-font-color`| Font color of the text on the Liveboard header. |`--ts-var-liveboard-notetitle-heading-font-color`| Font color of the title of the note tile on the Liveboard. |`--ts-var-liveboard-notetitle-body-font-color`| Font color of the text of the note tile on the Liveboard. +|`--ts-var-liveboard-header-horizontal-margin`| #Horizontal margin of the Liveboard header. Set this to the same pixel value as `liveboardGutter` in `LiveboardViewConfig` to align the header with the tile grid.# |====== [.bordered] diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index 0f2c70d79..7dabf2fe8 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -177,6 +177,40 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { }); ---- +[#liveboard-gutter] +=== #Set Liveboard tile gutter# + +The `liveboardGutter` property lets you control the spacing (in pixels) between Liveboard tiles and groups from your embedding code, overriding the Liveboard's saved styling value. + +Use this property when you need to enforce a consistent tile spacing across all embedded Liveboards, regardless of how individual Liveboards are styled in the ThoughtSpot application. + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + liveboardGutter: 16, <1> +}); +liveboardEmbed.render(); +---- +<1> Specify a non-negative integer value in pixels. The embed value takes precedence over the Liveboard's saved gutter setting. + +The following rules apply to the `liveboardGutter` value: + +* Accepts non-negative integers (0 or greater). +* A value of `0` removes all gutter space between tiles. +* Negative numbers, decimal values, and non-numeric strings are ignored, and the Liveboard falls back to its saved styling value. + +[NOTE] +==== +`liveboardGutter` controls the spacing between tiles and groups, not the spacing within a group. + +The Liveboard header's horizontal margin is controlled separately by the `--ts-var-liveboard-header-horizontal-margin` CSS variable. To align the Liveboard header with the tile grid, set both `liveboardGutter` and `--ts-var-liveboard-header-horizontal-margin` to matching values. For more information, see xref:customize-css-styles.adoc#lb-header-margin[Liveboard header horizontal margin]. +==== + === 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: @@ -420,6 +454,53 @@ To open the **Download** modal with the XLSX option selected when the `isLiveboa * `HostEvent.DownloadAsCsv` + To open the **Download** modal with the CSV option selected when `isLiveboardXLSXCSVDownloadEnabled` parameter is enabled in the embed view. +[#12col-layout] +=== #Lock Liveboard to 12-column layout# + +By default, embedded Liveboards use a responsive layout that collapses from 12 columns to 2 columns at container widths of 1024px or less, and to a single column at 630px or less. +In some embedding scenarios, such as fixed-width dashboards or data-dense layouts, you may want to prevent this collapse and keep the 12-column layout at all widths. + +To lock the Liveboard to the 12-column layout, set `isLiveboardAlwaysOn12ColLayout` to `true` in the `LiveboardViewConfig` object: + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + isLiveboardAlwaysOn12ColLayout: true, +}); +---- + +When `isLiveboardAlwaysOn12ColLayout` is `true`: + +* The Liveboard always renders in the 12-column layout, regardless of the container width. +* Tiles shrink proportionally as the container narrows. No horizontal scrollbar appears. +* The layout never collapses to 2-column or single-column. +//* The `isMobileResponsiveLiveboardEnabled` property has no effect. + +[NOTE] +==== +CSS variables `--ts-var-liveboard-dual-column-breakpoint` and `--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the responsive layout collapses. +Use `isLiveboardAlwaysOn12ColLayout: true` when you want to prevent layout collapse entirely, rather than adjust the breakpoint thresholds. +//For more information about CSS layout variables, see xref:mobile-embed-android.adoc[Embed ThoughtSpot in Android apps]. +==== + +The `isLiveboardAlwaysOn12ColLayout` property is also supported on `AppEmbed` via `AppViewConfig`: + +[source,JavaScript] +---- +const appEmbed = new AppEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + isLiveboardAlwaysOn12ColLayout: true, +}); +---- + === Liveboard grouping and styling [earlyAccess eaBackground]#Early Access# From e4cff7ea392937fb7b998b0dc72f1d4925137c5f Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Thu, 27 Aug 2026 23:35:48 +0530 Subject: [PATCH 2/6] SCAL-332993-332931 --- modules/ROOT/pages/customize-css-styles.adoc | 27 ++++++++ modules/ROOT/pages/embed-pinboard.adoc | 70 ++++++++++++++------ 2 files changed, 76 insertions(+), 21 deletions(-) diff --git a/modules/ROOT/pages/customize-css-styles.adoc b/modules/ROOT/pages/customize-css-styles.adoc index 46ab5e07c..38c435325 100644 --- a/modules/ROOT/pages/customize-css-styles.adoc +++ b/modules/ROOT/pages/customize-css-styles.adoc @@ -236,6 +236,33 @@ To enable this feature contact ThoughtSpot support and set `isLiveboardMasterpie image::./images/lb-grp-styling.png[CSS customization for Liveboard groups] -- +[#liveboard-layout-vars] +== #Liveboard layout# + +Use the following CSS variables to control the column layout and responsive behavior of embedded Liveboards. + +[width="100%" cols="5,7"] +[options="header"] +|==== +|Variable |Description +|`--ts-var-liveboard-dual-column-breakpoint` +|Sets the container width threshold (in pixels) at which the Liveboard layout collapses from 12 columns to 2 columns. +The default breakpoint is `1024px`. +Accepts any valid CSS length value, for example, `900px`. + +|`--ts-var-liveboard-single-column-breakpoint` +|Sets the container width threshold (in pixels) at which the Liveboard layout collapses from 2 columns to a single column. +The default breakpoint is `630px`. +Accepts any valid CSS length value, for example, `480px`. + +|`--ts-var-liveboard-min-width` +|Sets the minimum container width at which a horizontal scrollbar appears when `force12ColLayout` is enabled. +Below this threshold, tiles do not compress further and a horizontal scrollbar appears instead. +Accepts any valid CSS length value, for example, `800px`. +Available in SDK v1.53.0 and ThoughtSpot Cloud 26.10.0.cl and later. +|==== + +For more information about forcing a fixed 12-column layout, see xref:embed-pinboard.adoc#force-12col-layout[Force 12-column layout in embedded Liveboards]. [#vizStyle] == Visualization and Answer diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index 7dabf2fe8..d14b8fccd 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -180,9 +180,9 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { [#liveboard-gutter] === #Set Liveboard tile gutter# -The `liveboardGutter` property lets you control the spacing (in pixels) between Liveboard tiles and groups from your embedding code, overriding the Liveboard's saved styling value. +The `liveboardGutter` property lets you control the spacing between Liveboard tiles and groups, and the grid's outer layout padding, directly from your embed configuration. The value you set overrides the Liveboard's saved styling setting. -Use this property when you need to enforce a consistent tile spacing across all embedded Liveboards, regardless of how individual Liveboards are styled in the ThoughtSpot application. +Use this property when you need to enforce consistent tile spacing across embedded Liveboards, regardless of how individual Liveboards are styled in ThoughtSpot. [source,JavaScript] ---- @@ -201,14 +201,14 @@ liveboardEmbed.render(); The following rules apply to the `liveboardGutter` value: * Accepts non-negative integers (0 or greater). -* A value of `0` removes all gutter space between tiles. -* Negative numbers, decimal values, and non-numeric strings are ignored, and the Liveboard falls back to its saved styling value. +* A value of `0` removes all gutter space between tiles and the grid's outer layout padding. +* Negative numbers, decimal values, and non-numeric strings are ignored. The Liveboard falls back to its saved styling value. [NOTE] ==== `liveboardGutter` controls the spacing between tiles and groups, not the spacing within a group. -The Liveboard header's horizontal margin is controlled separately by the `--ts-var-liveboard-header-horizontal-margin` CSS variable. To align the Liveboard header with the tile grid, set both `liveboardGutter` and `--ts-var-liveboard-header-horizontal-margin` to matching values. For more information, see xref:customize-css-styles.adoc#lb-header-margin[Liveboard header horizontal margin]. +The Liveboard header's horizontal margin is controlled separately by the `--ts-var-liveboard-header-horizontal-margin` CSS variable. To align the Liveboard header and tab/filter section with the tile grid, set both `liveboardGutter` and `--ts-var-liveboard-header-horizontal-margin` to matching values. For more information, see xref:customize-css-styles.adoc#lb-header-margin[Liveboard CSS variables]. ==== === Customize Liveboard tabs @@ -454,13 +454,14 @@ To open the **Download** modal with the XLSX option selected when the `isLiveboa * `HostEvent.DownloadAsCsv` + To open the **Download** modal with the CSV option selected when `isLiveboardXLSXCSVDownloadEnabled` parameter is enabled in the embed view. -[#12col-layout] -=== #Lock Liveboard to 12-column layout# +[#force-12col-layout] +=== Force 12-column layout in embedded Liveboards By default, embedded Liveboards use a responsive layout that collapses from 12 columns to 2 columns at container widths of 1024px or less, and to a single column at 630px or less. -In some embedding scenarios, such as fixed-width dashboards or data-dense layouts, you may want to prevent this collapse and keep the 12-column layout at all widths. -To lock the Liveboard to the 12-column layout, set `isLiveboardAlwaysOn12ColLayout` to `true` in the `LiveboardViewConfig` object: +Use the `force12ColLayout` property to prevent this collapse and keep the 12-column layout at all container widths. + +To force the 12-column layout, set `force12ColLayout` to `true` in the `LiveboardViewConfig` object: [source,JavaScript] ---- @@ -470,25 +471,18 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { height: '100%', }, liveboardId: '<%=liveboardGUID%>', - isLiveboardAlwaysOn12ColLayout: true, + force12ColLayout: true, }); ---- -When `isLiveboardAlwaysOn12ColLayout` is `true`: +When `force12ColLayout` is `true`: * The Liveboard always renders in the 12-column layout, regardless of the container width. -* Tiles shrink proportionally as the container narrows. No horizontal scrollbar appears. +* Tiles shrink proportionally as the container narrows. * The layout never collapses to 2-column or single-column. //* The `isMobileResponsiveLiveboardEnabled` property has no effect. -[NOTE] -==== -CSS variables `--ts-var-liveboard-dual-column-breakpoint` and `--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the responsive layout collapses. -Use `isLiveboardAlwaysOn12ColLayout: true` when you want to prevent layout collapse entirely, rather than adjust the breakpoint thresholds. -//For more information about CSS layout variables, see xref:mobile-embed-android.adoc[Embed ThoughtSpot in Android apps]. -==== - -The `isLiveboardAlwaysOn12ColLayout` property is also supported on `AppEmbed` via `AppViewConfig`: +The property is also supported on `AppEmbed` via `AppViewConfig`: [source,JavaScript] ---- @@ -497,10 +491,44 @@ const appEmbed = new AppEmbed(document.getElementById('ts-embed'), { width: '100%', height: '100%', }, - isLiveboardAlwaysOn12ColLayout: true, + force12ColLayout: true, }); ---- +==== Set a minimum width for horizontal scrolling + +When `force12ColLayout` is `true`, tiles shrink as the container narrows. +To prevent tiles from compressing below a usable size, use the `--ts-var-liveboard-min-width` CSS variable to set a minimum container width. +Below this threshold, a horizontal scrollbar appears instead of further tile compression. + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + force12ColLayout: true, + customizations: { + style: { + customCSS: { + variables: { + '--ts-var-liveboard-min-width': '800px', + }, + }, + }, + }, +}); +---- + +[NOTE] +==== +The CSS variables `--ts-var-liveboard-dual-column-breakpoint` and `--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the responsive layout collapses. +Use `force12ColLayout: true` when you want to prevent layout collapse entirely, rather than adjust the breakpoint thresholds. +For more information about the CSS layout variables available for Liveboard layout control, see xref:customize-css-styles.adoc#liveboard-layout-vars[Liveboard layout CSS variables]. +==== + === Liveboard grouping and styling [earlyAccess eaBackground]#Early Access# From 10c16e5b3d40b3746abb13130d6d4cf1e2f4b50a Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Mon, 31 Aug 2026 21:26:08 +0530 Subject: [PATCH 3/6] express release docs --- modules/ROOT/pages/embed-pinboard.adoc | 170 ++++++++++++---------- modules/ROOT/pages/events-hostEvents.adoc | 49 +++++++ 2 files changed, 144 insertions(+), 75 deletions(-) diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index d14b8fccd..48227d675 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -278,6 +278,101 @@ The current 12 column layout changes to 2 columns per row at 1024px, and to 1 co These breakpoint widths are customizable for the embedded customers. Contact ThoughtSpot support for assistance with customization. +[#force-12col-layout] +=== Force 12-column layout in embedded Liveboards + +By default, embedded Liveboards use a responsive layout that collapses from 12 columns to +2 columns at container widths of 1024px or less, and to a single column at 630px or less. + +Use the `force12ColLayout` property to prevent this collapse and keep the 12-column layout +at all container widths. + +To force the 12-column layout, set `force12ColLayout` to `true` in the `LiveboardViewConfig` +object: + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + force12ColLayout: true, +}); +---- + +When `force12ColLayout` is `true`: + +* The Liveboard always renders in the 12-column layout, regardless of the container width. +* Tiles shrink proportionally as the container narrows. +* The layout never collapses to 2-column or single-column. +* The `isMobileResponsiveLiveboardEnabled` property has no effect. + +The property is also supported on `AppEmbed` via `AppViewConfig`: + +[source,JavaScript] +---- +const appEmbed = new AppEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + force12ColLayout: true, +}); +---- + +[NOTE] +==== +Set `force12ColLayout` only via the SDK configuration object. +Do not pass `force12ColLayout=false` as a URL query parameter — string values in URL +parameters are not parsed as Booleans and may produce unexpected results. +==== +// SOURCE: scaligent PR #67806, review comment r218971 + +[NOTE] +==== +The CSS variables `--ts-var-liveboard-dual-column-breakpoint` and +`--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the +responsive layout collapses. +Use `force12ColLayout: true` when you want to prevent layout collapse entirely, rather than +adjust the breakpoint thresholds. +For more information about the CSS layout variables available for Liveboard layout control, +see xref:customize-css-styles.adoc#liveboard-layout-vars[Liveboard layout CSS variables]. +==== + + +//// +==== Set a minimum width for horizontal scrolling + +When `force12ColLayout` is `true`, tiles shrink as the container narrows. +To prevent tiles from compressing below a usable size, use the `--ts-var-liveboard-min-width` +CSS variable to set a minimum container width. +Below this threshold, a horizontal scrollbar appears instead of further tile compression. + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + frameParams: { + width: '100%', + height: '100%', + }, + liveboardId: '<%=liveboardGUID%>', + force12ColLayout: true, + customizations: { + style: { + customCSS: { + variables: { + '--ts-var-liveboard-min-width': '800px', + }, + }, + }, + }, +}); +---- +//// + + [#liveboard-data-cache] === Liveboard browser cache and refresh ThoughtSpot supports browser-side data caching for Liveboards to improve load performance for users who revisit the same Liveboard within a session. Users can clear cache by clicking the refresh icon in the Liveboard header. @@ -454,83 +549,8 @@ To open the **Download** modal with the XLSX option selected when the `isLiveboa * `HostEvent.DownloadAsCsv` + To open the **Download** modal with the CSV option selected when `isLiveboardXLSXCSVDownloadEnabled` parameter is enabled in the embed view. -[#force-12col-layout] -=== Force 12-column layout in embedded Liveboards - -By default, embedded Liveboards use a responsive layout that collapses from 12 columns to 2 columns at container widths of 1024px or less, and to a single column at 630px or less. - -Use the `force12ColLayout` property to prevent this collapse and keep the 12-column layout at all container widths. - -To force the 12-column layout, set `force12ColLayout` to `true` in the `LiveboardViewConfig` object: - -[source,JavaScript] ----- -const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { - frameParams: { - width: '100%', - height: '100%', - }, - liveboardId: '<%=liveboardGUID%>', - force12ColLayout: true, -}); ----- - -When `force12ColLayout` is `true`: - -* The Liveboard always renders in the 12-column layout, regardless of the container width. -* Tiles shrink proportionally as the container narrows. -* The layout never collapses to 2-column or single-column. -//* The `isMobileResponsiveLiveboardEnabled` property has no effect. - -The property is also supported on `AppEmbed` via `AppViewConfig`: - -[source,JavaScript] ----- -const appEmbed = new AppEmbed(document.getElementById('ts-embed'), { - frameParams: { - width: '100%', - height: '100%', - }, - force12ColLayout: true, -}); ----- - -==== Set a minimum width for horizontal scrolling - -When `force12ColLayout` is `true`, tiles shrink as the container narrows. -To prevent tiles from compressing below a usable size, use the `--ts-var-liveboard-min-width` CSS variable to set a minimum container width. -Below this threshold, a horizontal scrollbar appears instead of further tile compression. - -[source,JavaScript] ----- -const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { - frameParams: { - width: '100%', - height: '100%', - }, - liveboardId: '<%=liveboardGUID%>', - force12ColLayout: true, - customizations: { - style: { - customCSS: { - variables: { - '--ts-var-liveboard-min-width': '800px', - }, - }, - }, - }, -}); ----- - -[NOTE] -==== -The CSS variables `--ts-var-liveboard-dual-column-breakpoint` and `--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the responsive layout collapses. -Use `force12ColLayout: true` when you want to prevent layout collapse entirely, rather than adjust the breakpoint thresholds. -For more information about the CSS layout variables available for Liveboard layout control, see xref:customize-css-styles.adoc#liveboard-layout-vars[Liveboard layout CSS variables]. -==== === Liveboard grouping and styling -[earlyAccess eaBackground]#Early Access# You can now create a visual group of Answers and note tiles together in the Liveboard. You can select multiple Answers and notes in the Liveboard editor. You can also style parts of the Liveboard, groups and Answers with the new styling panel. To enable this feature, set `isLiveboardMasterpiecesEnabled` to `true`. diff --git a/modules/ROOT/pages/events-hostEvents.adoc b/modules/ROOT/pages/events-hostEvents.adoc index 732726929..690f8f3b3 100644 --- a/modules/ROOT/pages/events-hostEvents.adoc +++ b/modules/ROOT/pages/events-hostEvents.adoc @@ -319,6 +319,55 @@ Fires when a change occurs in the data sources, including the initial load of th Fires when a change occurs in the search bar, including the initial load of the `SearchEmbed` component. The returned object includes a `data.search` property with the TML search query from the search box. //// +[#open-add-filter-parameter-modal] +=== Opening the Add filter and Add parameter modals + +`HostEvent.OpenAddFilterModal` and `HostEvent.OpenAddParameterModal` let you programmatically open the *Add filter* and *Add parameter* panels in the Liveboard edit header in `LiveboardEmbed`, triggering the same UI panels a user opens by clicking those buttons. + +Both events are no-payload triggers — they take no parameters and open the respective panel directly. + +[IMPORTANT] +==== +The Liveboard must be in edit mode when you trigger either event. If the Liveboard is not in edit mode, the event is silently ignored. +==== + +==== HostEvent.OpenAddFilterModal + +Triggers the *Add filter* panel in the Liveboard edit header. + +[source,JavaScript] +---- +liveboardEmbed.trigger(HostEvent.OpenAddFilterModal); +---- + +==== HostEvent.OpenAddParameterModal + +Triggers the *Add parameter* panel in the Liveboard edit header. + +[source,JavaScript] +---- +liveboardEmbed.trigger(HostEvent.OpenAddParameterModal); +---- + +==== Actions and event behaviour + +The following rules apply to both events: + +* Hiding the *Add filter* or *Add parameter* button using `hiddenActions` (for example, `hiddenActions: [Action.AddFilter]` or `hiddenActions: [Action.AddParameter]`) does not block these events. The panel still opens when the event is triggered. +* Disabling the button using `disabledActions` blocks the event. The panel does not open. + +[source,JavaScript] +---- +const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { + liveboardId: '<%=liveboardGUID%>', + disabledActions: [Action.AddFilter], +}); + +// This will NOT open the Add filter panel — the action is disabled +liveboardEmbed.trigger(HostEvent.OpenAddFilterModal); +---- +When `AddFilter` is in `disabledActions`, `HostEvent.OpenAddFilterModal` is blocked. + == Related resources * See xref:EmbedEvent.adoc[EmbedEvent] and xref:HostEvent.adoc[HostEvent] SDK documentation. From 0522c1940c0b7e5a0b4189093f10104b4ea5f996 Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Mon, 31 Aug 2026 22:09:27 +0530 Subject: [PATCH 4/6] express release --- modules/ROOT/pages/customize-css-styles.adoc | 19 +++--- modules/ROOT/pages/embed-pinboard.adoc | 66 +++----------------- 2 files changed, 17 insertions(+), 68 deletions(-) diff --git a/modules/ROOT/pages/customize-css-styles.adoc b/modules/ROOT/pages/customize-css-styles.adoc index 38c435325..db22ecf18 100644 --- a/modules/ROOT/pages/customize-css-styles.adoc +++ b/modules/ROOT/pages/customize-css-styles.adoc @@ -239,30 +239,27 @@ image::./images/lb-grp-styling.png[CSS customization for Liveboard groups] [#liveboard-layout-vars] == #Liveboard layout# -Use the following CSS variables to control the column layout and responsive behavior of embedded Liveboards. +Use the following CSS variables to control the column layout and responsive behavior of +embedded Liveboards. [width="100%" cols="5,7"] [options="header"] |==== |Variable |Description + |`--ts-var-liveboard-dual-column-breakpoint` -|Sets the container width threshold (in pixels) at which the Liveboard layout collapses from 12 columns to 2 columns. +|Sets the container width threshold at which the Liveboard layout collapses from 12 columns +to 2 columns. The default breakpoint is `1024px`. Accepts any valid CSS length value, for example, `900px`. |`--ts-var-liveboard-single-column-breakpoint` -|Sets the container width threshold (in pixels) at which the Liveboard layout collapses from 2 columns to a single column. +|Sets the container width threshold at which the Liveboard layout collapses from 2 columns +to a single column. The default breakpoint is `630px`. -Accepts any valid CSS length value, for example, `480px`. - -|`--ts-var-liveboard-min-width` -|Sets the minimum container width at which a horizontal scrollbar appears when `force12ColLayout` is enabled. -Below this threshold, tiles do not compress further and a horizontal scrollbar appears instead. -Accepts any valid CSS length value, for example, `800px`. -Available in SDK v1.53.0 and ThoughtSpot Cloud 26.10.0.cl and later. +Accepts any valid CSS length value, for example, `480px` |==== -For more information about forcing a fixed 12-column layout, see xref:embed-pinboard.adoc#force-12col-layout[Force 12-column layout in embedded Liveboards]. [#vizStyle] == Visualization and Answer diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index 48227d675..6cbdb26d9 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -279,16 +279,15 @@ The current 12 column layout changes to 2 columns per row at 1024px, and to 1 co These breakpoint widths are customizable for the embedded customers. Contact ThoughtSpot support for assistance with customization. [#force-12col-layout] -=== Force 12-column layout in embedded Liveboards - +=== #12-column layout in embedded Liveboards# By default, embedded Liveboards use a responsive layout that collapses from 12 columns to 2 columns at container widths of 1024px or less, and to a single column at 630px or less. -Use the `force12ColLayout` property to prevent this collapse and keep the 12-column layout -at all container widths. +Use the `isLiveboardAlwaysOn12ColLayout` property in the SDK to prevent this collapse and keep the +12-column layout at all container widths. -To force the 12-column layout, set `force12ColLayout` to `true` in the `LiveboardViewConfig` -object: +To force the 12-column layout, set `isLiveboardAlwaysOn12ColLayout` to `true` in the +`LiveboardViewConfig` object: [source,JavaScript] ---- @@ -298,17 +297,10 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { height: '100%', }, liveboardId: '<%=liveboardGUID%>', - force12ColLayout: true, + isLiveboardAlwaysOn12ColLayout: true, }); ---- -When `force12ColLayout` is `true`: - -* The Liveboard always renders in the 12-column layout, regardless of the container width. -* Tiles shrink proportionally as the container narrows. -* The layout never collapses to 2-column or single-column. -* The `isMobileResponsiveLiveboardEnabled` property has no effect. - The property is also supported on `AppEmbed` via `AppViewConfig`: [source,JavaScript] @@ -318,61 +310,21 @@ const appEmbed = new AppEmbed(document.getElementById('ts-embed'), { width: '100%', height: '100%', }, - force12ColLayout: true, + isLiveboardAlwaysOn12ColLayout: true, }); ---- -[NOTE] -==== -Set `force12ColLayout` only via the SDK configuration object. -Do not pass `force12ColLayout=false` as a URL query parameter — string values in URL -parameters are not parsed as Booleans and may produce unexpected results. -==== -// SOURCE: scaligent PR #67806, review comment r218971 - [NOTE] ==== The CSS variables `--ts-var-liveboard-dual-column-breakpoint` and `--ts-var-liveboard-single-column-breakpoint` control the pixel thresholds at which the responsive layout collapses. -Use `force12ColLayout: true` when you want to prevent layout collapse entirely, rather than -adjust the breakpoint thresholds. +Use `isLiveboardAlwaysOn12ColLayout: true` when you want to prevent layout collapse +entirely, rather than adjust the breakpoint thresholds. For more information about the CSS layout variables available for Liveboard layout control, see xref:customize-css-styles.adoc#liveboard-layout-vars[Liveboard layout CSS variables]. ==== - -//// -==== Set a minimum width for horizontal scrolling - -When `force12ColLayout` is `true`, tiles shrink as the container narrows. -To prevent tiles from compressing below a usable size, use the `--ts-var-liveboard-min-width` -CSS variable to set a minimum container width. -Below this threshold, a horizontal scrollbar appears instead of further tile compression. - -[source,JavaScript] ----- -const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { - frameParams: { - width: '100%', - height: '100%', - }, - liveboardId: '<%=liveboardGUID%>', - force12ColLayout: true, - customizations: { - style: { - customCSS: { - variables: { - '--ts-var-liveboard-min-width': '800px', - }, - }, - }, - }, -}); ----- -//// - - [#liveboard-data-cache] === Liveboard browser cache and refresh ThoughtSpot supports browser-side data caching for Liveboards to improve load performance for users who revisit the same Liveboard within a session. Users can clear cache by clicking the refresh icon in the Liveboard header. From f4b6c12996b45856f565cab10260c9d6cc52b2ad Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Mon, 31 Aug 2026 22:28:08 +0530 Subject: [PATCH 5/6] EA content for styling --- modules/ROOT/pages/customize-css-styles.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ROOT/pages/customize-css-styles.adoc b/modules/ROOT/pages/customize-css-styles.adoc index db22ecf18..0730b1fae 100644 --- a/modules/ROOT/pages/customize-css-styles.adoc +++ b/modules/ROOT/pages/customize-css-styles.adoc @@ -208,12 +208,12 @@ Use the following variables to customize the Liveboard page elements. image::./images/custom-css-viz.png[CSS customization Liveboard page] -- [#grp-style] -=== Liveboard grouping and styling [earlyAccess eaBackground]#Early Access# +=== Liveboard grouping and styling Use the following variables to customize the Liveboard visualization groups and style elements. [NOTE] ==== -To enable this feature contact ThoughtSpot support and set `isLiveboardMasterpiecesEnabled` to `true` in the SDK . +To enable this feature set `isLiveboardMasterpiecesEnabled` to `true` in the SDK . ==== [width="100%" cols="7,7"] From 367d5277c538f7403881d1a98b278a2237a3780d Mon Sep 17 00:00:00 2001 From: Rani Gangwar Date: Mon, 31 Aug 2026 22:41:34 +0530 Subject: [PATCH 6/6] edits --- modules/ROOT/pages/embed-pinboard.adoc | 3 +-- modules/ROOT/pages/events-hostEvents.adoc | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc index 6cbdb26d9..3280350b6 100644 --- a/modules/ROOT/pages/embed-pinboard.adoc +++ b/modules/ROOT/pages/embed-pinboard.adoc @@ -192,11 +192,10 @@ const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), { height: '100%', }, liveboardId: '<%=liveboardGUID%>', - liveboardGutter: 16, <1> + liveboardGutter: 16, }); liveboardEmbed.render(); ---- -<1> Specify a non-negative integer value in pixels. The embed value takes precedence over the Liveboard's saved gutter setting. The following rules apply to the `liveboardGutter` value: diff --git a/modules/ROOT/pages/events-hostEvents.adoc b/modules/ROOT/pages/events-hostEvents.adoc index 690f8f3b3..4417831df 100644 --- a/modules/ROOT/pages/events-hostEvents.adoc +++ b/modules/ROOT/pages/events-hostEvents.adoc @@ -320,11 +320,11 @@ Fires when a change occurs in the search bar, including the initial load of the //// [#open-add-filter-parameter-modal] -=== Opening the Add filter and Add parameter modals +=== #Opening the Add filter and Add parameter modals# `HostEvent.OpenAddFilterModal` and `HostEvent.OpenAddParameterModal` let you programmatically open the *Add filter* and *Add parameter* panels in the Liveboard edit header in `LiveboardEmbed`, triggering the same UI panels a user opens by clicking those buttons. -Both events are no-payload triggers — they take no parameters and open the respective panel directly. +Both events are no-payload triggers, they take no parameters and open the respective panel directly. [IMPORTANT] ====