# Go To Page

{% embed url="<https://youtu.be/ynTx9a_ZCbg?si=bv7lMIMvuLberpwU>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=ynTx9a_ZCbg>

The **Go To Page** action enables navigation between pages in your app. It provides advanced controls for managing the navigation stack, passing data between pages, and handling return values from destination pages.

***

#### 📦 Properties

| Property                            | Type                | Required | Description                                                  |
| ----------------------------------- | ------------------- | -------- | ------------------------------------------------------------ |
| `page and its args`                 | Dropdown and value  | ✅        | Add Page from dropdown and fill their respective page params |
| `Expect Result`                     | Boolean             | ❌        | Wait for page to return data before continuing               |
| `Remove Previous Screen From Stack` | Boolean             | ❌        | if true, it triggers `Route Name to pop until`               |
| `Route Name to pop until`           | Expression (String) | ❌        | Remove routes up to specified route name                     |
| `onResult`                          | Action Flow         | ❌        | Actions to run when page returns data                        |

***

#### ✅ Common Use Cases

* Navigating to detail screens from list views
* Opening form pages and waiting for user input
* Implementing login flows with stack clearing
* Creating wizard/stepper workflows with data passing
* Deep linking to specific pages with parameters

***

#### ⚙️ Default Behavior

By default:

| Behavior             | Description                                          |
| -------------------- | ---------------------------------------------------- |
| **Stack Management** | Preserves navigation history (can go back)           |
| **Data Passing**     | Accepts page arguments via page params               |
| **Result Handling**  | No result returned unless `Expect Result` is enabled |
| **Animation**        | Platform-default page transition animation           |

***

#### 🛠️ How to Use

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-8e194af4cf1c274627dad10092b54a8632595456%2Ffire_event_action.png?alt=media" alt="Call External Method action configuration showing message name and payload fields"><figcaption><p>Call External Method action configuration in Digia Studio</p></figcaption></figure>

1. Add the action to a widget event (e.g., button tap, list item click)
2. Choose **Go To Page** from the action list
3. Select the target page from the `page and its args` dropdown and fill in the page parameters
4. Optionally enable `Expect Result` and configure stack management options

***

#### 📄 Page Selection and Parameters

The `page and its args` property allows you to select a target page from a dropdown and fill in its respective page parameters. The page parameters are defined in the page's configuration and can include various data types like strings, numbers, or objects.

***

#### 🔄 Result Handling

When `Expect Result` is enabled and the target page returns data using the **Pop** action, the result is available in the `onResult` flow:

```javascript
// In onResult flow - access returned data
{
  "type": "setAppState",
  "updates": [
    {
      "stateName": "formData",
      "newValue": "result.data"
    }
  ]
}
```

***

#### 🗂️ Stack Management Options

**Preserve Stack (Default):**

* Normal navigation, can go back
* Stack: A → B → C

**Remove All Previous:**

* `Remove Previous Screen From Stack: true`
* Clears entire stack, can't go back
* Stack: C (A and B removed)

**Remove Until Route:**

* Set `Route Name to pop until` to a specific route name
* Removes screens until specified route
* Stack: Home → C (intermediate screens removed)

***

#### 💡 Examples

**Basic Navigation:**

* Select "productDetail" page and set `productId` parameter to 123

**Navigation with Data:**

* Select "editProfile" page
* Set `userId` to `appState.currentUserId` and `userName` to `appState.userName`

**Form with Result Handling:**

* Select "addItemForm" page
* Enable `Expect Result`
* Configure `onResult` actions to handle returned data

**Login Flow (Clear Stack):**

* Select "dashboard" page
* Enable `Remove Previous Screen From Stack`
* Can't go back to login screen

**Remove Until Home:**

* Select "settings" page
* Set `Route Name to pop until` to "home"
* Removes all intermediate screens, keeping only home

**Dynamic Page Navigation:**

* Use expressions to dynamically select page and set parameters

{% embed url="<https://digiaacademy.portal.trainn.co/share/go-to-page-examples>" %}

***

#### 🔗 Related Documentation

* [Finding Page/Component Slugs](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/platform-overview/builder-tool/finding-slugs.md) - How to locate and copy page slugs for navigation
* [Pages Overview](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/building-ui/pages.md) - Understanding page structure and properties
* [Pop Action](https://docs.digia.tech/logic-and-interaction/actions/pop) - Return data from navigated pages