Dynamic Pages, Variables and Parameter Binding
Bind native text to page variables, update page state from a compact button, read real path/query inputs with a fallback, and check responsive layouts.
Watch tutorial (9:38)
Main Components and Workflow
Text Elements: Text fields can be dynamically updated with content derived from query parameters by embedding special syntax, which includes a dollar sign and double curly braces (e.g.,
{{$query.name}}). This syntax allows real-time data binding to URL parameters.Page Publishing: Once changes are made and content is set using query parameters, publishing the page enables public access, demonstrating the dynamic text updates with actual query values in the URL (e.g.,
?name=twidget).Visibility and Other Settings: Query parameters can also be utilized in various element configurations, such as visibility settings, where they help tailor the user interface based on incoming data. These parameters appear in the variable dropdown during configuration, making them easily accessible.
Functions: In addition to visual elements, query parameters can be accessed within page functions. Functions can be created to execute specific logic using query parameter values. For instance, a logging function can be implemented to track the values of the query parameters by referencing the query object (e.g.,
$query.name).
Overall, Twidget empowers users to create dynamic and responsive web pages that adapt based on the query parameters within the URL, greatly enhancing the interactive capabilities of web applications.