|
Important
| The classic (V1) experience and V2 experience modes will be deprecated in an upcoming release in 2026. Therefore, ThoughtSpot recommends upgrading the UI experience of your full application embedding to the V3 experience. |
Customize home page experience
Developers can customize the home page experience in full application embedding to show either the classic layout or the new modular home page.
Home page layoutπ
In the classic (V1) experience, the home page has a static layout and does not support SDK modular customization settings.
In the V3 experience, the SDK provides the homePage attribute to set the desired home page layout:
-
homePage: HomePage.ModularWithStylingChanges
Enables the V3 modular home page experience with customizable components, styling options, and enhanced layout. -
homePage: HomePage.Modular
Enables the basic modular home page experience with customizable components.
After migrating from V2 to V3 experience, the home page experience shows the following changes:
-
The Watchlist module is vertically arranged, includes menu actions to remove the KPI charts from the watchlist and create alerts, and allows drag-and-drop reordering of charts.
-
The Trending module displays separate lists for Liveboards and Answers objects. Both these lists show the objects trending for the last 15 days, or based on the overall views, or both.
-
The Favorites and Learning modules have enhanced visual styles and improved look and feel.
In both V2 and V3, the SDK allows customization to include or exclude modules, change their order, and adjust the overall layout.
Customization settings for home pageπ
The following customization settings are available for the modular home page in the V2 and V3 experience modes.
| SDK property | Classic (V1) experience | V2 experience | V3 experience |
|---|---|---|---|
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| β Supported | β Supported | β Supported |
| β Supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
Control the visibility of home page modulesπ
In the V2 and V3 experience modes, the home page includes sections such as Watchlist, Favorites, Library, Trending charts, and more. You can hide a specific section of the home page and reorder these modules as needed using the hiddenHomepageModules and reorderedHomepageModules configuration options in the embed SDK.
The hiddenHomepageModules and reorderedHomepageModules attributes support the following settings:
| Allowed values | Classic (V1) experience | V2 experience | V3 experience |
|---|---|---|---|
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
| x Not supported | β Supported | β Supported |
Customize home page modules in the V3 experienceπ
The following example shows the configuration properties for customizing the home page modules:
import {
AppEmbed, // Main class to embed the full ThoughtSpot app
PrimaryNavbarVersion // Enum for V3 experience setting
HomePage, // Enum for home page experience settings
HomepageModule // Enum for home page modules
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
// Enable V3 navigation and home page experience
discoveryExperience: {
primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enables V3 experience
homePage: HomePage.ModularWithStylingChanges, // Enables V3 home page
},
// Hide modules from the home page
hiddenHomepageModules: [
HomepageModule.Learning,
HomepageModule.Trending
],
// Custom order for visible modules
reorderedHomepageModules: [
HomepageModule.Search,
HomepageModule.Favorite,
HomepageModule.Watchlist,
HomepageModule.MyLibrary
],
//... other view configuration properties
});
Customize home page modules in the V2 experienceπ
The following example shows the configuration properties for customizing the home page modules in the V2 experience:
import {
AppEmbed, // Main class to embed the full ThoughtSpot app
HomepageModule // Enum for home page modules
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
// Enable V2 experience
modularHomeExperience: true
// Hide modules from the home page
hiddenHomepageModules: [
HomepageModule.Learning,
HomepageModule.Trending
],
// Set the order of home page modules
reorderedHomepageModules: [
HomepageModule.Search,
HomepageModule.Favorite,
HomepageModule.Watchlist,
HomepageModule.MyLibrary
],
//... Other view configuration properties
});
Customize the search experience on home pageπ
You can set the search experience on the home page to function as an object search bar that allows finding popular objects, or as an AI search interface that allows natural language queries or Spotter sessions. You can also choose to hide it from the home page.
To configure your preference, specify the following values in the homePageSearchBarMode attribute.
| Search bar mode | Description |
|---|---|
| Sets the natural language search bar that allows queries in natural language. If Spotter is enabled on your instance, you can use this setting to set the Spotter search bar on the home page. |
| Enables object search that allows users to find objects from the library. |
| Hides the search bar on the home page. Note that it only hides the Search bar on the Home page and doesnβt affect the Object Search bar visibility on the top navigation bar. To hide the search bar on the home page, you can also use the homepageModule: HomepageModule.Search setting. |
|
Note
|
If your instance is using the Classic (v1) experience and if the |
Examplesπ
The following examples show code snippets to set the home page search bar mode to Spotter or AI search in different experience modes:
- V3 experience
import {
AppEmbed,
PrimaryNavbarVersion // Enum for V3 navigation experience
HomePage, // Enum for home page experience settings
HomePageSearchBarMode // Import the enum for search bar mode options
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
discoveryExperience: {
primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable v3 experience
homePage: HomePage.ModularWithStylingChanges // Enable v3 home page experience
},
// Set the home page search bar to show the Spotter / AI search bar
homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER
// Other view configuration attributes
});
- V2 experience
import {
AppEmbed,
HomePageSearchBarMode // Import the enum for search bar mode options
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
modularHomeExperience: true, // Enable v2 modular home page experience
// Set the home page search bar to show the Spotter / AI search bar
homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER
// Other view configuration attributes
});
- Classic (V1) experience
import {
AppEmbed,
HomePageSearchBarMode // Import the enum for search bar mode options
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
// Set the home page search bar to show the Spotter / AI search bar
homePageSearchBarMode: HomePageSearchBarMode.aiAnswer,
// Disable the unified search experience
isUnifiedSearchExperienceEnabled: false,
//... other embed view configuration attributes
});