# Pass Parameter **Pass Parameter** is a Page Designer feature that allows you to **send data from one page to another** during navigation.\ This is commonly used to pass user input, context data, or identifiers (such as IDs) between pages. Typical use cases include: * Passing search or form input to a detail page * Navigating from a list page to a detail page * Preserving user context between pages In ONEWEB, parameters are passed using **Page State Parameters** and **Query Parameters**. *** ### Example Scenario In this example, we will: * Create **Page1** (source page) * Create **Page2** (target page) * Pass **First Name** and **Last Name** values from Page1 to Page2 *** ### Step 1: Create Page State Parameters in Page2 1. Open **Page2** in Page Designer 2. Create **Page State Parameters** to receive values from Page1

Create Page State Parameters in Page2

{% hint style="info" %} For detailed instructions, refer to the\ documentation. {% endhint %} *** ### Step 2: Bind Page Parameters to UI Components in Page2 1. Add **Label** components to Page2 2. Map each Label to the corresponding Page State Parameter

Create label fields in Page2

This allows Page2 to display values received from Page1. *** ### Step 3: Create Page State Parameters in Page1 1. Open **Page1** 2. Create **Page State Parameters** to hold user input

Create Page State Parameters in Page1

*** ### Step 4: Bind Input Fields to Page1 State Parameters 1. Add **Input** fields (e.g. Text Fields) to Page1 2. Map each input field to a Page State Parameter

Bind input fields to Page1 state parameters

*** ### Step 5: Configure Navigation with Query Parameters 1. Add a **Button** to Page1 (e.g. “To Page2”) 2. Configure the button to link to **Page2** 3. Click the **Query Parameter** icon to pass values *Configure page navigation with Query Parameters*
*** ### Step 6: Set Query Parameter Values 1. Map Page1 state parameters to Page2 parameters 2. Save the configuration

Set values in Query Parameter screen

*** ### Step 7: Build and Test 1. Build the application 2. Open **Page1** in runtime 3. Enter values into input fields 4. Click **To Page2**

Enter data on Page1

*** ### Result: Parameters Passed Successfully The values entered in Page1 are displayed correctly in Page2.

Values displayed on Page2

*** ### Design Perspective As part of **Page Designer best practices**: * Use Page State Parameters to manage page‑level data * Use Query Parameters for navigation‑based data transfer * Keep parameter names consistent and meaningful * Avoid passing large or sensitive data via query parameters Pass Parameter functionality enables **clean, modular, and context‑aware navigation** between pages. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/pass-parameter.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.