Connect a Page Table to a Read Endpoint
Connect a page table to a read endpoint. Return sample records, load them into a page list and try the table controls.
Watch tutorial (6:43)
Connect a page table to a read endpoint. Return sample records, load them into a page list and try the table controls.
Watch tutorial (6:43)
Map page data into dropdown options, repeat native cards with a list loop and create a reusable client function that updates a visible page value. Check the result on desktop, tablet and phone.
Watch tutorial (19:03)
Map a data source into the values and labels expected by page elements.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (2:08)For Table elements, see 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 existing read endpoint after explicit field setup; see Page starters.
Data Source Mappers are essential components within the Twidget no-code API platform, designed to facilitate the integration of dynamic data sources with UI elements. They serve the purpose of linking data source attributes to the respective fields required by UI components such as dropdowns, radio buttons, and navigation elements.
Dynamic Data Source: In Twidget, UI elements can utilize dynamic data sources instead of static data to populate their options. This enhances the flexibility of applications by enabling them to respond to live data.
Field Mapping: Field mapping allows developers to specify which attributes of a data source object correspond to the various fields needed by UI components. This includes defining label, value, and visibility settings for options.
Data Source List Object: This refers to a structured collection of objects, each typically containing attributes like label, value, and visible. The list itself serves as the data pool from which UI components derive their options.
Dropdowns and Navigation Elements: These UI components, by default, are set to utilize manual data entries. However, through Data Source Mappers, they can be configured to draw from a defined variable, thus leveraging the attributes of the data source list.
Field Mapping Section: Within Twidget, the configuration interface provides a field mapping section where developers can connect specific data source attributes to the expected fields of the UI components. Although default mappings are provided (e.g., label, value, visible), these can be customized based on the developer's requirements.
The process begins with defining a data source list that contains relevant objects. Developers then configure UI components such as dropdowns or navigation elements to use this list as their data source. By setting up the correct field mappings, the components will appropriately display data driven by the specified attributes of the data source, ensuring that they are dynamically updated and contextually relevant to the application's needs.
In summary, Data Source Mappers are crucial for transforming static UI elements into dynamic interfaces that can adapt according to live data, greatly enhancing the interactive capabilities of applications built on the Twidget platform.
Page Settings
The Page Settings feature allows users to customize various aspects of their web pages, particularly in relation to branding, security, and domain management. This functionality enhances the user experience by allowing for personalization and integration of essential web components. - Favicon: A fav...
Page Forms
Page forms are essential components in web applications that facilitate data collection from users. They streamline user interaction by providing a structured way to input data, which can then be processed for various purposes such as updating content or storing information in a database. Key Concep...
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 Commands
The new page commands in Twidget are designed to enhance the interactivity and responsiveness of web pages created with the platform. These commands allow developers to retrieve contextual information about the current page session and manipulate its content dynamically. Key Concepts. - Page Variabl...
Layout Controls
Layout controls are essential components in Twidget, allowing developers to manage the visibility and behavior of various layout elements, such as modals and drawers, within a user interface. These controls enable dynamic user interactions by facilitating the opening, closing, and toggling of layout...