A visual guide on saving and dynamically recalling info stored as objects (links at the bottom)

Saving info into lists can be complicated at first. Maybe you want to store several pieces of info about the phenomena, but don’t want to manage multiple lists or multiple variables. Try the following method of saving info as objects to a cloud/stored variable and then recalling it later to display on the screen based on some type of dynamic input.

This sample app will take animal info, from one screen, and dynamically display the data on a second screen.

All data saving will take place on Screen 2. Data is stored as a list of objects. Each object could hold many more pieces of information than shown below and can be used to filter data later on. All data is saved as individual properties of an object. That object is saved as last in the list of objects held within the cloud var Animal Info.

the blocks used to save the data as an object
the data entry screen

For the purpose of this demo, data field validation is not being used. There really should be an alert upon an attempt to submit blank data boxes. This can be added later.

Now you need to go back to screen 1 where we will populate a list viewer to make things easy to see. We will list all the animal names in the list viewer. When an item is clicked on, the app will then search for that items’ object in the list of all objects and pull the info for the specific properties that you desire. In our case, the age and breed of the animal.

the screen setup. please notice the button in the lower left. this button was placed here intentionally using “absolute positioning” with a bottom and left offset of 5px
the blocks used to populate the list and the corresponding data

Now here, when the screen opens, a temporary app var _animalNames is set to be an empty list and the cloud var Animal Info is set to be an empty list if it is not already. These vars will be null until set. Then, a filter is ran on that list of objects. Each objects name property is found and inserted into app var _animalNames. Then app var _animalNames is set as the list of items in the text viewer.

When an item is clicked on from the list viewer, the app then gets the index # of that item from the list. It searches for the corresponding object in the cloud var Animal Info list of objects. When found, it then pulls the appropriate properties and sets the label text as such.

There are many features that could be added to this example! If you have any thoughts/suggestions/ideas, please write them below!

A link to the PWA

A link to remex the project

Happy Thunking!

Leave a Reply

Your email address will not be published. Required fields are marked *