Customize the home page and navigation for full application embedding
ThoughtSpot supports the following experience modes in full application embedding:
-
V3 experience (
HomePage.ModularWithStylingChanges)βThe default home page experience as of ThoughtSpot Cloud 26.8.0.cl. Includes the left navigation panel, customizable modules, and styling changes. -
V4 experience (
HomePage.Focused)βAn enhanced home page experience with a focused layout and additional customization options.
|
Important
|
The classic V1 and V2 navigation and homepage experience modes are deprecated as of ThoughtSpot Cloud 26.8.0.cl. Starting from this release, all embedded sessions render in the V3 navigation experience by default. |
UI experience modesπ
ThoughtSpot supports V3 and V4 home page and navigation experiences for full application embedding.
| Feature | V3 experienceHomePage.ModularWithStylingChanges | V4 experienceHomePage.Focused |
|---|---|---|
| β Supported | β Supported |
| β Supported | β Supported |
| β Supported | x Not supported |
| β Supported | x Not supported |
Left navigation panel customization | β Supported | β Supported |
Custom reordering of left nav items | β Supported | β Supported |
V3 navigation and home page experience
V4 home page experience
Customize the embedded application UI for your usersπ
Before updating the UI experience, review the key features, limitations, and available SDK controls for customizing navigation and the home page.
For more information about the layout and UI elements in the V3 experience, refer to the ThoughtSpot Product Documentation.
Upgrade to the V3 experienceπ
If you are using the classic (V1) experience in your embed, ThoughtSpot recommends migrating directly to the V3 experience for an improved user interface, enhanced home page customization options, and navigation controls.
Before you begin:
-
Verify if your ThoughtSpot instance has the V3 experience enabled at the cluster level.
-
Ensure that your embedding environment has the latest version of the Visual Embed SDK. The minimum supported version for the V3 experience is v1.40.0.
-
If you are using direct CSS selectors for style customization, test your customization in the Playground.
-
If your embed uses action customization and the SDK events for app interactions, test your customizations for compatibility across different UI experiences to ensure seamless migration.
V3 experience settings in the SDKπ
To enable the V3 experience, you must use the discoveryExperience object in the SDK. This object supports the following properties:
-
primaryNavbarVersion
Enables the V3 experience. The valid value isPrimaryNavbarVersion.Sliding. -
homePage
Enables the modular or focused home page experience. Valid values include:-
HomePage.ModularWithStylingChanges(Recommended for V3)
Enables the V3 modular home page experience. You must includeprimaryNavbarVersionto update the UI experience to the V3 home page. -
HomePage.FocusedEarly Access
Enables the V4 focused home page experience, which consolidates the Watchlist and Recents sections into a single, focused view.
-
Enable the V4 focused home page experienceπ
The V4 focused home page experience is available with Visual Embed SDK v1.50.0 and ThoughtSpot Cloud 26.7.0.cl. This experience consolidates the Watchlist and Recents sections into a unified, focused view designed to surface the most relevant content for users.
|
Important
|
The focused home page experience is an Early Access feature and is disabled by default. To enable this feature, contact your ThoughtSpot administrator. |
To enable the V4 focused home page, set homePage to HomePage.Focused in the discoveryExperience object:
// Import required components and enums
import {
AppEmbed,
HomePage, // Enum for home page experience settings
PrimaryNavbarVersion // Enum for V3 navigation experience
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
discoveryExperience: {
primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 navigation experience
homePage: HomePage.Focused, // Enable V4 focused home page experience
},
showPrimaryNavbar: true,
//... other embed view configuration attributes
});
Post upgrade checksπ
After you enable the V3 experience:
-
Verify whether the UI shows the new navigation and home page by default.
-
Verify that all the customization settings are applied correctly.
-
If you have set up custom routes for navigation within your embedded app, verify navigation workflows and check for breaking changes.
Customize navigation experienceπ
For information about the navigation elements in each UI experience mode and the related customization settings in the SDK, see Customize navigation experience.
Customize home page experienceπ
For information about the home page components and the related customization settings in the SDK, see Customize home page experience.
Customize 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 customize the default landing page settings using the pageId or path attribute.
Customize 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.
List layoutsπ
If your embed has the V3 navigation and homepage experience enabled, the ListPage V3 experience is enabled by default.
The list layouts in full app embedding 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 ListPage V3 experience includes the Views column and the following enhancements:
-
Sorting options for Name, Author, and Views columns.
-
Filter addition by clicking the column header without opening the filter modal. This option is available for Favorites, Views columns, and Verified columns.
Include or exclude columns from list layoutsπ
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:
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
});
|
Note
|
The |
Additional 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;
}
An example of using direct selectors in a file is available in the complete.css sample on the ThoughtSpot GitHub repository.
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.