import {
AppEmbed, // Main class to embed the full ThoughtSpot app
ListPageColumns // Enum for columns on list pages
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
// hide Author, Share, and Tags columns on Answers and Liveboards listing pages
hiddenListColumns: [
ListPageColumns.Author,
ListPageColumns.Share,
ListPageColumns.Tags
],
//... other view config attributes
});Customize your full application embed
Table of Contents
Use the full app embed configuration settings in the Visual Embed SDK to customize the visual experience and home page layout.
Overview🔗
The Visual Embed SDK supports the following customization options in full application embedding:
| Feature | Availability |
|---|---|
Left navigation panel customization | ✓ Supported |
Custom reordering of left nav items | ✓ Supported |
List page customization | ✓ Supported |
Reordering and hiding home page modules | ✓ Supported in modular home page experience |
Navigation experience🔗
In the embed mode, the default experience includes the top and left sliding navigation panels if the showPrimaryNavbar parameter is enabled in the SDK. You can customize these panels using the settings available in the SDK. For more information, see Customize navigation experience.
Home page experience🔗
ThoughtSpot application supports the following types of home page experience:
-
Modular homepage experience: The default home page experience, which includes the left navigation panel, customizable modules, and styling changes.
-
Focused homepage experience: A home page experience with a focused layout and customization options.
For information about the home page components and the related customization settings in the SDK, see Customize home page experience.
List page experience🔗
A list page in ThoughtSpot refers to a page that displays a list of objects, such as Answers, Liveboards, and Liveboard schedules. The list pages include columns for sorting, filtering, tagging, sharing, or deleting objects.
The list layouts typically include columns such as Name, Author, Favorites, Tags, Last Viewed, and more.
For Liveboard lists, a Verified column is available to filter the list by verified objects. In addition to these columns, the list pages include the Views column and the following options:
-
Sorting options for the Name, Author, and Views columns.
-
Column-level filters by author, favorites, last viewed date, or last modified date.
Including or excluding columns🔗
To customize the columns in list pages such as Liveboards and Answers, use the hiddenListColumns attribute with the following List page IDs:
-
ListPageColumns.Authorto show or hide the Author column. -
ListPageColumns.DateSortto show or hide the Last modified column. -
ListPageColumns.Favoritesto show or hide the Favorites column. -
ListPageColumns.Shareto show or hide the Share links in the column. -
ListPageColumns.Tagsto show or hide the Tags column. -
ListPageColumns.Verifiedto show or hide the Verified column in Liveboard lists.
The following example hides specific columns using the hiddenListColumns array:
|
Note
|
The |
Default loading page and navigation routes🔗
In full application embedding, the home page is set as the default landing page when the embedded app loads. You can set the default landing page using the pageId or path attribute. For more information, see customize the default landing page settings.
Style customization controls🔗
CSS customization allows overriding default styles in ThoughtSpot application pages. You can also use Theme Builder to explore the available CSS variables.
If there is a page element you cannot hide using ThoughtSpot or Visual Embed SDK options, you can use a CSS selector to target the element and apply CSS properties such as display: none, visibility: hidden, or height: 0px to hide it from the UI. To find the appropriate selector, use your browser’s Inspect tool to examine the style element in the Elements section of the browser’s Developer Tools.
.bk-data-scope .left-pane .header-lt {
display: none !important;
visibility: hidden !important;
}You can also declare direct selectors using the rules property in the Visual Embed SDK configuration. This is useful for real-time testing, especially in the Visual Embed SDK playground. Note the required format for encoding CSS rules as JavaScript objects. An example of using direct selectors in a file is available in the complete.css sample on the ThoughtSpot GitHub repository.