# Set default landing page and navigation > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/set-default-page # Set default landing page and navigation In full application embedding, the home page is set as the default landing page when the embedded app loads. To change the default settings, you can use either the `pageId` or `path` parameter in the Visual Embed SDK. If both `path` and `pageId` properties are specified, the `path` definition takes precedence. ## Set the default page using pageId The `pageId` parameter in `AppEmbed` sets the default ThoughtSpot page to load using a value from the [Page enumeration]({{navprefix}}/{{Page}}). Valid values for this attribute are: - `Page.Home` for the ThoughtSpot **Home** page - `Page.Search` for the ThoughtSpot **Search** page - `Page.Answers` for the **Answers** page - `Page.Liveboards` for the **Liveboards** page \* - `Page.Data` for the **Data** page - `Page.SpotIQ` for the **SpotIQ** analyses page - `Page.Collections` for the **Collections** list page ### Example ```javascript //Import Page enumeration import { AppEmbed, Page } from '@thoughtspot/visual-embed-sdk'; const embed = new AppEmbed("#embed", { // Set the initial page pageId: Page.Liveboards, //... other embed view configuration attributes }); ``` ## Set the default page via path The `path` parameter allows setting the default ThoughtSpot application page using a URL path. Valid strings for the `path` parameter are: | Page | Classic experience | V2 and v3 experience | | --- | --- | --- | | Home | `path: "home"` | `path: "home"` `path: "insights/home"` | | Insights | `path: "home"` | `path: "home"` `path: "insights/home"` | | Liveboards list page | `path: "pinboards"` | `path: "pinboards"` `path: "home/liveboards"` `path: "insights/liveboards"` | | Liveboard page | `path: "pinboard/"` | `path: "pinboard/"` | | Answers list page | `path: "answers"` | `path: "answers"` `path: "home/answers"` `path: "insights/answers"` | | Saved Answer page | `path: "saved-answer/"` | `path: "saved-answer/"` | | Spotter | `path: "conv-assist"` | `path: "conv-assist"` `path: "insights/conv-assist"` | | Search data | `path: "answer"` | ``path: "answer" `path: "insights/answer"`` | | Data | `path: "data/tables/"` | `path: "data/tables/"` | | Model, tables, views | `path: "data/tables/"` | `path: "data/tables/"` | | SpotIQ analysis list page | `path: "insights"` | `path: "insights"` `path: "insights/spotiq-analysis"` | | SpotIQ analysis page | `path: "insight/"` | `path: "insight/"` | | Monitor | `path: "monitor"` | Supported settings include: - `path: "monitor"` - `path: "home/monitor-alerts"` - `path: "insights/monitor-alerts"` | | Collections | `path: "collections"` | Supported settings include: \* `path: "collections"` \* `path: "home/collections"` | ### Example ```javascript const embed = new AppEmbed("#embed", { // Set the initial page path: 'pinboard/96a1cf0b-a159-4cc8-8af4-1a297c492ff9', //... other embed view configuration attributes }); ``` ## Customize navigation between pages within the app To programmatically control navigation between the pages within the embedded app, you can use the `navigateToPage()` method and custom actions. ### Using navigateToPage() The `AppEmbed` object includes a `navigateToPage()` method that switches the currently loaded page in the embedded view. ``` navigateToPage(path: string | number, noReload?: boolean): void ``` | Parameter | Description | | --- | --- | | `path` | _String_. The page to navigate to. Accepts the same string values as the `pageId` or `path` attributes (for example, `'answers'`, `'pinboard/'`, or a `Page` enum value). When `noReload` is set to `true`, this parameter also accepts a number: use `1` to go forward or `-1` to go back in history. | | `noReload` | _Boolean_. If `true`, navigation is triggered through the `HostEvent.Navigate` event without reloading the iframe. **Default:** `false` | > **NOTE:** navigateToPage() requires that render() has been called on the AppEmbed instance before it is invoked. If render() has not been called, the method exits silently with a warning in the console. ```JavaScript // Navigate to the Answers page (reloads the iframe) embed.navigateToPage(Page.Answers); // Navigate to the Answers page without reloading the iframe embed.navigateToPage(Page.Answers, true); // Navigate back one page in history (noReload must be true) embed.navigateToPage(-1, true); ``` ### Relationship between navigateToPage() and HostEvent.Navigate When `noReload` is set to `true`, `navigateToPage()` internally triggers [HostEvent.Navigate]({{navprefix}}/{{HostEvent}}#_navigate) with the specified `path` as the event payload. You can also trigger this host event directly to achieve the same no-reload navigation behavior: ```JavaScript // Equivalent to embed.navigateToPage('pinboards', true) embed.trigger(HostEvent.Navigate, 'pinboards'); // Navigate back one page in history embed.trigger(HostEvent.Navigate, -1); ``` > **NOTE:** HostEvent.Navigate is applicable only to AppEmbed. It is not supported for LiveboardEmbed, SearchEmbed, or SpotterEmbed. ### Using navigateToPage() with a custom action To add a custom action for in-app navigation, create a [callback custom action]({{navprefix}}/{{custom-actions-callback}}) and define the navigation path. In this example, the **view-report** action on a Liveboard page calls the `navigateTo` method to open a specific Answer page when the user clicks the **View report** button. ```JavaScript // Listen for the CustomAction event triggered from the embedded ThoughtSpot app appEmbed.on(EmbedEvent.CustomAction, async (payload: any) => { // Check if the custom action ID is 'view-report' if (payload.payload.id === 'view-report') { // Navigate to the specific saved Answer page using its GUID appEmbed.navigateToPage( 'saved-answer/3da14030-11e4-42b2-8e56-5ee042a8de9e' ); } }); ``` To navigate to a specific application page without reloading the iframe, set the `noReload` parameter to `true`. When `noReload` is `true`, the navigation is handled via `HostEvent.Navigate` and the browser history is updated without a full iframe reload: ```javascript // Listen for the CustomAction event triggered from the embedded ThoughtSpot app appEmbed.on(EmbedEvent.CustomAction, async (payload: any) => { // Check if the custom action ID is 'view-report' if (payload.payload.id === 'view-report') { // Navigate to the specific saved Answer page using its GUID, // and set noReload to true to avoid reloading the iframe appEmbed.navigateToPage('saved-answer/3da14030-11e4-42b2-8e56-5ee042a8de9e', true); } }); ``` ### Using history.back() Page changes within the `AppEmbed` component register as part of the embedding app’s history to the web browser. The standard JavaScript `history.back()` function will cause the `AppEmbed` component to go to the previously loaded page up until the very first ThoughtSpot page loaded within the component. ## Detect changes in the currently loaded page Various actions the user takes within the embedded ThoughtSpot application may cause navigation within ThoughtSpot. User actions within the embedded ThoughtSpot application can trigger navigation events within ThoughtSpot. The embedding application can listen for these navigation changes via `EmbedEvent.RouteChange` and handle the event response. The response can include a `currentPath` property, which is the path after the ThoughtSpot domain, for example: pinboard/96a1cf0b-a159-4cc8-8af4-1a297c492ff9 To parse the `currentPath` into varying useful components, you can include this `tsAppState` object code in the global scope for use by other web application code: ```JavaScript // Simple global object to handle details about what is visible in the AppEmbed component at a given moment let tsAppState = { currentPath: startPath, currentDatasources: [], // Can be set later when detected from TML or other events // return to what is being viewed at the moment, in the form that will translate to the pageId property if captialized, or path property if not get pageType() { if (this.currentPath.includes('/saved-answer/')){ return 'answer'; } else if (this.currentPath.includes('/pinboard/')){ return 'liveboard'; } /* * Others are meant to match the exact pageId from SDK */ else if(this.currentPath.includes('/answer/')){ return 'Search'; } else if(this.currentPath.includes('/answers')){ return 'Answers'; } else if (this.currentPath.includes('/pinboards')){ return 'Liveboards'; } else if(this.currentPath.includes('/insights')){ return 'SpotIQ'; } else if(this.currentPath.includes('/monitor')){ return 'Monitor'; } else if(this.currentPath.includes('/data')){ return 'Data'; } else { return 'Home'; } }, // If viewing an Answer or Liveboard, returns the GUID of that object from the parsed URL get objectId() { let pathParts = this.currentPath.split('/'); // '/saved-answer/' is path for Answers (vs. /answer/) if (this.currentPath.includes('/saved-answer/')){ answerGUID = pathParts[2]; return pathParts[2]; } // '/pinboard/' is path for saved Liveboards else if (this.currentPath.includes('/pinboard/')){ let pathParts = this.currentPath.split('/'); // May need adjustment for tabbed views to add in current Tab liveboardGUID = pathParts[2]; return pathParts[2]; } else{ return null; } } } ``` The following example shows the event listener code updating the global `tsAppState` object whenever a change is detected within the embedded ThoughtSpot app: ```JavaScript embed.on(EmbedEvent.RouteChange, (response) => { // console.log("RouteChange fires"); // console.log(response); // tsAppState object has currentPath property, which allows its other methods to parse out pageId, object type, GUIDs etc. tsAppState.currentPath = response.data.currentPath; console.log("TS App page is now: ", tsAppState.currentPath); // Update elements within your web application based on the new state of ThoughtSpot (adjust menu selections, etc.) }) ``` ## Additional resources See also: - [Embed full application]({{navprefix}}/{{full-embed}}) - [Customizing a full application embed]({{navprefix}}/{{full-app-customize}}) - [Creating dynamic menus and navigation]({{navprefix}}/{{page-navigation}}) - [AppViewConfig reference page]({{navprefix}}/{{AppViewConfig}}) - [Host events]({{navprefix}}/{{HostEvent}}) - [Embed Events]({{navprefix}}/{{EmbedEvent}})