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

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

Thank you!

Hola, estoy teniendo un problema, al guardarlo en una variable en la nube, cada vez que un usuario agrega algo a la lista, estó se ve reflejado en las aplicaciones de todos los usuarios, probe utilizando una variable local, pero no quiero que se guarde en el telefono, quiero que se guarde bajo el localId de cada usuario, pero no logro hacerlo, podrias ayudarme por favor?

Hi, I have copied your code over to the app that I am working on but I am unable to add anything to a list on the live function. Have I done something wrong on the Blocks section?

Hey @stevepeirson2x9p2vv, please check out this example

you will want to set up that variable as an empty list if it is not set as such already. see the image below. The var will equal null on load. you cant add an item to a var set as null as if it was a list without making it an empty list first as seen below or making it a list that you overwrite.

You may need to initialize the cloud List as a list variable.

So in “when My Games Starts” add “if cloud List is null, set cloud List to empty list”.

1 Like

For the purpose of a list that could potentially be endless, absolutely, @Darren is right that you’d want to set the cloud var to be an empty list.

My example above comes from a demo of how to set pathways (keys) using a cloud variable and it incorporated a counter and a way to switch between pathways.

Darren that is so easy. Created a simple shared shopping list

Thanks so much

Towball

2 Likes

Hi,

How could I do a List Viewer with pictures?

Thank you for this detailed info :+1:

Hello @new99770067fjh!
Welcome to the community!:clap:

At this time, there is no way to add images to the list viewer component. Sorry! :frowning_face:

However, if you use the “Data Viewer List” component, you can add images and text directly from Airtable, Google Sheets or Data stored locally

For more information on this component, check out Thunkable’s docs linked below.

I hope this can help you!:smile:

Best,
Ian

1 Like

Thans for the answer.

I’ll try to use this component

1 Like