Jump to: navigation, search

Changes

HowTo:Implement Custom Filtering

12,655 bytes added, 08:58, 19 June 2023
Restructuring of page for clarity, plus added content.
This page describes how to customize filtered lists that accept one or multiple user inputs as filter criteria (referred to as 'Dynamic'), alone or combined with predefined criteria(referred to as 'Static'). The custom filtering is following examples are based on four different xaml partsthe Children.Items collection, however, Properties or Documents can be filtered too, by adjusting the ItemsSource in the <cv:ListCollectionView> or <controls:SfDataSourceExt> in UWP or Xamarin respectively.  {{Attention|Are you sure you need this?<br>UBIK has a simpler out-of-the-box Property-based filtering technique for filtering child objects when one or multiple property value inputs are the only type of criteria required. See [[Property_Based_Content_Filters]]}} Four elements are required for Custom Filtering:* Input field- for user inputs.* [[EvalExpression]] - for converting user inputs into a filter expression.* List filterCollection Filter - for applying the expression to a collection.* List Items control - for displaying the filtered items.<br>
<br>
With this Filter, we can filter This system acts dynamically to output the filtered list, without using any evaluate requiring the use of an Evaluation button or something, you just and directly outputs all items that match the filter input . This page will first describe the basic implementation of a value single dynamic input, then describe how to allow for multiple inputs, and finally, how to combine multiple dynamic inputs with static, predefined criteria.However, keep in mind that you want for simply dynamically filtering child objects based on single or multiple property values, this complex customizing is not required. Instead, this technique gives the possibility to filter create multiple collections based on the same child collection, each with and individual filters that do not interfere with each other, or else to create filters based on dynamic inputs for Properties or Documents, which are not handled by the Content-Based Filtering functionality. {{Attention|This implementation will not work when parts of it , such as the Input fields, are hosted in a ListView header or footer template, as this content is not readable by the rest of the page and will directly output you any item that contains return a "Can not find the filter inputobject referenced" parsing error.}}
== Input field ==
The input field is just a basic Textbox/Entry we will use to input the filter criteria value. <br>
<br>
It == Basic Implementation ==To build the filter in XAML, you will look like thisneed to place an EvalExpression and a Collection Filter in the Resources of your container (most likely, a Grid). In the container's content, you will need the Input control, and the items control as an output (most likely a ListView). The following namespaces are used:
<tabs>
<tab name="UWP">
<source lang = "xml">
<TextBox xxmlns:Namecontrols="InputTextboxNameusing:UBIK.WinX.Controls"xmlns:cv="using:UBIK.WinX.UI.CollectionView" />
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
<Entry xxmlns:Namecontrols="Filter_Inputclr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"/>
</source>
</tab>
</tabs>
== [[EvalExpression]] = Resources ===With this [[EvalExpression]]For UWP, we can combine it is possible to place the Input text field with the value parameter (property from EvalExpression and Collection Filter into the item we want <Grid.Resources>, as shown below. However, for Xamarin, it is required to filter)use the <ContentView.Resources>.For the Collection Filter, use [[XAML_Changes_in_UBIK_WinX_3.5#Filtering_by_expressions|ListCollectionView]] for UWP & [[Xamarin_XAML#FeatureRelated|Content_filtering]] for Xamarin:
Here is the final XAML [[EvalExpression]] solution:
<tabs>
<tab name="UWP">
<source lang = "xml">
<Grid.Resources> <controls:EvalExpression x:Name="FilterExpression" Context="{Binding}" Expression="FC1(INPUT==null||INPUT==&quot;&quot;) ? &quot;true&quot; : EXP"> <controls:EvalExpressionParameter Name="FC1INPUT"Value="{Binding ElementName=NameInput, Path=Text}" /> <controls:EvalExpressionParameter Name="EXP" Value="{Binding ElementName=InputTextboxNameNameInput, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.Values[&quot;NAME&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}" /> </controls:EvalExpression> <cv:ListCollectionView x:Key="FilterView" Expression="{Binding ElementName=FilterExpression, Path=Result}" ItemsSource="{Binding Children.Items}" /></Grid.Resources>
</source>
 
{{Attention|Note that the EvalExpression in UWP requires an x:Name, which in turn requires the 'ElementName' syntax seen in the <cv:ListCollectionView>.}}
{{Attention|Note that the Converter seen in the 'EXP' EvalExpressionParameter in UWP is 'StringFormatConverter', which is different than in Xamarin.}}
</tab>
<tab name="Xamarin">
<source lang = "xml">
<ContentView.Resources> <ResourceDictionary> <controls:EvalExpression x:Key="FilterExpression" Context="{Binding}" Expression="(P1INPUT==null||P1INPUT==&quot;&quot;)?&quot;true&quot;:P0EXP" Context> <controls:EvalExpressionParameter Name="INPUT" Value="{BindingSource={x:Reference NameInput}, Path=Text}"/> <controls:EvalExpressionParameter Name="P0EXP" Value="{Binding Path=Text, Source={x:Reference Filter_InputNameInput}, Path=Text, Converter={StaticResource FormatterStringFormat}, ConverterParameter='Item.Values[&quot;NAME&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}" /> </controls:EvalExpressionParameter NameEvalExpression> <controls:SfDataSourceExt x:Key="P1FilterView" Value Expression="{Binding Path=Text, Source={x:Reference Filter_InputStaticResource FilterExpression}, Path=Result}" ItemsSource="{Binding Children.Items}" /> </controls:EvalExpressionResourceDictionary></ContentView.Resources>
</source>
 
{{Attention|Note that the EvalExpression in Xamarin requires an x:Key, which in turn requires the 'StaticResource ' syntax seen in the <controls:SfDataSourceExt>.}}
{{Attention|Note that the Converter seen in the 'EXP' EvalExpressionParameter in Xamarin is 'StringFormat', which is different than in UWP.}}
</tab>
</tabs>
The best solution would be to place this eval expression into the <Grid.Resources>.
Used namespaceThe EvalExpression Expression first checks whether the TextBox input is empty (as this would otherwise incorrectly be considered a filter input, whereby the property should be empty) and if so returns the unfiltered list (expression outcome hardcoded to 'true'), otherwise, applies the filter (expression outcome is taken from string constructed in ConverterParameter of 'EXP'). There are two important details of the EvalExpressionParameter to note here: * The "ElementName=NameInput" / "x:Reference NameInput" should match exactly to the name of your Input control.* The Item.Values[&quot;NAME&quot;] should be adapted, by changing NAME to the property that should be filtered by this input. <br>=== TextBox / Entry ===The input field is just a basic <Textbox> / <Entry> we will use to input the filter criteria value. The only important detail for this input control is the name, which must be passed back to the EvalExpressionParameter.<br><br>It will look like this:
<tabs>
<tab name="UWP">
<source lang = "xml">
xmlns<TextBox x:controlsName="using:UBIK.WinX.ControlsNameInput"/>
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
xmlns<Entry x:controlsName="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPLNameInput"/>
</source>
</tab>
</tabs>
==List filter = Items control ===To get An items control will likely be used to this EvalExpression we also need to configure a List filter component like in this case [[XAML_Changes_in_UBIK_WinX_3.5#Filtering_by_expressions|ListCollectionView]] for displaying filtered results, such as <controls:SelectionBoundListView> for UWP & [[Xamarin_XAML#Feature relatedPerformance|Content filteringSfListViewExt]] for Xamarin:
<tabs>
<tab name="UWP">
<source lang = "xml">
<cvcontrols:ListCollectionView SelectionBoundListView x:KeyName="FilterViewFilterQueryList" Expression="{Binding ElementName=FilterExpression, Path=Result}" ItemsSource="{Binding Children.ItemsStaticResource FilterView}" />
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml"><controls:SfDataSourceExt SfListViewExt x:KeyName="FilterViewFilterQueryResultList" Expression ItemsSource="{Binding Path=ResultDisplayItems, Source={StaticResource FilterExpressionFilterView}}" ItemsSource="{Binding Children.Items}" />
</source>
</tab>
</tabs>
<br>
Used namespace== Multiple Dynamic (User Inputs) Criteria ==It is likely that the customizing is required to process multiple user inputs for the same filter. In this case, the EvalExpression must be adapted to combine the inputs (most likely using an AND relation, for a 'filtering-down' effect), as well as to deliver the full list when nothing is inputted.A <Textbox> / <Entry>, and an EvalExpression, will be required for every additional property, as well as a final EvalExpression to combine them. The EvalExpressions should be amended as follows:
<tabs>
<tab name="UWP">
<source lang = "xml">
xmlns<controls:cvEvalExpression x:Name="usingName_FilterExpression" Expression="(INPUT==null||INPUT==&quot;&quot;) ? &quot;true==true&quot; :UBIKEXP " Context="{Binding}"> <controls:EvalExpressionParameter Name="EXP" Value="{Binding ElementName=NameInput, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.WinXValues[&quot;NAME&quot;].UIToLower().CollectionViewContains(&quot;{0}&quot;.ToLower())==true'}"/> <controls:EvalExpressionParameter Name="INPUT" Value="{Binding ElementName=NameInput, Path=Text}" /></controls:EvalExpression> <controls:EvalExpression x:Name="Desc_FilterExpression" Expression="(INPUT==null||INPUT==&quot;&quot;) ? &quot;true==true&quot; : EXP " Context="{Binding}"> <controls:EvalExpressionParameter Name="EXP" Value="{Binding ElementName=DescInput, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.Values[&quot;DESCR&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}" /> <controls:EvalExpressionParameter Name="INPUT" Value="{Binding ElementName=DescInput, Path=Text}" /></controls:EvalExpression> <controls:EvalExpression x:Name="FilterExpression" Context="{Binding}" Expression="NAME +&quot;&amp;&amp;&quot;+ DESC"> <controls:EvalExpressionParameter Name="NAME" Value="{Binding ElementName=Name_FilterExpression, Path=Result}" /> <controls:EvalExpressionParameter Name="DESC" Value="{Binding ElementName=Desc_FilterExpression, Path=Result}" /></controls:EvalExpression>
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
xmlns<controls:EvalExpression x:Key="Name_FilterExpression" Expression="(INPUT==null||INPUT==&quot;&quot;) ? &quot;true==true&quot; : EXP " Context="{Binding}"> <controls:EvalExpressionParameter Name="clr-namespaceEXP" Value="{Binding Source={x:UBIKReference NameInput}, Path=Text, Converter={StaticResource StringFormat}, ConverterParameter='Item.CPLValues[&quot;NAME&quot;].ControlsToLower().Contains(&quot;assembly{0}&quot;.ToLower())=UBIK=true'}" /> <controls:EvalExpressionParameter Name="INPUT" Value="{Binding Source={x:Reference NameInput}, Path=Text}" /></controls:EvalExpression> <controls:EvalExpression x:Key="Desc_FilterExpression" Expression="(INPUT==null||INPUT==&quot;&quot;) ? &quot;true==true&quot; : EXP " Context="{Binding}"> <controls:EvalExpressionParameter Name="EXP" Value="{Binding Source={x:Reference DescInput}, Path=Text, Converter={StaticResource StringFormat}, ConverterParameter='Item.CPLValues[&quot;DESCR&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}"/> <controls:EvalExpressionParameter Name="INPUT" Value="{Binding Source={x:Reference DescInput}, Path=Text}" /></controls:EvalExpression> <controls:EvalExpression x:Key="FilterExpression" Context="{Binding}" Expression="NAME +&quot;&amp;&amp;&quot;+ DESC"> <controls:EvalExpressionParameter Name="NAME" Value="{Binding Source={StaticResource Name_FilterExpression}, Path=Result}" /> <controls:EvalExpressionParameter Name="DESC" Value="{Binding Source={StaticResource Desc_FilterExpression}, Path=Result}" /></controls:EvalExpression>
</source>
</tab>
</tabs>
The above example shows how to check for inputs to either property, NAME and DESCR, then use an additional EvalExpression to create the expression string that combines them. For each additional property you need to:* Create an EvalExpression that checks whether the text input is null or empty, and if not, returns the desired expression EXP.* Add each EvalExpression (Name_FilterExpression, Desc_FilterExpression) to the 'main' one (FilterExpression) as Parameters, combined using the escaped '&&' concatenation symbols. {{Attention|Due to the escaped syntax required in the Expression, <source lang ="xml">+&quot;&amp;&amp;&quot;+</source> is the correct syntax required to concatenate filter expressions together.}} Once the additional input controls have been created, processed in their own EvalExpressions, referenced as EvalExpressionParameters and the "FilterExpression" EvalExpression has been adapted as shown, the filter should already function as required; the Collection Filters and Items Controls do not need to be adapted.<br>= List control = Combining Dynamic (User Inputs) and Static (Predefined) Criteria ==The ListView A common use of the Collection Filter is for to filter child lists based on one or multiple properties, such as MetaDefinition.UID or a certain status, to present groups of specific object types. Therefore, it is likely that a customizing may require hardcoded filter criteria, combined with user input, if any is provided. The following describes how to implement such a scenario in XAML, again using/displaying filtered results[[:Category:Multiple Dynamic (User Inputs) Criteria]] as a starting point. 
<tabs>
<tab name="UWP">
<source lang = "xml">
<controlsx:String x:Key="Static_FilterExpression">Item.Content.MetaDefinition.UID.ToString().ToLower()==&quot;6f73cde9-ed38-4cbd-8ca1-4597cc2ae621&quot;</x:SelectionBoundListViewString> <controls:EvalExpression x:Name="FilterQueryListFilterExpression" Expression="NAME +&quot;&amp;&amp;&quot;+ DESC +&quot;&amp;&amp;&quot;+ STAT" Context="{Binding}"> ItemsSource <controls:EvalExpressionParameter Name="NAME" Value="{Binding ElementName=Name_FilterExpression, Path=Result}" /> <controls:EvalExpressionParameter Name="DESC" Value="{Binding ElementName=Desc_FilterExpression, Path=Result}" /> <controls:EvalExpressionParameter Name="STAT" Value="{StaticResource FilterViewStatic_FilterExpression}" /></controls:EvalExpression>
</source>
</tab>
<tab name="Xamarin">
<source lang="xml"><controlsx:String x:Key="Static_FilterExpression">Item.Content.MetaDefinition.UID.ToString().ToLower()==&quot;6f73cde9-ed38-4cbd-8ca1-4597cc2ae621&quot;</x:SfListViewExtString> <controls:EvalExpression x:NameKey="FilterQueryResultListFilterExpression"Expression="NAME +&quot;&amp;&amp;&quot;+ DESC +&quot;&amp;&amp;&quot;+ STAT" Context="{Binding}"> ItemsSource <controls:EvalExpressionParameter Name="NAME" Value="{Binding DisplayItemsSource={StaticResource Name_FilterExpression}, Path=Result}" /> <controls:EvalExpressionParameter Name="DESC" Value="{Binding Source={StaticResource FilterViewDesc_FilterExpression}, Path=Result}" /> <controls:EvalExpressionParameter Name="STAT" Value="{StaticResource Static_FilterExpression}" /></controls:EvalExpression>
</source>
</tab>
</tabs>
Used namespaceOnce one or multiple EvalExpressions have been added to process each input (such as Name_FilterExpression, Desc_FilterExpression), the remaining predefined filter criteria, in this example, filtering for a specific MetaClass by UID, can be added as an x:String, or directly in the EvalExpression paramerter, though the first approach is recommended, for better readability. == Filtering a GUID Property ==The expression string seen in the "EXP" command parameters shown above compare a user input with the value stored in Values[MP_PROPERTY], of the requested property. However, in certain cases, it may not be adequate to search in Values[MP_PROPERTY], such as when the property is a GUID. This is because Values[LK_GUID_PROPERTY] returns the UID value of the linked object, whereas Properties.VisibleItems[LK_GUID_PROPERTY].DisplayValue returns the human readable label associated with this linked object.  The solution is to rewrite the expression string to target the correct binding:
<tabs>
<tab name="UWP">
<source lang = "xml">
xmlns:<controls:EvalExpressionParameter Name="using:UBIKEXP" Value="{Binding ElementName=NameInput, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.WinXProperties.ControlsVisibleItems[&quot;LK_GUID_PROPERTY&quot;].DisplayString.ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}"/>
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
xmlns:<controls:EvalExpressionParameter Name="clr-namespaceEXP" Value="{Binding Source={x:UBIKReference NameInput}, Path=Text, Converter={StaticResource StringFormat}, ConverterParameter='Item.CPLProperties.ControlsVisibleItems[&quot;assembly=UBIKLK_GUID_PROPERTY&quot;].CPLDisplayString.ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}"/>
</source>
</tab>
</tabs>
 
A good way to inspect and test the target binding is to output it on the items UI, therefore on the ItemTemplate of your ListView, as well as to output the expressions that are being dynamically generated in your EvalExpressions, by binding the Result to the Text property of a <TextBlock> (UWP) or <Label> (Xamarin).
 
== And / Or Operations ==
All examples of multiple inputs in this article use an 'and' filter condition, where, if any inputs are entered, only items that match all inputs (NAME <b>and</b> DESC) are kept in the collection, to produce a 'filtering down' effect in the user interface.
 
If a less strict filter condition is required, the FilterExpression can be altered to have an 'or' condition, where all results that match NAME <b>or</b> DESC, but not necessarily both, are shown. To do so, simply change the concatenation syntax to return 'or' symbols (two pipes or '||'):
<source lang = "xml">
+&quot;||;&quot;+
</source>
== See also ==
* [[XAML]]
* [[XAML_Tips]]
* [[Xamarin_XAML]]
[[Category:Client|Custom Filtering]]
[[Category:WinX|Custom Filtering]]
[[Category:Xamarin|Custom Filtering]]
[[Category:Filtering|Custom Filtering]]
[[Category:Styling|Custom Filtering]]
REP
696
edits
Retrieved from "https://wiki.augmensys.com/index.php?title=Special:MobileDiff/24689"