SCAL-332993-332931

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]
@@ -207,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"]
@@ -235,6 +236,30 @@ 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 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 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`
+|====
+
 
 [#vizStyle]
 == Visualization and Answer

modules/ROOT/pages/embed-pinboard.adoc

@@ -177,6 +177,39 @@ 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,
+});
+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 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:
 
@@ -244,6 +277,53 @@ 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]
+=== #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 `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 `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,
+});
+----
+
+The 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,
+});
+----
+
+[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 `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].
+====
+
 [#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.
@@ -420,8 +500,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.
 
+
 === 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`.

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.