Lists allow you to group list objects together. The items are collapsibles that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

In Page Lists

In Page Lists are lists that grow inside your page. They do not have a seperate scrollbar.

  • Family
    Mom
    Dad
    Brother
    Sister
  • Colleagues
    Boss
    Secretary
  • Friends
    Jean
    Walter
    Betty
    Thomas
    Jones
    Steven
    Andrea
    Julie
' create list
Dim list1 As ABMList
list1.Initialize(page, "list1", ABM.COLLAPSE_ACCORDION, "list1theme")

' add items
list1.AddItem("H1", BuildSimpleItem("L1H1","mdi-action-account-circle","Family"))
list1.AddSubItem("H1", "S1", BuildSimpleItem("L1H1S1","", "Mom"))
list1.AddSubItem("H1", "S2", BuildSimpleItem("L1H1S2","", "Dad"))
list1.AddSubItem("H1", "S3", BuildSimpleItem("L1H1S3","", "Brother"))
list1.AddSubItem("H1", "S4", BuildSimpleItem("L1H1S4","", "Sister"))
list1.AddItem("H2", BuildSimpleItem("L1H2","mdi-action-dashboard","Colleagues"))
list1.AddSubItem("H2", "S5", BuildSimpleItem("L1H2S5","", "Boss"))
list1.AddSubItem("H2", "S6", BuildSimpleItem("L1H2S6","", "Secretary"))
list1.AddItem("H3", BuildSimpleItem("L1H3","mdi-editor-border-all","Friends"))
list1.AddSubItem("H3", "S7", BuildSimpleItem("L1H3S7","", "Jean"))
list1.AddSubItem("H3", "S8", BuildSimpleItem("L1H3S8","", "Walter"))
list1.AddSubItem("H3", "S9", BuildSimpleItem("L1H3S9","", "Betty"))
list1.AddSubItem("H3", "S10", BuildSimpleItem("L1H3S10","", "Thomas"))
list1.AddSubItem("H3", "S11", BuildSimpleItem("L1H3S11","", "Jones"))
list1.AddSubItem("H3", "S12", BuildSimpleItem("L1H3S12","", "Steven"))
list1.AddSubItem("H3", "S13", BuildSimpleItem("L1H3S13","", "Andrea"))
list1.AddSubItem("H3", "S14", BuildSimpleItem("L1H3S14","", "Julie"))

page.Cell(2,1).AddComponent(list1)
// the list clicked event
Sub List1_Clicked(ItemId As String)
   If ItemId.StartsWith("H") Then Return
   Dim list1 As ABMList = page.Component(2,1,"list1")
   Dim lbl As ABMLabel = list1.Item(ItemId)
   Dim myTexts, myReturns As List
   myTexts.Initialize
   myReturns.Initialize
   myToastId = myToastId + 1
   page.ShowToast("toast" & myToastId, "toastred", "Clicked on " & lbl.Text, 5000, myTexts, myReturns)
End Sub
Lists with scrollbar

Lists with a scrollbar have a maximum height. In this example we also use another collapsing method: ABM.COLLAPSE_EXPANDABLE.

  • Family
    Mom
    Dad
    Brother
    Sister
  • Colleagues
    Boss
    Secretary
  • Friends
    Jean
    Walter
    Betty
    Thomas
    Jones
    Steven
    Andrea
    Julie
list2.InitializeWithMaxHeight(page, "list2", ABM.COLLAPSE_EXPANDABLE, 310, "list1theme")
...
Complex list layout

The layouts of the items in a list can be complex. For example this list has ABMCards as items.

  • Family
    Mom

    This is my card content...

    Dad

    This is my card content...

    Brother

    This is my card content...

    Sister

    This is my card content...

  • Colleagues
    Boss

    This is my card content...

    Secretary

    This is my card content...

  • Friends
    Jean

    This is my card content...

    Walter

    This is my card content...

    Betty

    This is my card content...

    Thomas

    This is my card content...

    Jones

    This is my card content...

    Steven

    This is my card content...

    Andrea

    This is my card content...

    Julie

    This is my card content...