Custom listview

extension

#43

Ok @PixiiBomb , thank you in advance.:wink: I will study immediately what you just said.


#44

Oh forget, good luck in your presentation.:grinning:


#45

Hi @PixiiBomb , Is your presentation good?
I have perfected the function to sum an array (eg, age) after selecting any element in the list, and if any element in the list is deleted, the sum is also changed response.
But the ability to save data of the table after the selection in real time, I have not done.:joy:


#46

@silicone_ahk - WOOO HOO!!! I’m so proud of you! And guess what! I got the highest score on my presentation! I got the full 100 points and even 2 extra bonus points! (I’m not sure how, but I’m not complaining lol. I’ll take extra credit any day!) :stuck_out_tongue:

I’ve got the solution, and I tried to lay it out as best as I could. So, I’ve expanded on the little animal example I showed you earlier, and I want you to take it apart piece by piece and change it up so you can use it with your project. (When I was teaching myself to code, I used to study other people’s code like it was a puzzle. I’m hoping by seeing this example, it will help you understand the concepts so you can use them for your project)

Alright… incoming wall of text !!! lol


Starts on Screen2: Example.aia (112.4 KB)

VARIABLES

  • saved_list: saves the IDs from the database list
  • visible_list: the title for the current visible list (either A or B)
  • database: holds all of our data, similar to a multidimensional array
  • NAME, ICON, AGE, COLOR, FOOD, ABOUT: the columns for our database

Screen2.Initialize
When the screen starts, we use the test label to see the current data in our TinyDB. (This test label should not be included in the final version of the app). Next hide any sections you don’t want to see (called from the hideAll procedure), then call initalizeLists and initalizeListItems

initializeLists
We create the data for our database in this procedure. Notice that each item in the database list follows a pattern: Name, Icon, Age, Favorite Color, Favorite Food, Description. It is very important that the data in this list remains in this exact order.

initalizeListItems
This procedure splits the database into mini-lists. The names of each animal from the database list will go into the NAME list (in the same order they appear within the database list). The picture for each animal will go into the ICON list. The age of each animal will go into the AGE list, and so on.

When the screen starts, the user should only see 4 buttons: Call A, Call B, Done and Totals. If the user clicks either Call A or Call B, then we display the information for ListA or ListB, respectively.

displayList
This procedure splits our database list in half. We’re basically stating that the top half of the database list (items 1,2,3) make up List A; and the bottom half of the database list (items 4,5,6) make up List B. We create a temporary list of names and icons to populate listview_animals. This allows us to only show a portion of the NAME and ICON mini-lists.

listview_animals.AfterPicking
The user can select any animals from List A and List B. Each time a selection is made, that animal’s ID is added to the global saved_list. It’s important to understand that ONLY IDs are stored in the global saved_list, and these IDs correspond to the IDs from the database list.

For Example: a user hits the Call B button. This displays the bottom half of the database list (animals: fish, owl, monkey). The user clicks on the monkey (database ID: 6). The number 6 is added to the global saved_list, not “Marcel, icon_monkey.png, 3, orange, bananas, Ross’s best friend”. Only the number 6.

updateSavedList
Each time the user clicks on an animal in listview_animals, the ID for that animal is stored in global saved_list.
The user will continue to add animals to their saved list.
Notice that as the user clicks on an item in listview_animals, the details for that animal appear below the selection. Also notice that saved list above only displays 1 item at a time, and it’s sorting the list by the last item entered. listview_save is purely decorative. The TinyDB does not take data from listview_save. It’s a visual representation of what the user is clicking on.

btn_done.Click
When the user has finished adding animals, we store the IDs from global saved_list into the SavedList tag in the TinyDB.

btn_total.Click
The user can then click on the Totals button to see additional data about their saved choices. The test label shows the IDs from SavedList. We can use those IDs to create another temporary list, called array. int_totalitems updates with the amount of items in array. (Basically saying: you’ve saved X amount of animals to the database) int_totalages is a sum of the ages of all of the saved animals.

For Example: the test label shows IDs: (2 3 6 1)

  • ID 2: (List A) Pika Mew, the cat, who is 4 years old
  • ID 3: (List A) Rufus Barkington, the dog, who is 5 years old
  • ID 6: (List B) Marcel, the monkey, who is 3 years old
  • ID 1: (List A) Berri Balloon, the bird, who is 2 years old

