How to use List View in Thunkable | Designer and Blocks Clear Explanation

Hello Friends, Welcome to the another tutorial of Thunkable. In this tutorial, we will know about List View, its uses, and how to use it.

List View

Introduction

We can simply understand List View as a scrollable table which has only one cell in one row occupying all the available space. We can understand it from the image given below.

Above image is only a illustration of List View. We can customize List View easily for suiting our needs. for e.g. we can add image, video and many more visible components to make List View more attractive, and for adding functions like share, select etc.
We can also customize the backgrund color, border, elevation etc., which we will learn in coming sections.

Uses

List View is used for showing large amount of data, which will not fit in single screen. The extra data, which is not visible can be easily accessed by scrolling the List View. The Grid View, about which we will learn later, do the same thing, but shows the data in grid form.
The Grid View is used for app like image gallery, where it is important to preview the image, so that user can easily click the right image, whereas, the List View is used where the preview of media data (image, video thumbnail, document thumbnail etc.) is not important, like in contacts app, where we can easily identify the contacts with their name.

How to Use

In thunkable, we can easily drag and drop the List View from the User Interface section onto the screen. It is a visible component. The First thing, that we had to customize about List View is its Design. So, first we should understand about the Designer section.

Note - In thunkable, only Text Item can be added to List.

Designer

1. First thing, that we had to do, is to rename the List View. This provides List View a unique name, which will help us in writing blocks easily, by easily identifying, which List View is added for which function.
   
   
   
   
   
2. Text Items - It adds text item to List View. We can use it to show a List of Animals, Birds, Flowers etc. It accepts value seperated by "," (comma). for e.g. (1,2,3,4,5) - It shows 5 List Item with value 1,2,3,4 & 5 respectively.
3. Show Arrow - If true, it shows a arrow beside the text item of List View.
   
   
   
4. Height - It sets the height of the List View. It has 3 options described as,
• Fit contents, Fill container - If Fit contents is selected, the height of the List View will automatically adjust it to the available item size i.e If only two items are added to the List View then then, the height will be only enough to fit two items, whereas, If Fill container is selected, the List View will expand it to occupy the available height on the screen, irrespective of the number of items present in List View.
• Relative Size - It sets the height relative to its parent container. It accepts value in percents, which sets the height relatively i.e. If the height of the parent container is 100px, and we sets the height of the List View to 50%, then the height of the List View will be 50px.
• Absolute Size - It sets the height of the List View in pixels.
5. Visible - If true, then the List View is visible to the user.
6. Margin - It sets the margin of the List View i.e the space between the List View's borders and the neighbouring element's borders.
   
   
   
   
   
• Top - It sets the top margin of List View.
• Bottom - It sets the Bottom margin of List View.
• Left - It sets the Left margin of List View.
• Right - It sets the Right margin of List View.
7. Padding - It sets the padding of the List View i.e the space between the Text Item and the border of List View.
   
   
   
   
   
• Top - It sets the top padding of List View.
• Bottom - It sets the bottom padding of List View.
• Left - It sets the left padding of List View.
• Right - It sets the right paddding of List View.
8. Border - It sets the border of List View.
• width - It sets the height of border. It accepts value in pixels.
• color - It sets the color of border. we can choose any color from the dialog, or can enter rgba() or HEX Color Code.
• style - It sets the style of border. It has 3 options,
• solid - It shows a solid line as a border.
• dotted - It shows a dotted line as a border.
• dashed - It shows a dashed line as a border.
• border radius - It smooths the corners of the border. If we set its value as 5, then the corner will be curved by taking radius 5px.

Blocks

Now we had to add some functions to List View. We can do it in Blocks section. The property of Designer section can also be customized with Blocks.

1. when "List View" "Item Click" do - It fires when the List View item is clicked by the user. It returns Text Item value and its index (position) in List View. We can use it along with if do blocks from control section and logic or math to compare Text Item Value or position to do particular functions for particular value.
2. from "List View" set "Text Items" to - It sets the text item to be shown in List View. It accept Lists Blocks as its value.
3. from "List View" get "Text Items" - It returns the current text items of the List View as lists.
4. from "List View" set "Show Arrow" to - It accepts true or false as its value from Logic section. If true is assigned to it, then a small arrow is shown beside the text item of List View, as shown in the Designer section.
5. from "List View" get "Show Arrow" - It returns true, if the arrow is visible otherwise false.
6. from "List View" set "Height" to - It sets the height of List View. It accepts all the value that is described for height in Designer Section, Like, Fill parent, 50% etc.
7. from "List View" get "Height" - It returns the current height of List View.
8. from "List View" get "Computed Height" - It returns the computed height of List View i.e if we had set the height of List View in percents or Fill parent/Fit contents, then we are not knowing the exact height of List View. This method returns that height.
9. from "List View" get "Computed Width" - It returns the computed width of List View.
10. from "List View" set "Visible" to - It sets the visibility of List View. If true is assigned as it's value, then the List View will be visible, otherwise not.
11. from "List View" get "Visible" - It returns true, if the List View is visible, otherwise false.

So friends, the tutorial for List View ends here. If you had any query regarding the List View, then ask me in comment box.

Thanks,

Programming Infinity