Thanks for your consideration and time.
indeed my problem is not adding or removing items from the list. the issue is that the images which loading from deferent urls are not fixing in their place. in your given AIA all images comes from 1 url and that is ok. when I use specific url for each image and when scroll down to add more the problem occurs. I want to mention that my data comes from a google sheet and I want to show them as a list in the app.
Please check the below .AIA.
Loading_image_from_Url_in_imagListView1.aia (618.5 KB)
You just have to prepare the 3 lists title, subtitle and image in correct sequence after getting them from your source.
Just for example i used one image for all items as I can't prepare a long list.
Above blocks will fetch the data in sequence based in their indices, so it will not alter the image neither title or subtitles.
So first get all 3 lists and check if sequence is correct.
can you please check the AIA I sent,
I did as you said. the lists of titles, Subtitles and images are ok, the problem is that I cant load all items in one time because that is a long list and the app crash. when I add items part by part first loading is ok, when I add one more, the new image does not placing in the position. new images come from above items which loaded before, you can watch in video I sent in the first post.
Consider breaking your large list up in to categories/sub categories, select a category from another list and load just those items. Who will scroll 1000 items? You could still provide a search function for the entire list, and return a listview of those items.
Appreciate your advice @TIMAI2
of course the list divided in parts, when user open the screen, only 8 Items from the list adding to list view, when the user scroll down and reach bottom of the list view, it add one more and it continues while the user scroll down, it is because the image loading from the url, if I add more than 1, the app stacks, the process is doing well Titles and subtitles in list view is ok, but only issue is with the image which they are not fixing in their self place while user scroll down, you can watch on video I post before and AIA.
Look at how most websites do it.
A list of categories to select from
Pages (individual listviews) of items in that category
No big long lists
Search the board for
Go Scroll Yourself
That tackles this problem.
I shorten my list to 20, in fist initialize after loading data from google sheet it add 8 items to the Image List View, when user scroll down and reach the bottom of the list view, it add one more and continuing till end of the list, but still the problem exist, image are not fixed in their place.
watch the video:
I think it is not related to the list, it might be an issue of Extension,
this is my AIA:
Loading_image_from_Url_in_imagListView1.aia (618.4 KB)
hope @The_K_Studio have a look
Thank you @ABG of the suggestion.
I tested Go scroll yourself method, card view with comp creator and List view component. but no one was suitable for my project.
my app is a shopping app and user need to click on some item, Go scroll method using labels which are not clickable or I couldn't found any solution. also, in Go scroll method we have to design a scrollbar and user have to scroll from the scroll bar not any area he/she want from the screen, I think it is a weakness.
There is no issue in the extension.
I saw your aia, your blocks are messy, I cant figure out, I feel issue is in your blocks. I suggest you to create a new test project and follow my blocks given above. it will work.
1 Like
Here is a simple example of a "shop", with categories, items and pages
(note: the categories and items don't make sense, I just generated some sample data on mockaroo)
Because the category lists are quite short, I only set the chunks to 3, in reality you may want 10, 10+, much of this will depend on the size of your images and their location, along with network speed of the device using the app (data/wifi etc.)
Most websites use multiple images for display, based either on screen size or display size of the containing element. This is fine when all the images are on the same server, for an app, probably just a thumbnail for the listview, and a display image for a detail view.
shop (1).aia (8.5 KB)
[edit - updated aia and blocks since first posting - small error in blocks for when 3 or less items in category]
3 Likes
thank you for your kindness and help
I am going to try this method.
You were right, there was a bug in the extension which was causing reloading of images while scrolling the list view. I have fixed the issue now. Thanks.
V5 Updated. Issue with image position and reloading fixed.
Thank you very much for your consideration and help.
If possible, please add an option for text alignment from left to right and right to left directions in the next update. In some languages like Arabic, Persian, and Pashto, texts are written from right to left, and using left alignment does not look good.
1 Like
Thank you for suggestion.
V6. Updated
Added property to set text alignement for title and subtitle either left, center or right.
Note: When text is aligned to right and checkbox set to visible then adjust the paddings to avoid layout overlapping.
1 Like