How to create a to-do list application in bubble

Objective: Build a to-do list web application using the nocode platform bubble.io.

Features: This to-do list will allow tasks to be added, edited, and removed from a list.

Requirements: Bubble.io account. You can learn how to sign-up for free at Bubble free account sign-up guide.

Bubble Version: 7

Demo – quikStarts To-Do List

Source – quikStarts To-Do List

Start

Design – Be sure to click the “Design” option on the interface menu to the left

1. Drag a “Text” element onto the stage. Give it the name “My To-do List”. Note: You can increase the font size and center the text inside of the Text element property editor if you like using the “Style”.
2. Drag an “Input” element onto the stage. Give it the name “To-do”.
3. Drag a “Date/Time picker” element onto the stage.
4. Drag a “Button” element onto the stage. Give it the name “Create”.
5. Click the “Start/Edit Workflow” button in the Button element for the property editor.

Workflow – Be sure to click the “Workflow” option on the interface menu to the left

1. Click “click here to add an action…”.
2. Click “Data (Things)”.
3. Click “Create a New Thing…”.
4. Inside of the “Create a New Thing” box, “Type” dropdown, select “Create a new type…” and enter “Todo” and press “Enter”.
5. Inside of the “Create a New Todo” (Now renamed because of step 9) box, click “Set Another Field”.
6. Click “Click”, then click “select “Create a new field…”.
7. Inside of the “Create a new field” box, in the “Field name” field enter “Title”.
8. Inside of the “Field Type” dropdown, select “Text”, then click the “Create” button.
9. Inside of the “Create a New Todo”, click “Click”, then select “Input Todo”, then select ” ‘s value”.
10. Inside of the “Create a New Todo” box, click “Set Another Field”.
11. Click “Click”, then click “select “Create a new field…”.
12. Inside of the “Create a new field” box, in the “Field name” field enter “Due Date”.
13. Inside of the “Field Type” dropdown, select “date”, then click the “Create” button.
14. Inside of the “Create a New Todo”, click “Click” (next to “Due Date”), then select “DatePicker Due Date”, then select ” ‘s value”.
15. Inside of the “Create a New Todo” box, click “Set Another Field”.
16. Click “Click”, then click “select “Create a new field…”.
17. Inside of the “Create a new field” box, in the “Field name” field enter “Finished”.
18. Inside of the “Field Type” dropdown, select “yes/no”, then click the “Create” button.
19. Inside of the “Create a New Todo”, click “Click” (next to “Finished”), then select “no”.
20. Click “click here to add an action…”. (next to the existing action you just created)
21. Click “Element Actions”.
22. Click “Reset Inputs”.
23. Click the “Design” button in the interface menu on the left.

Design – Be sure to click the “Design” option on the interface menu to the left

1. Drag a “Repeatable Group” element onto the stage. Note: Make it almost as wide as the stage and fairly tall (900px or so).
2. Set the number of rows equal to 10.
3. Select the Type of Content to “Todo”
4. Click “Click” next to the “Data Source” field and select “Do a search for”.
5. Select “Todo” from the “Type” dropdown.
6. Click the “Add a new constraint” button.
7. Click “Click” then select “Finished” from the dropdown menu.
8. Select the “=” symbol.
9. Select the “no” option.
10. In the “Sort By” field dropdown, select “Due date”.
11. Drag the “Text” element inside of the first row of the Repeatable Group toward the left.
12. Click the “Insert Dynamic Data” button, then select “Current Cells Todo”, then “Title”
13. Drag the “Text” element inside of the first row of the Repeatable Group to the right of the “Title” field you just created.
14. Click the “Insert Dynamic Data” button, then select “Current Cells Todo”, then “Due Date”, then “formatted as xx/xx/xxxx” (the current date should be displayed instead of “x’s”.
15. Drag the “Button” element inside of the first row of the Repeatable Group to the right of the “Due date” field you just created and name it “Done”.

Workflow – Be sure to click the “Workflow” option on the interface menu to the left

1. Click the “Start/Edit Workflow” button in the Button element for the property editor.
2. Click “Data (Things)”.
3. Click “Make changes to a thing…”.
4. Inside of the “Make changes to a thing…” box, click “click” next to the “Thing to change” field, then select “Current Cells Todo”.
5. Inside of the “Make changes to Todo” (Now renamed because of step 4) box, click “Change another field”.
6. Click “Click”, then click “select the”Finished” field, then select ‘yes”.
7. Click the “Preview” button in the upper right-hand corner of the page and a ready for use app should display.

Video instructions for creating a To-Do List application in Bubble.io

End