URL Parameters Panel

The URL Parameters panel in the canvas header lets you configure and test path and query parameters for your pages without leaving the canvas. This panel provides a quick way to set up dynamic URLs and preview how your page will look with different parameter values while you're building.

Understanding URLs

Before configuring parameters in the URL Parameters panel, it's helpful to understand how URLs work in WeWeb and the two types of parameters you can use.

URL Structure

A complete URL in WeWeb can contain both path parameters and query parameters:

https://yourdomain.com/marketplace/{{category|all}}?sort=price_asc&inStock=true

Breaking this down:

• yourdomain.com — Your domain (your website's main address)
• /marketplace/ — Static path segment
• {{category|all}} — Path parameters (dynamic segments in the URL path)
• ?sort=price_asc&inStock=true — Query parameters (optional parameters after the ?)

Simple URLs

When you create a page in WeWeb, it automatically gets a simple URL. These URLs are straightforward and static, meaning they don't change.

For example, in the URL https://yourdomain.com/products:

• yourdomain.com Is your domain
• /products Is the path to your specific page

Some examples of simple URLs:

URL	Description
/about	Your About page
/products	Your Products page
/contact	Your Contact page

PATH RESTRICTIONS

Path may only contain a-z, 0-9, _, - and /, and can only start and end with a-z or 0-9.

Dynamic URLs with Path Parameters

Sometimes you need URLs that can change based on what content you're showing. Path parameters let you create dynamic segments within your URL path.

For example:

• Template: products/category/{{param|default}}
• Real URL: products/category/smartphones
• Another URL: products/category/beauty

Path parameters are best for:

• Product detail pages — /products/{{id|1}}
• User profiles — /users/{{username|guest}}
• Blog posts — /blog/{{category|news}}/{{slug|latest}}
• Required content identification — When the parameter defines the primary content of the page

Dynamic URLs with Query Parameters

Query parameters are optional values appended to your URL using ? and & symbols. Unlike path parameters, they don't change the page routing.

For example:

• Base URL: products
• With queries: products?sort=price_asc&category=electronics&inStock=true

Query parameters are best for:

• Filtering and sorting — ?sort=price_asc&inStock=true
• Search terms — ?q=laptop&category=electronics
• Pagination — ?page=2&limit=20
• Tracking and analytics — ?ref=homepage&campaign=summer
• Authentication flows — ?token=abc123 (password resets)
• Optional data — Data that changes frequently or isn't required for the page to function

Path Parameters vs Query Parameters

Choose path parameters when:

• The parameter identifies the primary content (product ID, user ID, post slug)
• The parameter is required for the page to function
• The parameter represents a hierarchical structure

Choose query parameters when:

• The parameters are optional (filters, sorting, search)
• Parameters change frequently or dynamically
• You need multiple optional filters (e.g., ?price=low&color=blue&brand=apple)

You can use both types together for maximum flexibility:

/products/{{category|all}}?sort=price_asc&inStock=true&brand=apple

Opening the URL Parameters Panel

To open the URL Parameters panel:

1. Navigate to the Interface tab
2. Select the page you want to configure from the canvas header
3. Click the URL Parameters button in the canvas header (displays the current page path)
4. The panel will open showing your current URL configuration

SECTIONS ONLY SHOW WHEN NEEDED

If your page does not use path parameters yet, the Path parameters section may be hidden until you add one. The same applies to Query parameters: you’ll only see the list once you add at least one query parameter to test.

The panel displays:

• URL: The base path for your page
• URL Preview: Shows the complete URL with all parameters applied
• Path parameters: Dynamic segments in your URL path
• Query parameters: Optional parameters appended to the URL with ? and &

Understanding Path Parameters

Path parameters are dynamic segments within your URL path that change based on the content you're displaying. They're perfect for creating detail pages, category views, or any page that needs to display different content based on the URL.

How Path Parameters Work

Path parameters use the syntax {{parameterName|defaultValue}} directly in your URL path. For example:

URL Pattern	Example URL	Use Case
products/{{id|123}}	products/456	Product detail page
blog/{{category|news}}/{{slug|latest}}	blog/tech/ai-trends	Blog post with category
users/{{username|guest}}	users/john_doe	User profile page

Configuring Path Parameters

To add path parameters:

1. Open the URL Parameters panel from the canvas header
2. In the Path parameters section, click + Add path parameter
3. Enter the parameter details:
   • Name: The parameter identifier (for example, id, username, category)
   • Default value: The value used when previewing in the editor or when no value is provided
4. The URL field automatically updates with the parameter using {{name|default}} syntax
5. Use the Current value field to test with different values in the editor (updates the preview URL)

Testing Path Parameters in the Editor

Use the Current value field to test how your page looks with different parameter values:

1. Enter a test value in the Current value field
2. The URL Preview updates to show the complete URL
3. Your page content updates if you've bound elements to the path parameter
4. Test multiple scenarios by changing the current value

For example, if you're building a product detail page with path products/{{id|123}}:

• Set Current value to 456 to preview how product 456 displays
• Set Current value to 789 to preview how product 789 displays
• The URL Preview shows https://yourdomain.com/products/456 (or 789)

Accessing Path Parameters in Your App

Path parameters are automatically available throughout your page.

Access them in bindings by navigating to Variables → From path in current page → select your parameter.

Common use cases:

• Fetch specific records — Bind an API endpoint URL parameter to currentPage.parameters.id
• Conditional display — Show/hide elements based on currentPage.parameters.category
• Filter Table Views or API Endpoints — Use path parameters to filter data displayed on the page

HOME PAGE LIMITATION

You cannot add path parameters to your home page because it's the root / page.

If you need dynamic content on your root URL:

1. Create a separate page (for example, Main) with your path parameters (like {{id|1}})
2. Add an On page load workflow to your home page that redirects to the Main page
3. Users visiting yourdomain.com will be redirected to yourdomain.com/1
4. Users can then access yourdomain.com/2, yourdomain.com/3, etc.

Understanding Query Parameters

Query parameters are optional values appended to your URL using ? and & symbols. Unlike path parameters, they don't change the page routing and are perfect for filtering, sorting, searching, or tracking.

How Query Parameters Work

Query parameters follow this pattern: ?key1=value1&key2=value2

URL with Query Parameters	Parameters	Use Case
products?sort=price_asc	sort=price_asc	Sort products by price
search?q=laptop&category=electronics	q=laptop, category=electronics	Search with filters
reset-password?token=abc123	token=abc123	Password reset flow
products?page=2&limit=20	page=2, limit=20	Pagination

Configuring Query Parameters

To add query parameters:

1. Open the URL Parameters panel from the canvas header
2. Scroll to the Query parameters section
3. Click + Add query parameter
4. Enter:
   • Name: The query parameter key (for example, sort, filter, q)
   • Current value: The test value to use in the editor

The URL Preview automatically updates to show your complete URL with query parameters appended.

Testing Query Parameters in the Editor

Use the URL Parameters panel to test different query parameter combinations:

1. Add multiple query parameters by clicking + Add query parameter
2. Enter test values in the Current value fields
3. The URL Preview shows the complete URL with all parameters (for example, ?sort=price_asc&category=electronics)
4. Test different scenarios by changing values or removing parameters
5. Click the Reset button to clear all current test values

Accessing Query Parameters in Your App

Query parameters must be captured using Query variables. Here's how they work:

Creating Query Variables

1. Open the Variables tab in the Interface section
2. Click + Add variable
3. Select Query as the variable type
4. Enter the name that matches your query parameter (must match exactly, for example, sort, token, category)
5. Access the variable throughout your app via the data explorer

QUERY VARIABLES ARE THE BRIDGE

Query variables are the bridge between URL query parameters and your app logic. When you create a Query variable named category, it automatically captures the value from ?category=electronics in the URL. This two-way binding means:

• URL → Variable: When the URL changes, the variable updates automatically
• Variable → URL: When you change the variable value in a workflow, the URL updates automatically

VARIABLE NAME MUST MATCH EXACTLY

The Query variable name must match the query parameter name exactly, including case sensitivity:

• Query variable sort captures ?sort=price_asc
• Query variable userID captures ?userID=123

• Query variable Sort does NOT capture ?sort=price_asc
• Query variable userId does NOT capture ?userID=123

Common Use Cases for Query Variables

Filters and sorting: ?sort=price_asc&inStock=true

1. Create Query variables: sort and inStock
2. Bind your Table View or API Endpoint filter/sort to these variables
3. When users change filters, update the variables with workflows
4. The URL updates automatically, making the filtered view shareable

Search terms: ?q=laptop

1. Create Query variable: q
2. Bind your search input to the q variable
3. Bind your API search request to q as well
4. When users type and search, update q to update the URL

Authentication flows: ?token=abc123 for password resets

1. Create Query variable: token
2. On page load, read token and call your password reset API
3. The token comes from the email link users clicked

Tracking and analytics: ?ref=homepage&campaign=summer

1. Create Query variables: ref and campaign
2. Track where users came from
3. Send these values to analytics tools

QUERY PARAMETERS FOR SHAREABLE LINKS

Query parameters are perfect for creating shareable filtered or sorted views of your data. When users apply filters or sorting, update query variables using workflows. The URL updates automatically, and users can share or bookmark the exact view they're seeing.

For example:

• User filters products: URL becomes products?category=electronics&sort=price_asc
• User shares this URL with a colleague
• Colleague opens the URL and sees the same filtered, sorted view

URL Preview

The URL Preview at the top of the panel shows the complete URL that will be generated with your current parameter configuration. This preview updates in real-time as you:

• Modify path parameter current values
• Add or change query parameters
• Update the base URL path

Use the URL Preview to:

• Verify syntax: Ensure your URL is correctly formatted
• Test combinations: See how different parameter combinations create URLs
• Copy for testing: Copy the preview URL to test in a browser or share with team members

The preview shows your domain (for example, https://yourdomain.com/) followed by your page path and all parameters.

Saving and Applying Changes

When you configure parameters in the URL Parameters panel:

1. Path parameter changes (URL field modifications):

   • Click the Save button to apply changes to your page configuration
   • The new URL structure is saved to your page settings
   • Changes persist across editor sessions

2. Current value changes (testing values):

   • Updates apply immediately without clicking Save
   • Used for editor preview only
   • Reset when you close and reopen the editor

3. Query parameter configuration:

   • Current values are for testing only in the editor
   • To persist query parameters in production, you must:
     • Create Query variables with matching names
     • Use Navigate to actions or Link to properties with queries configured
     • Update query variables with workflows

Resetting Parameter Values

Click the Reset button in the URL Parameters panel to:

• Clear all Current value fields for path parameters (reverts to default values)
• Remove all test query parameters
• Return the URL Preview to its base state with default values

This is useful when you want to start fresh with testing or verify how your page looks with default parameter values.

Common Use Cases

Product Detail Page

Create a product page that displays different products based on the URL:

1. Create a page called products
2. In the URL Parameters panel, click + Add path parameter
3. Set Name to product_id and Default value to 1
4. Test with different Current value entries (2, 3, 4) to preview different products
5. Bind your Table View or API Endpoint to currentPage.parameters.product_id to fetch the product data
6. Navigate to this page with different IDs (for example, /products/123, /products/456) to show different products

Blog with Category Filtering

Create a blog page that can filter by category using query parameters:

1. Create a page called blog
2. Create a Query variable named category in the Variables panel
3. In the URL Parameters panel: Add a query parameter called category, Current value = tech
4. Bind your blog Table View or API Endpoint filter to the category Query variable
5. Add navigation links (for example, "Tech", "News", "Updates") that:
   • Use Navigate to action
   • Direct the user to the blog page
   • Set the category query parameter to the respective value
6. When users click "Tech", the URL becomes blog?category=tech and the category variable updates automatically, filtering the blog posts

User Profile Pages

Create user profile pages with usernames in the URL:

1. Create a page called users
2. In the URL Parameters panel: Add a query parameter called username, Current value = guest
3. Test with different Current value entries to preview different profiles
4. Bind your Table View or API Endpoint to currentPage.parameters.username to fetch user data
5. Display user-specific content bound to the parameter

Search Results with Filters

Create a search page with multiple filter options:

1. Create a page called search
2. In the Variables panel, create the Query variables: q, category, and sort
3. In the URL Parameters panel: Add the query parameters q, category, sort with test values
4. Bind your Table View or API Endpoint to these Query variables for filtering and sorting
5. When users change filters or search terms, update the Query variables with workflows
6. The URL updates automatically (for example, /search?q=laptop&category=electronics&sort=price_asc)