{"id":37,"date":"2020-06-15T16:03:49","date_gmt":"2020-06-15T20:03:49","guid":{"rendered":"http:\/\/quikstarts.com\/qs\/?p=37"},"modified":"2020-11-21T13:00:33","modified_gmt":"2020-11-21T18:00:33","slug":"how-to-create-a-to-do-list-application-in-bubble","status":"publish","type":"post","link":"https:\/\/quikstarts.com\/qs\/bubble\/how-to-create-a-to-do-list-application-in-bubble\/","title":{"rendered":"How to create a to-do list application in bubble"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

Objective<\/strong>: Build a to-do list web application using the nocode platform bubble.io. <\/p>\n\n\n\n

Features<\/strong>: This to-do list will allow tasks to be added, edited, and removed from a list.<\/p>\n\n\n\n

Requirements<\/strong>: Bubble.io<\/a> account. You can learn how to sign-up for free at Bubble free account sign-up guid<\/a>e<\/a>.<\/a><\/p>\n\n\n\n

Bubble Version<\/strong>: 7 <\/p>\n\n\n\n

Demo – quikStarts To-Do List<\/a> <\/strong><\/p>\n\n\n\n

Source – quikStarts To-Do List<\/a> <\/strong><\/p>\n\n\n\n

Start<\/strong><\/h4>\n\n\n\n\n\n\n\n
Design<\/strong> – Be sure to click the “Design” option on the interface menu to the left<\/h5>\n\n\n\n
  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”.<\/li>
  2. Drag an “Input” element onto the stage. Give it the name “To-do”.<\/li>
  3. Drag a “Date\/Time picker” element onto the stage. <\/li>
  4. Drag a “Button” element onto the stage. Give it the name “Create”. <\/li>
  5. Click the “Start\/Edit Workflow” button in the Button element for the property editor.<\/li><\/ol>\n\n\n\n
    Workflow<\/strong> – Be sure to click the “Workflow” option on the interface menu to the left<\/h5>\n\n\n\n
    1. Click “click here to add an action…”.<\/li>
    2. Click “Data (Things)”.<\/li>
    3. Click “Create a New Thing…”.<\/li>
    4. Inside of the “Create a New Thing” box, “Type” dropdown, select “Create a new type…” and enter “Todo” and press “Enter”.<\/li>
    5. Inside of the “Create a New Todo” (Now renamed because of step 9) box, click “Set Another Field”.<\/li>
    6. Click “Click”, then click “select “Create a new field…”.<\/li>
    7. Inside of the “Create a new field” box, in the “Field name” field enter “Title”.<\/li>
    8. Inside of the “Field Type” dropdown, select “Text”, then click the “Create” button.<\/li>
    9. Inside of the “Create a New Todo”, click “Click”, then select “Input Todo”, then select ” ‘s value”.<\/li>
    10. Inside of the “Create a New Todo” box, click “Set Another Field”.<\/li>
    11. Click “Click”, then click “select “Create a new field…”.<\/li>
    12. Inside of the “Create a new field” box, in the “Field name” field enter “Due Date”.<\/li>
    13. Inside of the “Field Type” dropdown, select “date”, then click the “Create” button.<\/li>
    14. Inside of the “Create a New Todo”, click “Click” (next to “Due Date”), then select “DatePicker Due Date”, then select ” ‘s value”.<\/li>
    15. Inside of the “Create a New Todo” box, click “Set Another Field”.<\/li>
    16. Click “Click”, then click “select “Create a new field…”.<\/li>
    17. Inside of the “Create a new field” box, in the “Field name” field enter “Finished”.<\/li>
    18. Inside of the “Field Type” dropdown, select “yes\/no”, then click the “Create” button.<\/li>
    19. Inside of the “Create a New Todo”, click “Click” (next to “Finished”), then select “no”.<\/li>
    20. Click “click here to add an action…”. (next to the existing action you just created)<\/li>
    21. Click “Element Actions”.<\/li>
    22. Click “Reset Inputs”.<\/li>
    23. Click the “Design” button in the interface menu on the left.<\/li><\/ol>\n\n\n\n
      Design<\/strong> – Be sure to click the “Design” option on the interface menu to the left<\/h5>\n\n\n\n
      1. Drag a “Repeatable Group” element onto the stage. Note: Make it almost as wide as the stage and fairly tall (900px or so).<\/li>
      2. Set the number of rows equal to 10.<\/li>
      3. Select the Type of Content to “Todo”<\/li>
      4. Click “Click” next to the “Data Source” field and select “Do a search for”.<\/li>
      5. Select “Todo” from the “Type” dropdown.<\/li>
      6. Click the “Add a new constraint” button.<\/li>
      7. Click “Click” then select “Finished” from the dropdown menu. <\/li>
      8. Select the “=” symbol.<\/li>
      9. Select the “no” option.<\/li>
      10. In the “Sort By” field dropdown, select “Due date”.<\/li>
      11. Drag the “Text” element inside of the first row of the Repeatable Group toward the left.<\/li>
      12. Click the “Insert Dynamic Data” button, then select “Current Cells Todo”, then “Title”<\/li>
      13. Drag the “Text” element inside of the first row of the Repeatable Group to the right of the “Title” field you just created.<\/li>
      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”.<\/li>
      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”.<\/li><\/ol>\n\n\n\n
        Workflow<\/strong> – Be sure to click the “Workflow” option on the interface menu to the left<\/h5>\n\n\n\n
        1. Click the “Start\/Edit Workflow” button in the Button element for the property editor.<\/li>
        2. Click “Data (Things)”.<\/li>
        3. Click “Make changes to a thing…”.<\/li>
        4. Inside of the “Make changes to a thing…” box, click “click” next to the “Thing to change” field, then select “Current Cells Todo”.<\/li>
        5. Inside of the “Make changes to Todo” (Now renamed because of step 4) box, click “Change another field”.<\/li>
        6. Click “Click”, then click “select the”Finished” field, then select ‘yes”.<\/li>
        7. Click the “Preview” button in the upper right-hand corner of the page and a ready for use app should display.<\/li><\/ol>\n\n\n\n
          Video instructions for creating a To-Do List application in Bubble.io<\/h5>\n\n\n\n
          \n