String to be searched for to filter the list |
Member of List (PRIM_MD.List)
Data Type - Unicode String
The 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.
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