ITEM - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

List Item Widget

Overview

The ITEM widget is the child node of a LIST and is used to encapsulate other FML widgets. If the LIST has tied to a datasource (attribute data="") and a single <ITEM/> is specified (as shown below), the is a prototype and its used as a template for each row in the datasource set.

Table of Contents

Attributes

Name Type Default Description Req
data string n/a The data associated with each item in the list
index int n/a The zero based index in the list data set. The first item in the list is index=0, second item is index=1, ...
selected bool false Toggles true/false when a user clicks on the item
selectable bool true Indicated the item can be selected

Methods

Name Parameter Type Description
select(index) int Selects the item (if deselected) at the specified index and sets the LISTs data to this item's data. Invoked in any EVENT) string using .select(index)
deselect(index) int Deselects (if selected) the item at the sepcified index and sets the LISTs data to NULL. Invoked in any EVENT) string using .deselect(index)
clear() Clears any selected item and sets the LIST's data to NULL. Invoked in any EVENT) string using .clear()

Examples

List
<FML>
  <!-- Data Source -->
  <GET id="trackerdata" url="resources/planedata.json"/> 

  <!-- List -->
  <LIST height="500" id="planelist" data="trackerdata" flex="1" selectable="true">
     <ITEM pad="8" color="={this.selected} ? 'green' : 'grey'" selected="={this.index} == 0">
	<TXT value="Departure: {data.estDepartureAirport}" style="h6"/>
     /ITEM>
  </LIST>

  <ROW>
    <BUTTON label="select 3" onclick="planelist.select(3)"/>
    <BUTTON label="deselect 3" onclick="planelist.deselect(3)"/>
    <BUTTON label="clear" onclick="planelist.clear()"/>
  </ROW>

  <TEXT value="the selected item is: {planelist.data}"></TEXT>
</FML>

logo See it in Action

Other Widgets You May Find Useful

⚠️ **GitHub.com Fallback** ⚠️