The List Viewer component allows you to add, view and click on items in a list.
You can customize the List Viewer with the following properties:
Performs an action when the user clicks on an item of the List Viewer.
Outputs
Set and get properties of the List Viewer.
Set the text items displayed in your List Viewer. Works with list blocks:
This block also works with blocks to retrieve columns from Data Sources:
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.
Performs an action when the user clicks on any one of the list items.
Set and get font color of the List Viewer's text items.
Set and get background color of the List Viewer's text items.
Set and get font size of the List Viewer's text items.
Choose whether or not the arrow is displayed next to every item in the list viewer.
The Computed Height
block returns the height of the List Viewer in pixels after it has been rendered on-screen.
The Computed Width
block returns the width of the List Viewer in pixels after it has been rendered on-screen.
Set and get the visibility of the List Viewer.
Property | Description | Data Type |
---|---|---|
Property | Description | Data Type |
---|---|---|
Property | Description | Data Type |
---|---|---|
Property | Description | Data Type |
---|---|---|
Text Items
Set text items of List Viewer
List of text items
Color
Set font color of Text Items
Color
Background Color (text items)
Set background color for the items in the List Viewer
Color
Font Size
Set font size of Text Items
Number
Show Arrow
Toggle whether arrow is shown beside text items
True/False
Writing Direction (iOS and web app only)
Set writing direction of text items
Select from list [auto, ltr, rtl]
Background Color (container)
Set the background color of the List Viewer container.
Color
X
Set the location of your List Viewer on the X-axis in pixels
Number
Y
Set the location of your List Viewer on the Y-axis in pixels
Number
Height
Set the Height of your List Viewer in pixels
Number
Width
Set the Width of your List Viewer in pixels
Number
Resize Mode
Define dimensions of the list viewer component/container
Select from list [Stretch, Float in Place]
Visible
Toggle whether your end users can see the List Viewer
True/False
Border Style
Set style of List Viewer's border
Select from list [solid, dotted, dashed]
Border Color
Set color of List Viewer's border
Color
Border Width
Set width of List Viewer's border in pixels
Number
Border Radius
Set radius of corners for List Viewer's border in pixels
Number
Shadow Color
Color of List Viewer's shadow
Color
Shadow Opacity
Opacity of List Viewer's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of List Viewer's shadow in pixels
Number
Shadow Offset
How far List Viewer's shadow should be offset, in Height and Width, in pixels
Number
Item
Text of selected item
String
Index
Position of item in List Viewer (starting with 1)
Number