Build a task management application manually, connecting its database, endpoints and pages.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (9:11)The Task Management app created using Twidget serves as a practical demonstration of building a functional web application by leveraging no-code tools. This application enables users to add tasks with specific attributes and to view a list of all tasks in a structured interface.
The app comprises a main page divided into two columns. The left column hosts the task submission form, while the right column displays the list of tasks. This two-column layout facilitates a clear and organized user experience.
The task submission form includes:
Text Input for describing the task.
Dropdown Input for selecting the task's status, with predefined options such as "To Do", "In Progress", and "Complete".
A Submit Button that triggers the submission action to add the new task.
Tasks are managed through a database composed of a single table titled tasks, which contains fields for task descriptions and statuses. The app utilizes two primary API endpoints:
A GET endpoint for retrieving tasks from the database.
A POST endpoint for adding new tasks to the database.
Upon submission of the form, the app captures user input and sends it through the POST endpoint to save the task in the database. The GET endpoint is called to populate the task list whenever the page loads, ensuring users see the latest data.
The right column utilizes a list loop element to dynamically display tasks. Each task is represented as an iteration of elements that include description and status, with appropriate visibility controls to show or hide status elements based on the conditions set (e.g., matching the task's status).
The app employs variables and functions to manage data flow:
A tasks variable holds the collection of task data retrieved from the API.
The get tasks function populates this variable by making an API call, while the create task function updates the tasks variable when a new task is added.
The user interface is designed for straightforward interaction. Users can input task details and submit them to automatically update the task display. The layout allows for immediate feedback, showing newly added tasks without navigating away from the page.
This Task Management application integrates several essential components of web development, such as UI design, data handling, and API interaction. By utilizing Twidget's no-code features, developers can efficiently build and deploy applications, reducing the complexity and time traditionally associated with coding software.
Privacy choices
You can use Twidget with optional analytics and advertising cookies turned off. Choose what to allow. When Your privacy choices appears in the app, choose Reject optional, Accept optional, or Customize. In Customize, you can choose each option separately: - Analytics helps Twidget understand where p...
Guided walkthroughs
Choose Help → Start Tutorial to replay the welcome introduction and restart the guided walkthroughs. After the introduction, callouts highlight the controls to use next. The pink getting-started checklist is a separate three-step progress panel. Follow a walkthrough. The guides cover creating and ed...
What is Twidget?
Twidget is a no-code platform for building web interfaces and their backend. Use Pages to create a frontend, connect it to API endpoints and database tables, and automate server workflows with functions and events. Build with the visual editors or discuss a goal with Twidget Assistant and review its...
Finding your way around
The sidebar groups related tools so you can spend less time scrolling. Choose a section to show its pages. You can keep several sections open at once; choose an open section again to close just that section. Where to find each tool. Home returns to your workspace's starting view. Dashboard stays dir...
Getting started checklist
The pink checklist button in the top bar helps you create your first API. It is available on desktop, tablet and phone until you complete the checklist. Complete the three steps. 1. Create your first table opens Database. Create a table in the selected workspace. 2. Build your first endpoint opens A...
