---
description: >-
  The List Viewer component allows you to add, view and click on items in a
  list.
---

# List Viewer

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6EwTAquLmNmHtwe2%2Flist-viewer-%E2%9C%95-fig-1.png?generation=1524497190050834\&alt=media)

## Add Items to a List Viewer

### Short Lists

We recommend adding a short [list](lists) of items within the app itself as the Screen starts. Although the list block itself can handle a large number of items, practically speaking you probably only want to use this approach if your project has tens of items.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiALLaXqHua6wfYAMt%2Fshort_list.png?alt=media\&token=30c8d4de-953e-4750-9c3b-49569733c8b7)

### Medium Lists

If you need longer lists of information in your app you can use delimited data. This is very similar to using something like a .csv file. You can have hundreds of items in your list viewer using this method.&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiAkahU_UNDtQoSgaE%2Fmedium_list.png?alt=media\&token=a8730b97-fb9e-41fd-af25-1334f33cef49)

### Long Lists

For longer lists where you need hundreds or thousands of items in your list, we recommend using the [Data Sources](data-sources) component. This gives you three different options for storing your data.&#x20;

1. Local Table
2. Airtable
3. Google Sheets

![Fetching data from a Local Table](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiO2fgdX7rAwz5uLcD%2Flocal%20table.png?alt=media\&token=3a4e2fe9-b2e7-481e-b28d-ddd756d2ea1b)

![Getting data from an Airtable Table](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiOAqfYnp-qEXVvkaa%2Fairtable_col.png?alt=media\&token=6d0f931e-d3df-4cc4-81e0-6c7f0f6702d6)

![Reading data from a Google Sheet](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiOKswWl_YF8Rdn4EI%2Fspreadsheet.png?alt=media\&token=4f0785bd-3239-4bfc-9c93-37a6784e2597)

Choosing Airtable or Google Sheets allows you to create dynamic list viewers. This is where the information displayed to the user changes whenever you change your cloud-based data in Airtable or Google Sheets. Either of these options are ideal for when you need to store thousands of items, or you need to work with items that change frequently.&#x20;

| Property   | Description                                    |
| ---------- | ---------------------------------------------- |
| Text Items | Default (`none`); items must be in list format |

## Select Item from a List Viewer

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiPnnRlHCAb-cCxivD%2Fselect_from_lv.png?alt=media\&token=99930600-9a2e-459e-9f37-ad2d34cc5aa2)

| Property   | Description                                                                   |
| ---------- | ----------------------------------------------------------------------------- |
| Item Click | Returns an `item` value and a numeric `index` number when an item is selected |

## Style the List Viewer

You can customize the List Viewer with the following properties:

* **Text Items Color:** Set color of Text Items font
* **Text Items Background Color:** Set background color for List Viewer
* **Text Items Font Size:** Set font size of Text Items
* **Show Arrow:** To see an arrow beside each item in the list, set the switch to true
* **Visible:** To see the text input in your app, set the switch to true
* **Border**
  * **Width:** Enter how wide you want the border outline of the List Viewer to be
  * **Color:** Pick a color for the border of the List Viewer
  * **Style:** Select if you want the border to be a dotted, dashed or solid line
  * **Radius:** Enter how round you want the edges of the border for the List Viewer to be

## Edit the ListViewer Height

A List Viewer automatically fill 100% of the Screen width

You can set how tall the List Viewer is using the height property.

**Height**

* **Fill container -** The List Viewer fills the entire screen vertically
* **Fit contents -** The List Viewer’s height changes to fit the contents it contains
* **Relative size -** The List Viewer fills the specified percentage of the screen
* **Absolute size -** Sizes the List Viewer to a specified number of pixels

## Add Spacing

You change the spacing and positioning of the List Viewer with the Margin and Padding properties.

**Margin**

* You can specify how much space you want between the border and the contents of List Viewer using either pixel or percent values.

**Padding**

* You can specify how much space you want between the edges of the List Viewer and the screen using either pixel or percent values.

## Events

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWeYo89sEL1YYa7wXIs%2F-MWiQJGgzv9k3EvlJm0q%2Fclick.png?alt=media\&token=318cfb16-9732-44f8-91cf-288b4a66ea91)

Performs an action when the user clicks on any one of the list items.

## Properties

### Height

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZ9vThngEG6sQ3Q0Xm%2Fheight.png?alt=media\&token=b3ff5b3d-64d4-4a8d-9f77-2ef479b52cec)

The set and get height blocks work with the Height property of the list viewer component. Acceptable input values are.&#x20;

* Number of Pixels
* Percentage Height
* "Fit Contents"
* "Fill Container"

The `Computed Height`block returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.

### Show Arrow

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZA-ZCWsflobGVwp61%2Fshow_arrow.png?alt=media\&token=010193d5-4783-444f-b40c-0fc7555d174f)

Choose whether or not the arrow is displayed next to every item in the list viewer.

### Text Items

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZA15Odtrajv_1fR4T%2Ftext_items.png?alt=media\&token=90941f07-cf78-4b21-89ca-76339dda4598)

Set or get the list of text items that are displayed in the List Viewer. You must use a [list](lists) of data here - either locally stored or stored in the cloud.

### Visible

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZA2uFlQh3icqpwxGV%2Fvisible.png?alt=media\&token=e0a107d2-3416-4405-b488-5e1b88cd4467)



The set and get visible blocks are used to show or hide the entire list viewer component. Acceptable values are:

* True
* False

### Width

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZA5HSQLGBh03dmTsb%2Fwidth.png?alt=media\&token=236e4cbf-045a-4644-971f-830db716548d)

The `Computed Width`block returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.

The list viewer doesn't currently support pixel or percentage values for the `width` property.