The sum of the ages of all of these animals is 4+5+3+2 = 14

CLEAN UP RECOMMENDATIONS:

  • Do you want to override the saved list? If the user restarts the app, the IDs will be saved from the previous session, HOWEVER, if the user makes ANY changes, a NEW SavedList will be created, overwritting previous data. You can decide if that’s something you want to keep, or prehaps you’d like to add first Get the value of SavedList and add the new changes. This will continue adding data, instead of overwritting existing data.
  • Which sections do you want to show and hide? Currently, the visibility for sections are shown and hidden based on what the user is doing. This may be something you want to clean up. You can organize this into procedures, clean up the blocks a little, or keep everything shown at once.
  • Do you want to enable and disable buttons? This will create a flow for the user. For Example: If there is currently saved data in the database, and you dont want the user to override data, there should be something preventing the user from accessing Call A and Call B buttons.
  • What information do you want displayed when the user clicks on Totals? This event can display whatever you want it to. You can get creative with it. Re-organize your data here, clean up these blocks, etc.

Example of Details displayed for Pika Mew, the cat:

Example of displaying only the latest saved item:

Example of IDs stored in the test label, and the Totals Data

Complete list of blocks


Lastly, take a look at how this data can be organized for your project. The top images shows lists A&B within the database list. The bottom images show how you would need to re-structure your database list if you wanted to add items later on:

NOTE: there is a typo in the “Current Data Display”. The IDs should read: 1,2,3,4,5,6

Alright, I hope that was helpful! Let me know if you get stuck on anything. I’m off to a wedding!

:heart: Pixii :bomb:


ListView question
#47

WOW! @PixiiBomb congratulate you, I know you very well.:hugs: Now I’m going to start studying all you say to me. Actually I’m very excited. Thank you very much P, wish you a good day.


#48

you’re so welcome! I’m always happy to help :slight_smile:


#49

Hi is it possible that displays a list of textbox and Text elements in a custom ListView like below:


#50

Hey there: @nandu_aeer!
I’m having trouble viewing your question. It looks like you tried to attach an image, but I can’t see it, or there is no image attached.

The custom list view in this example is just a nice way to display information using an icon and a title in each row. Text boxs or any other components most likely aren’t going to work, because the List View takes String input (words only). You could always design your app to LOOK like it’s a List View.

That could be accomplished using a Table Arrangement. You could add padding within your images, center the images inside the table cell. In order to center the textbox in the adjacent table cell, you could use a horizontal arrangement. There are tons of options.


#51

Thanks…


#52

Hi @PixiiBomb, How are you?
Please help me ! I do not understand what is the fault here?

![blocks (4)|690x330]


#53

The error says that you passed a string (a plain text) to a block that only accepts a componet ID (green ones).

I’m almost sure is your Global Selec which is initialized as an empty string. Make sure when you put it in one of the ANY blocks, it is a component ID and not a string or an empty string.


#54

Thank @Italo, I have overcome the error!:grin:


#55

Thanks for helping out with that Italo! Holidays have been a bit busy here :slight_smile:


split this topic #56

4 posts were split to a new topic: Changing initial screen


#57

Hi @PixiiBomb . How are you?
Do you remember the last time you guided me? I really have trouble getting too many initialize global (~ 400) (Ex. Initialize global CARROT, initialize global FISH, initialize global SHRIMP …). When I execute on appybuilder I get an error because I can not load. Do you have any way to help me solve this problem? (The attached file is the aja file you helped me deploy my problem the last time).
In the program you instructed me to initialize global AGE, FOOD, COLOR, but when I applied to my program, I needed over 400 initialize global, so it was not ok, I tried twice but all failed. Is there a way to solve this problem? If you can, please guide me. Thank you very much.
Example.aia (112.4 KB)


#58

Use lists by using a global list variable.
A list can contain many items.


#59

Everyone let me ask, what is the error and how to fix it?


#60

It’s clear that your list have 47 items you wants to access 48th item of it. :smile:

Just send images of blocks which contains .jpg items.


#61

it gives you the answer. You have a list with 47 images and somewhere he is searching for a 48 one that isn’t there. Look at you blocks.


#62

But my list has 100 items, not 47 items