B4J Tutorial [BANAnoWebix] Lesson 11 Unit List

Ola

Unit lists enable one to group lists by common ground, e.g. first letter of alphabet for the selected field.

Lesson10_UnitList.gif


For this example, we use the dummy data generator and then unite the list by the title after the page is rendered. This has an effect of using a callback to set the unit list grouping.

Create the Unit List...

B4X:
Dim ul As WixUnitList
    ul.Initialize("ulx")
    ul.Setheight(500)
    ul.SetTemplate("#title#<br>#year#")
    ul.SetBorderLess(False)
    ul.SetStyle("margin", "10px")
    ul.SetItemHeight(80)
    '
    Dim dummy As UOENowData
    dummy.Initialize
    Dim data As List = dummy.GetRecordsWithStructure(CreateMap("id": "id", "title": "name", "year": "year") ,10)
    ul.SetData(data)

Add an event so that we know what was clicked and also set the .UniteBy(?) field name.

B4X:
pg.ui
    '
    Dim eID As String
    pg.OnItemClick("ulx", BANano.CallBack(Me, "item_select", Array(eID)))
    ' do this after ux
    pg.SetUniteBy("ulx", "title")
End Sub

Sub item_select(eID As String)
    eID = pg.CStr(eID)
    Dim m As Map = pg.GetItem("ulx", eID)
    pg.Message(BANano.ToJson(m))
End Sub

NB: Always set .UniteBy after the UI is rendered...

What uniteby does is to call a WixPage method on the element to update the uniteBy property of the Unit List like this..

B4X:
'set uniteby should be an existing field
Sub SetUniteBy(ulID As String, fldName As String)
    ulID = ulID.tolowercase
    fldName = fldName.tolowercase
    uniteFld = fldName
    ulName = ulID
    'define unite by
    Dim obj As Map
    Dim cb As BANanoObject = BANano.CallBack(Me, "uniteby", Array(obj))
    Dim opt As Map = CreateMap()
    opt.Put("uniteBy", cb)
    Define(ulName, opt)
    Refresh(ulName)
End Sub

private Sub uniteby(obj As Map) As String
    Dim stitle As String = obj.Get(uniteFld)
    Dim ub As String = stitle.SubString2(0,1)
    Return ub
End Sub
 
Top