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)
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)
Read query parameters from a page URL and use their values.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (1:52)This section details how to access and utilize query parameters within Twidget pages, enabling dynamic content and functionality based on user-supplied parameters.
Query Parameters: A method to pass data to web pages through the URL, enabling dynamic content updates based on user interaction or external inputs.
Dynamic Content: The capability of a page to change its displayed information based on the values of query parameters.
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.
Page tables
Use a Table element to show a list of records with search, sortable headings and paging. Choose an existing Table page creation option, add a Table element in the editor, or start with a [Page starter](/docs/pages/page-starters). Find the right element. Select the table on the canvas or in Layers. T...
Upload a File using Pages
This documentation describes the functionality available in Twidget for uploading files through a generated API endpoint and managing interactions via pages. The process allows developers to create dynamic forms that enable users to upload files directly to the backend file storage, specifying vario...
Page starters
Page starters give you a useful first layout for a records tool, customer view or operational dashboard. Start with clearly labeled demonstration data, customize the page, then connect the endpoints your customers are allowed to use. Choose a starting point. Open Pages, choose Create Page, then Page...
Custom Page Functions
Reusable custom page functions in Twidget enhance the development experience by allowing users to define and manage functions that operate specifically within the context of pages and page components. This capability is an integral feature for creating dynamic, interactive web applications without t...
Element States
Element states are fundamental attributes that define how elements visually respond to user interactions within the Twidget no-code API platform. Each element, such as buttons, input fields, or cards, can exist in multiple states, each with unique visual characteristics that enhance the user experie...