diff --git a/modules/ROOT/pages/customize-css-styles.adoc b/modules/ROOT/pages/customize-css-styles.adoc index 067cd0da9..38c435325 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] @@ -235,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 0f2c70d79..d14b8fccd 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 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 consistent tile spacing across embedded Liveboards, regardless of how individual Liveboards are styled in ThoughtSpot. + +[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 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 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 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,81 @@ 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#