How to Create a To Do App & Store the Items in a Stored List

UPDATE: I HAVE A NEW TODO LIST TUTORIAL


Hey Friends!

The Tutorial
I am adding this post under Video Tutorials since the discussion stems from a video tutorial I made on how to create a simple to do / task management app. Here is the original video:

Explanation
Someone tried replicating the app and wanted to enhance it by storing the tasks in a stored / local variable. However, this code was not working.

Original Blocks
Here are the original blocks.

Problem Code
The problem was he was trying to add the input item to a list variable BUT the variable had not been initialized (or defined) as a list.

An Incorrect Solution
Your 1st instinct may be to set the variable to an empty list whenever the screen starts. This does not work because the app ends up clearing out the list every time you close and reopen the app. This defeats the purpose of the stored variable.

The Correct Solution
Rather, a better approach is to only set the variable to an empty list IF the list has not yet been defined. This makes the stored variable a list variable IF and ONLY IF the list is not yet defined. Thus it will not clear out any items previously stored in the list.

The Final Code
These are the final blocks that I got to work.

Let me know if you have a better solution to this - hope this helps you in your troubleshooting in the future! :grinning:

Thanks,

Darren
Thunkable X Tutorials

6 Likes

This is really nice; you guys should update the chat tutorial to be a bit more list this; the current tutorial saves the text onto a single string variable so itā€™s confusing as to how it could actually be used in a real-life scenarioā€¦

also, please fix the WebAPI component (at least on iOS) it simply doesnā€™t send any headers or body :frowning:
(or maybe Iā€™m doing something wrong and a tutorial using it would helpā€¦?)

2 Likes

Hi Darren,
The piece of code worked perfectly!!
Thanks for helping out.

I got the question here if I could put a checkbox on a listā€¦
So you could choose whether you want to check a task or delete itā€¦
Another challangešŸ˜Š

1 Like

@Dinto has also mentioned wanting a chat app to me before, but I think the list viewer needs some more property features before we could make one.

I think at a minimum, I would want to be able to left or right align different elements in the list viewer, and also add styling like coloring. Currently these features are not available.

1 Like

@Dinto Glad to hear it. I also do not know of a checkbox feature to make complete.

With the current features available, I would suggest having a ā€œTo Doā€ list and a ā€œCompleted Listā€. And when you click on an item in the To Do List, you could choose to delete or move to the Completed List.

1 Like

Thatā€™s one to try.
There two thing actually;

  1. in one of my list, the Notitie one, if I want to delete an item, it deletes the item I click on, it deles another one. I canā€™t find the error, it think itā€™s a bugā€¦

  2. I am Testing the todo-list with two phone.
    When I added an item to a list on one phone, it came up on the other phone. I donā€™t want to share the todo-list.
    Some one who downloads the app have the possibility to make his or her own list.

Iā€™m now storing the variables in the app ( at first seen in your tutorial in the cloud) How can I get this right?
Regards, Dinto

1 Like

Hey Dinto!

For #1:
Please share a screenshot of your app or send my a link through direct message.

For #2:
This may be because you are testing in the live app or using a cloud variable when logged into the same account. I would start out with a stored variable. It is really up to you. Read more about variables here: https://docs.thunkable.com/thunkable-cross-platform/create/blocks/variables

Thanks,
Darren

1 Like

Hi Darren,
Itā€™s been a few dayā€™s ago, busy:sweat_smile:

Still having problems with the issue above;
I have two list, list one: Notitie and list two: Boodschappen.
When I add items to both list, and delete an item on one list, it deletes the item on that list but when I delete another item from the other list, it doesnā€™t delete the item I touch but the one under that itemā€¦
Iā€™ve delete the screens and start over again because thought it could also be a bug in one of the listviewers, didnā€™t help.
Iā€™ve also change te code a bit, with local storage instead of the use of stored variable.
Could you give it a try?
I wil send you the project link

I believe this is a bug in the Thunkable code. The issue is with list indices, so anytime you are using a list, you may run into this error. See the issue on github here:

This check is currently working for me, so try this approach out:

Happy Coding!
Darren

1 Like

Hi Darren,
Thanks for your help!:ok_hand:t5:
I am going to try your lines of codeā€¦
I will let know if it works for me.
Thnx in regards

Hi Darren,

I Tried you code, and it did work, for 2 days::disappointed_relieved:
I read that it is a bugā€¦
The notitie screen is working, but de Boodschappen screen is now deleting two items at a time.
Or if I tap two times on an item the whole row with 4 items disappears.
This donā€™t have to be that difficult?
here is the List_viewer codeā€¦

I am trying to save text in a text input box. Any ideas on how to do this? I would like to add a journal feature to my app. So users can add text, save the text and then add more text to the existing text when they reopen the app. I am new to thunkable! Thanks in advance.

Hi @JENNIE_NGUYEN_Studen, Welcome to Thunkable!

Both of these videos show you how to add an item from a text input field to a list viewer:

And this is an example of the blocks you will need:

  1. Create a variable to store all journal entries.
  2. When the screen starts set the list to an empty list IF it does not contain anything, then update the list.
  3. When updating the list, you simply want to populate a List Viewer component with all of the items in the list variable.
  4. When a button is clicked, add the whatever is entered in a text input field to the list. Then update the list on the screen. Then clear out whatever was previously entered in the list.

Happy Coding!

1 Like

I canā€™t seem to figure out a way to change the firebase path. With the example above, when I save the list I have a ā€œfolderā€ called list in firebase at the root. but I actually want to save it as ā€œfolder/listā€ instead of just ā€œlistā€ (basically have the list in a separate area instead of the root).

Folders are created in Firebase by using ā€˜/ā€™ or by saving objects. My tutorial here explains that concept: https://youtu.be/htjhe0KEFBQ?t=807

Another option is to save your list as a cloud variable, then if you have firebase hooked up, each cloud variable will be a different folder in your firebase database. This is the newly suggested approach. Check out my most recent tutorial that explains this:

1 Like

Except my problem is nesting one variable in another. So for instance, one stored variable ā€œuserā€ with a cloud variable inside it called ā€œfriendsā€ that contains a list. For some reason, I canā€™t for the life of me get that simple concept to work. I have tried an object and I have tried cloud variables and for some reason I canā€™t get a proper path to work.

Son of aā€¦I did it! Got everything working. Maybe it was just a matter of time or a third look-through of your video.

Just wanted to say thank you for not only replying to me but also for making very good thunkable-related videos.

2 Likes

Awesome, glad to hear it!

Hello.
I would like to know if it is possible to delete an item from the list.
Your code from The Final Code save local the items but I am not able to delete them now.

I was reading all the post from here, but in the end it is not clear for me if it is possible or it is a bug that does not allow this.

If it is not possible, I guess would be helpful to update somehow also the info from your channel that sends here.
It is a great channel and would nice to keep it accurate.

Thank you.
Ionut

Of course, you can remove an element from a list. This block:

image

is doing just that. You just need to know which index the item occupies (and for that, the ā€œin list () find first occurrence of ()ā€ function can be used).
Note that this will NOT remove an item from a list stored in a database. For that, you need to

  • recover the database record using the key, and store it locally in the program (app variable)
  • remove the redundant element
  • save the amended list back to the database using the same key, so that the original version will be replaced.
3 Likes