Shareable state
Copy/paste URL preserves filters and navigation.
Query Manager (URL-driven state)
Use Query Manager to make page state URL-driven in Wappler, so searches, filters, sorting, paging, and selected records can survive reloads and be shared safely.
Query Manager
Section titled “Query Manager”This tour frames Query Manager as the bridge between the current page state and the address bar. You will see how query parameters become readable App Connect values, how UI controls can write them back, and why this pattern is ideal for shareable list or detail views.
Why it’s useful
Section titled “Why it’s useful”The key takeaway is not just that Query Manager edits the URL, but why that matters: it gives users refresh-safe and bookmarkable state, while giving you a clear source of truth for filters, paging, and record selection.
No custom JS
Use App Connect actions instead of manual URL manipulation.
Works with data traversal
Drive Data View and Data Detail from query params.
Search terms in ?q=
Filters in ?category=
Paging in ?page=
Important: everything is a string
Section titled “Important: everything is a string”Query values are strings. Convert types (toNumber()) when doing numeric comparisons or paging math.
important: Always treat query values as strings until you explicitly convert them.
page.toNumber() for paging
id.toNumber() for numeric keys
Keep comparisons type-safe
Core workflow
Section titled “Core workflow”The common loop is: read query → bind UI → update query with actions → data-driven UI updates.
Bind controls to query values
Section titled “Bind controls to query values”Bind inputs/selects to queryManager.param so the UI reflects the URL on load and on navigation.
Update query with actions
Section titled “Update query with actions”Use actions like query.set(name, value), query.remove(name), and query.removeAll() in event handlers (click/change/submit).
set(name, value)
Writes or replaces a query param.
remove(name)
Removes one param.
removeAll()
Clears query state (reset view).
Update query on submit/click
Avoid assigning to properties directly
Let App Connect re-render
Pattern: Query → Data View
Section titled “Pattern: Query → Data View”Use query params inside Data View filter/sort/page so the view reacts when query changes.
filter uses query.search
sort uses query.sortOn + query.sortDir
page uses query.page.toNumber()
Pattern: Query → Data Detail
Section titled “Pattern: Query → Data Detail”Store a selected record key in the query (e.g. ?id=42), then let Data Detail select the matching record.
Click item → query.set('id', record.id)
Data Detail key binds to query.id
Detail UI binds to detail.data.*
Wrap-up
Section titled “Wrap-up”Next, decide whether you need URL state or storage state.
Next steps
Section titled “Next steps”Pick a related tour to continue.