Filter

List - Filter Property

String to be searched for to filter the list

Data Type - Unicode String

Details

he filter property allows for a string to be searched for in List (PRIM_LIST).
The filter will search through the whole list for strings that contain the filter value.
A blank value will display the whole list.

Example

In this example the list is populated using with a call to server module #xDemoWebDataServices using server routine GetEmployees. This returns employees to fill the list.
The edit box at the top of the page uses the changed event to set the filter for the list.

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Layoutmanager(#LayoutPage)

    Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList) Units(Pixels) Width(140)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn2) Displayposition(2) Parent(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListIcon) Marginleft(8) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListPrimaryText) Marginleft(48) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem3) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListSecondaryText) Marginleft(48) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem4) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListTertiaryText) Marginleft(48) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

    Define_Com Class(#PRIM_TBLO) Name(#LayoutPage)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageRow) Displayposition(1) Parent(#LayoutPage)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutPageColumn) Displayposition(1) Parent(#LayoutPage)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageItemSearch) Alignment(TopLeft) Column(#LayoutPageColumn) Manage(#List) Parent(#LayoutPage) Row(#LayoutPageRow) Flow(Down) Marginleft(8) Marginright(8) Margintop(8) Marginbottom(48)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageItemList) Alignment(TopLeft) Column(#LayoutPageColumn) Manage(#Search) Parent(#LayoutPage) Row(#LayoutPageRow) Sizing(FitToWidth) Flow(Down) Marginleft(8) Marginright(8) Margintop(8)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem5) Alignment(CenterLeft) Column(#LayoutListColumn2) Flow(CenterVertical) Manage(#ListTertiaryText1) Marginleft(10) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth) Marginright(8) Margintop(7)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem6) Alignment(CenterLeft) Column(#LayoutListColumn2) Flow(CenterVertical) Manage(#ListTertiaryText2) Marginleft(10) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth) Marginright(8)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem7) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListTertiaryText3) Marginleft(48) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

    Define_Com Class(#PRIM_MD.Edit) Name(#Search) Appearance(EditBox) Captionposition(None) Displayposition(1) Height(40) Helperposition(None) Icon('search') Left(8) Parent(#COM_OWNER) Placeholder('Search') Tabposition(1) Top(8) Width(1184)

    Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(2) Layoutmanager(#LayoutList) Left(8) Parent(#COM_OWNER) Rowheight(110) Tabposition(2) Themedrawstyle('Card') Top(56) Width(1184) Rowsperpage(6) Showpages(True) Itemsperrow(4) Height(744) Itemthemedrawstyle('Card') Itemmarginbottom(4) Itemmarginleft(4) Itemmarginright(4) Itemmargintop(4)
    Define_Com Class(#PRIM_MD.ListIcon) Name(#ListIcon) Displayposition(2) Height(32) Icon('person') Left(8) Parent(#List) Tabposition(1) Themedrawstyle('Rounded') Top(39) Width(32) Source(#xEmployeeImageThumbnail) Iconheight(32)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Name') Displayposition(6) Height(27) Left(48) Parent(#List) Tabposition(6) Source(#xEmployeeIdentification) Themedrawstyle('Heading2') Top(15) Width(92)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListSecondaryText) Caption('Secondary Text') Displayposition(7) Height(18) Left(48) Parent(#List) Tabposition(7) Top(42) Source(#xEmployeeSurname) Themedrawstyle('ForegroundSecondary+Subheading') Width(92)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText) Caption('Tertiary Text') Displayposition(8) Height(18) Left(48) Parent(#List) Tabposition(8) Themedrawstyle('ForegroundSecondary+Subheading') Top(60) Source(#xEmployeeGivenNames) Width(92)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText1) Caption('Tertiary Text') Displayposition(9) Height(18) Left(150) Parent(#List) Tabposition(2) Themedrawstyle('Subheading+ForegroundSecondary') Top(41) Width(137) Source(#xEmployeeCity)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText2) Caption('Tertiary Text') Displayposition(10) Height(18) Left(150) Parent(#List) Tabposition(4) Themedrawstyle('Subheading+ForegroundSecondary') Top(59) Width(137) Source(#xEmployeeState)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText3) Caption('Tertiary Text') Displayposition(11) Height(18) Left(48) Parent(#List) Tabposition(5) Themedrawstyle('Subheading+ForegroundSecondary') Top(78) Source(#xEmployeeGender) Width(92)

    Define_Com Class(#xDemoWebDataServices.GetEmployees) Name(#GetEmployees)

        Evtroutine Handling(#COM_OWNER.Initialize)

            #GetEmployees.Execute( #List )

        Endroutine

        Evtroutine Handling(#Search.Changed)

            #List.Filter := #Search

        Endroutine
End_Com

Details

Example

See also