Reusable Page Components and Events
Create a reusable project card, define component inputs and actions, and reuse it in a responsive project overview. Save and test component events and state.
Watch tutorial (12:17)
Create a reusable project card, define component inputs and actions, and reuse it in a responsive project overview. Save and test component events and state.
Watch tutorial (12:17)
Attach actions to elements so a page responds to user interactions.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (2:16)
Connect forms and a table to task endpoints, then test create, update, delete, validation and error recovery.
Watch tutorial (20:27)Element actions in Twidget are integral commands that can be assigned to user interface elements, enabling interactivity within applications. The actions are defined to respond to user inputs, primarily through triggering events associated with specific elements.
Element actions allow developers to enhance user experience by enabling dynamic interactions, such as responding to clicks, updating variables, controlling layouts, and executing functions. This functionality is central to building interactive applications without needing to write extensive code.
Action Assignment: Actions can be added to most elements through an intuitive user interface, where developers can access an element's toolbar and navigate to the actions section.
Trigger Mechanism: Each action can be triggered by specific user events (e.g., clicks, changes). Some actions are limited to a single type of trigger, while others can support multiple triggers depending on the element type.
Action Types: Various action types are available, including:
Run Function: Executes a predefined or custom function.
Control Layout: Manages visibility and state of UI layouts (open, close, toggle).
Update Variable: Changes the values of page variables dynamically.
Go to URL: Redirects users to specified URLs, with options for how the destination page loads.
Conditional Execution: Developers can define conditions under which actions may execute using the "run when" clause, ensuring actions only run if certain logical conditions are met.
The workflow begins with defining and adding actions to elements. After selecting an element and accessing the action options, developers can specify desired actions and their related triggers. The actions can be customized as needed, allowing for flexibility in how the application should respond to user interactions.
In summary, the element actions in Twidget serve as the driving force for application interactivity, providing a versatile framework for defining user interactions within a no-code environment.
Data Source Mappers
For Table elements, see [Page tables](/docs/pages/page-tables). Tables, charts and calendars now offer a scoped data picker and Sample value in the editor. The sample uses local demonstration values only; opening it does not fetch customer records or run a workflow. Page starters can also connect an...
Page Components
Page components are reusable building blocks within the Twidget platform that enhance development efficiency by allowing users to create, manage, and implement consistent UI elements across multiple pages. They serve to encapsulate functionality and design into a single entity, which can be reused a...
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...
Page Variables
Page variables in Twidget are global variables that are accessible throughout an individual page, allowing for dynamic content generation and manipulation within the application. These variables can be utilized in various contexts, such as element settings or page functions, enabling developers to c...
Page Overview
Twidget provides a robust mechanism for creating web pages accessible via a browser. This feature enables users to build various types of pages using a no-code interface, enhancing the platform's developer experience. Key Concepts. Open Pages and choose Create Page. The available starting points inc...