[FREE] Image List Viewer Extension - A Fully Customizable List View with Title, Subtitle, Image and Checkbox

Explanation for each block is provided in first post. To use it with Airtable what did you tried so far?

1 Like

What if you add a button instead of check box …?it could be…?

1 Like

Why additional button is needed when list item click and long click functions are available.

Can i create a component inside this …? I want to add a button instead of check box , that button will get links from Firebase and when that button got clicked user will be redirected to the respective app

You can also do that when list item is clicked.

In this extension you can’t add additional components.

You may use dynamic components extension to create customised layout.

1 Like

I created the listview eith dynamic components but i am not much familiar with list views , thats why i can’t get data from Firebase to show in Listview

V4. Updated:

  1. Issue with background color and other properties not updating after creating the list has been fixed, however some other properties such as image side, scrollbar properties will not update after creating the list, so these has to be set before creating list or can be updated after clearing the list and creating again.

  2. Added a new function IsChecked to check if checkbox is checked for selected list item.

Latest aix updated in first post.

2 Likes

V5 Updated.
Issue with image position and reloading fixed.

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

Excellent work with this extension, I have followed this one from version 1 to version 6… and I have tested it… compared to the native listview in app inventor2… and for one reason I have selected it, it is because it is very light to load the data without congesting the device.
I have a limitation in its use to correctly select the indexes once it is filtered with a text box.
From a list of 5 items; when I look for a value in the last element of the list, once the index is found it places it at 1 not respecting the index it has in the list which is 5.

After filtering the list view, the original list view will be replaced by filtered list view along with their new indices.

To get the original index you have to get the index from original list by using block “index in list” by specefying the list item.

Thanks for your prompt reply, glad. Can you show me how?


I would like to know how it could be updated to do this in the list. I currently made a very rudimentary procedure so that each row has its space according to what it has in the possible combinations fixed in the title, there are more than five thousand elements… and it seems to me that it reduces efficiency when loading the listview Version 6.

Uploading: sel titlte listview index.png…


This is what I’m doing with the native listview of App Inventor, but with the extension I don’t see the elements to apply the procedure.

If you want to use multiple subtitles then there are no multiple subtitles parameters available however you can use subtitle max lines property to set 3 or more lines and enable html for subtitle and use /n for each subtitle that will shift to next line which will create a list like you shown.

Efficiency in the sense what difficult are you facing, is there any lag and in which version you observed more efficiency than version 6.

And for getting index of filtered list item you have to create a separate list to look for original index for any picked list item.

You can first set your list in a global variable which will be your original list.

Now after filtering the list view when you pick an item the check its index in that original list by using index in list block.

Thank you very much for your excellent answers. One of the advantages of imagelistview is that in the subtitles. I was referring to the versatility of directly extracting the elements of the subtitles without going through list filters, or joining text strings, since I am using the list with many elements. In any case, it has served me well as you mention. (maximum line in titles and subtitles)

1 Like


As for efficiency I mean the possibility of indenting the title with left and right margins, since in the same title I represent 2 elements (code and model) and they cannot be joined or given a fixed space so that they are displayed in an orderly manner, one on the left and the other on the right, for that I made a procedure with a cycle to determine the appropriate space and align the second element on the right with the spaces calculated from the 27 possibilities of combinations of SPACES that can be presented by the 6000 elements of the imagelistview; those that do not enter the 27 possibilities I give an approximate space so that they do not join or remain disorganized, however that is how I am doing it and the display of elements is displayed well in loading speed with a low requirement device. With this I did not want to subtract efficiency from the imagelistview.

Its not possible to add more subtitles or adjustments in the extension as per each user requirements. Depending on the requirement you have to do a workaround that you currently did for title. That is good and I suggest you to follow same approach for subtitle also.

For efficiency the extension may behave abnormal as you have large number of list items however if you load first few items on starting the list view and as the users scroll add more. This will make your list view more efficient.

Check this sample code for loading more items as user scrolls: Load more items on user scroll

Regarding the solution you mention, that is what I was thinking of doing, however it did not seem efficient to me because of the number of elements to check to obtain just one index, notice when the loop goes through all the elements of the list and finds the last one, that made it less efficient and slower, one of the ways I was able to solve it to make it as fast as the imagelistview was to place an index within the same list outside the view margin of the imagelistview, so that when an element is filtered it does not have to check in a list type variable the number of elements. But I already have it in imagelistview v6.

Thanks for the support, I’ll be checking it out. The version that I found to be the most stable and fastest was version 6. Excellent work. May God reward you.

2 Likes

This post was flagged by the community and is temporarily hidden.