ListView Component

Properties

backgroundColor
  The color of the ListView background.
Data type: color
Designer Writable true <listview name="listviewName" backgroundColor="FF47c39e">
Code Writeable true listviewName.backgroundColor = "FF47c39e"
Code Readable true let variable = listviewName.backgroundColor

elements
  Specifies the list of choices to display. This is the form ['choice1', 'choice2', 'choice3'].
Data type: array
Designer Writable false
Code Writeable true listviewName.elements = choice1,choice2,choice3
Code Readable true let variable = listviewName.elements

elementsFromString
  Set the list of choices specified as a string with the elements separated by commas such as
Data type: string
Designer Writable true <listview name="listviewName" elementsFromString="string1, string2, string3">
Code Writeable true listviewName.elementsFromString = "string1, string2, string3"
Code Readable false

fontSizeDetail
  Specifies the ListView item's text font size
Data type: number
Designer Writable true <listview name="listviewName" fontSizeDetail="24">
Code Writeable true listviewName.fontSizeDetail = 24
Code Readable true let variable = listviewName.fontSizeDetail

fontTypeface
  Specifies the label's text's font face as 'serif', 'sans serif', or 'monospace'.
Data type: string
Designer Writable true <listview name="listviewName" fontTypeface="monospace">
Code Writeable false
Code Readable false

fontTypefaceDetail
  Specifies the label's text's font face as 'serif', 'sans serif', or 'monospace'.
Data type: number
Designer Writable true <listview name="listviewName" fontTypefaceDetail="serif">
Code Writeable false
Code Readable false

height
  Specifies the ListView's vertical height, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true listviewName.height = 200
Code Readable true let variable = listviewName.height

heightPercent
  Specifies the ListView's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true listviewName.heightPercent = "83%"
Code Readable false

imageHeight
  Specifies the image height of ListView layouts containing images
Data type: number
Designer Writable true <listview name="listviewName" imageHeight="60">
Code Writeable true listviewName.imageHeight = 60
Code Readable true let variable = listviewName.imageHeight

imageWidth
  Specifies the image width of ListView layouts containing images
Data type: number
Designer Writable true <listview name="listviewName" imageWidth="60">
Code Writeable true listviewName.imageWidth = 60
Code Readable true let variable = listviewName.imageWidth

listData
  Specifies the name of a file that can be used to input list data. File should be a CSV file with three entries per line. TitleText, DetailText, Image Name. Words should not be surrounded in double quotes and should not contain commas.
Data type: string
Designer Writable true <listview name="listviewName" listData="testfile.csv">
Code Writeable false
Code Readable false

listViewLayout
  Specifies type of layout for ListView row. Options are: 'text', 'text_detail', 'text_detail_horz', 'image_text', 'image_text_detail'
Data type: string
Designer Writable true <listview name="listviewName" listViewLayout="image_text_detail">
Code Writeable false
Code Readable false

orientation
  Specifies the layout's orientation. This may be 'horizontal' or 'vertical'
Data type: string
Designer Writable true <listview name="listviewName" orientation="vertical">
Code Writeable true listviewName.orientation = "vertical"
Code Readable true let variable = listviewName.orientation

selection
  Returns the text in the ListView at the position of SelectionIndex.
Data type: string
Designer Writable true <listview name="listviewName" selection="Test selection">
Code Writeable true listviewName.selection = "Test selection"
Code Readable true let variable = listviewName.selection

selectionColor
  The color of the item when it is selected.
Data type: color
Designer Writable true <listview name="listviewName" selectionColor="FF18d141">
Code Writeable true listviewName.selectionColor = "FF18d141"
Code Readable true let variable = listviewName.selectionColor

selectionDetailText
  Returns the Secondary or Detail text in the ListView at the position set by SelectionIndex
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = listviewName.selectionDetailText

selectionIndex
  The index of the currently selected item, starting at 0. If no item is selected, the value will be -1. If an attempt is made to set this to a number less than 0 or greater than the number of items in the ListView, SelectionIndex will be set to 1, and Selection will be set to the empty text.
Data type: number
Designer Writable false
Code Writeable true listviewName.selectionIndex = 0
Code Readable true let variable = listviewName.selectionIndex

showFilterBar
  Sets visibility of the filter bar. true will show the bar, false will hide it.
Data type: boolean
Designer Writable true <listview name="listviewName" showFilterBar="true">
Code Writeable true listviewName.showFilterBar = true
Code Readable true let variable = listviewName.showFilterBar

textColor
  The text color of the ListView items.
Data type: color
Designer Writable true <listview name="listviewName" textColor="FF9065bc">
Code Writeable true listviewName.textColor = "FF9065bc"
Code Readable true let variable = listviewName.textColor

textColorDetail
  Specifies the color of the secondary text in a ListView layout
Data type: color
Designer Writable true <listview name="listviewName" textColorDetail="FF7e01e1">
Code Writeable true listviewName.textColorDetail = "FF7e01e1"
Code Readable true let variable = listviewName.textColorDetail

textSize
  Specifies the ListView item's text font size
Data type: number
Designer Writable true <listview name="listviewName" textSize="0">
Code Writeable true listviewName.textSize = 0
Code Readable true let variable = listviewName.textSize

visible
  Specifies whether the ListView should be visible on the screen. Value is true if the ListView is showing and false if hidden.
Data type: boolean
Designer Writable true <listview name="listviewName" visible="true">
Code Writeable true listviewName.visible = true
Code Readable true let variable = listviewName.visible

width
  Specifies the horizontal width of the ListView, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true listviewName.width = 360
Code Readable true let variable = listviewName.width

widthPercent
  Specifies the horizontal width of the ListView as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true listviewName.widthPercent = "85%"
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <listview name="listviewName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <listview name="listviewName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <listview name="listviewName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
createElement Creates a new element that can appended to an array of similar items. This new array can be assigned as the listview's Elements to update the listview items that are seen on the screen.
listviewName.createElement(mainText, detailText, imageName)
listviewName.createElement(Test mainText, Test detailText, Test imageName)
mainText string
detailText string
imageName string
getDetailText Get the Detail Text of a ListView element at the given index.
listviewName.getDetailText(index)
listviewName.getDetailText(0)
index number
getImageName Get the filename of the image of a ListView element that has been uploaded to Media at the given index.
listviewName.getImageName(index)
listviewName.getImageName(0)
index number
getMainText Get the Main Text of a ListView element at the given index.
listviewName.getMainText(index)
listviewName.getMainText(0)
index number
refresh Reload the ListView to reflect any changes in the data.
listviewName.refresh()
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
afterPicking Simple event to be raised after the an element has been chosen in the list. The selected element is available in the Selection property.
listviewName.addEventListener(
    "afterPicking",
    function () {
        //Your code here
    }
)