import {
AppEmbed,
PrimaryNavbarVersion, // Enum for V3 navigation experience
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 V4 home page experience
discoveryExperience: {
primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 navigation experience
homePage: HomePage.Focused, // Enable V4 focused home page experience
},
showPrimaryNavbar: true,
//... other embed view configuration attributes
});Customize home page experience
Table of Contents
Developers can customize the home page experience in full application embedding to show either the V3 modular layout or the V4 focused home page.
|
Important
|
Starting from Visual Embed SDK 1.51.0, the classic v1 and v2 navigation and homepage experience are deprecated. Deployments using full application embed will be upgraded to the V3 navigation and home page experience. When your application is switched to V3 experience, you can choose to use the |
Home page layout🔗
In the classic (V1) experience, the home page has a static layout and does not support SDK modular customization settings.
The SDK provides the homePage attribute to set the desired home page layout:
-
homePage: HomePage.FocusedEarly Access
Enables the V4 home page experience. -
homePage: HomePage.ModularWithStylingChanges
Enables the V3 modular home page experience with customizable components, styling options, and enhanced layout. This experience includes charts in the Watchlist module that are arranged horizontally. Each chart includes menu actions to remove the KPI charts from the watchlist and create alerts, and allows drag-and-drop reordering.
V4 focused home page experience🔗
The V4 focused home page (HomePage.Focused) provides a contemporary experience designed to highlight the most relevant content immediately. It provides quick access to the Spotter interface and consolidates the Watchlist KPIs and Recents sections into a unified, focused layout.
The following example shows how to enable the V4 focused home page experience:
Customization settings for home page🔗
The following customization settings are available for the modular home page in the V3 and V4 experience modes.
| Feature | V3 experience | hideHomepageLeftNavHides the left navigation panel on the home page. |
|---|---|---|
✓ Supported | ✓ Supported |
|
✓ Supported | ✓ Supported |
|
✓ Supported | x Not supported |
|
✓ Supported | x Not supported | Left navigation panel customization |
✓ Supported | ✓ Supported | Custom reordering of left nav items |
Control the visibility of home page modules🔗
In the V3 experience mode, 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:
hiddenHomepageModules🔗
hiddenHomepageModules?: HomepageModule[];Hides specific modules on the home page. Applies to V3 (HomePage.ModularWithStylingChanges) and V4 (HomePage.Focused) home page experiences.
reorderedHomepageModules🔗
reorderedHomepageModules?: HomepageModule[];Reorders modules on the home page. Applies to V3 (HomePage.ModularWithStylingChanges) only.
homePageModules🔗
homePageModules?: HomepageModule[];Specifies which modules to show on the home page. Applies to V3 (HomePage.ModularWithStylingChanges) only.
HomepageModule enum values🔗
| Value | Description |
|---|---|
| The Watchlist module showing pinned objects. |
| The My Library module showing user’s content. |
| The Learning module with onboarding content. |
| The Trending module showing trending content. |
| The Answers module showing recent Answers. |
HomeLeftNavItem enum values🔗
Use HomeLeftNavItem to customize the left navigation panel items on the home page.
Applies to V3 (HomePage.ModularWithStylingChanges) and V4 (HomePage.Focused) home page experiences.
| Value | Description |
|---|---|
| The Home item in the left navigation panel. |
| The Liveboards item in the left navigation panel. |
| The Answers item in the left navigation panel. |
| The SpotIQ item in the left navigation panel. |
| The Monitor Alerts item in the left navigation panel. |
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 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
});- V4 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.Focused, // Enable V4 home page experience
},
// Set the home page search bar to show the Spotter / AI search bar
homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER
// Other view configuration attributes
});