{"id":24775,"date":"2020-09-17T14:29:48","date_gmt":"2020-09-17T14:29:48","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24775"},"modified":"2020-09-17T14:29:48","modified_gmt":"2020-09-17T14:29:48","slug":"how-to-set-filters-in-pcf-dataset-control-using-setfilter-method","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/09\/how-to-set-filters-in-pcf-dataset-control-using-setfilter-method\/","title":{"rendered":"How to set filters in PCF Dataset control using setFilter method"},"content":{"rendered":"<h2><strong>Introduction <\/strong><\/h2>\n<p style=\"text-align: justify;\">In our <a href=\"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-create-configurable-pcf-dataset-control-using-property-set-and-property\/\" target=\"_blank\" rel=\"noopener noreferrer\">previous\u00a0blog<\/a>, we saw how to create configurable PCF Dataset control. In this blog, we will see how to set filters in your PCF control to manage the data.<\/p>\n<p style=\"text-align: justify;\">Sometimes, we are working on large datasets and filtering that data becomes a nightmare. For such scenarios, we can use setFilter method to filter the data as per the provided condition.<\/p>\n<h3><strong>Prerequisites:<\/strong><\/h3>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/component-framework\/get-powerapps-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft PowerApps CLI <\/a>should be installed.<\/li>\n<li>Should be familiar in creating\u00a0<a href=\"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-work-with-pcf-dataset-control-using-fluent-uis-detail-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Basic dataset control<\/a>.<\/li>\n<\/ul>\n<h2><strong>Scenario:<\/strong><\/h2>\n<p style=\"text-align: justify;\">Let us take a scenario where we have a custom search text box and a button to search the records on the grid. Now if we search a record and click on the button, it should give the filtered records.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-1.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24776 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-1.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"235\" height=\"44\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">We are selecting the field on the basis of which the records will be searched. Here, we have selected name field, so based on the name field the records will be searched.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-2.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24782 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-2.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"756\" height=\"98\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-2.png 756w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-2-300x39.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-2-660x86.png 660w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/a><\/p>\n<h3><strong>Code Implementation:<\/strong><\/h3>\n<p>The setFilter method will filter the data according to our input and will show the filtered data on the grid. When the search button is clicked we will call the below function.<\/p>\n<p><strong><em>public onSearchButtonClicked() {<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 this.contextObj.parameters.sampleDataSet.filtering.clearFilter();<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 let fieldName = &#8220;searchField&#8221;;<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 let condition: any = {<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0 attributeName: fieldName,<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0 conditionOperator: 6 \/* Like *\/,<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0 value: &#8220;%&#8221; + this.searchTextBox.value + &#8220;%&#8221;,<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 };<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 let conditionsArray: any = [];<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 conditionsArray.push(condition);<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 this.contextObj.parameters.sampleDataSet.filtering.setFilter({<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0 conditions: conditionsArray,<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0 filterOperator: 1 \/* or *\/,<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 });<\/em><\/strong><\/p>\n<p><strong><em>\u00a0\u00a0\u00a0 this.contextObj.parameters.sampleDataSet.refresh();<\/em><\/strong><\/p>\n<p><strong><em>\u00a0 }<\/em><\/strong><\/p>\n<h3><strong>Code Explanation:<\/strong><\/h3>\n<p>At first, we are clearing the filter with clearFilter method so that other filters are removed and only our new filter will be applied.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-3.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24781 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-3.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"452\" height=\"111\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-3.png 452w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-3-300x74.png 300w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/a><\/p>\n<p>In <strong>condition<\/strong> object, there are three properties named as attributeName, conditionOperator and value. The attributeName is the field name based on which we are searching the records. In our case, it is the property-set name in the manifest file.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24780 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"861\" height=\"87\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4.png 861w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4-300x30.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4-768x78.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-4-660x67.png 660w\" sizes=\"(max-width: 861px) 100vw, 861px\" \/><\/a><\/p>\n<p>The 6 in condition Operator refers to \u201cLike\u201d i.e. it will search the records which are like \/ contains the value in the searched field. The operator should be always in integer format. For more operator values, please refer to these <a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/api\/microsoft.xrm.sdk.query.conditionoperator?view=dynamics-general-ce-9\">docs<\/a>.<\/p>\n<p style=\"text-align: justify;\">The third property <strong>value<\/strong> refers to the value of the searched field based on which we are searching the record. The value should be always in string format.<\/p>\n<p style=\"text-align: justify;\">This condition object is pushed into an array (<strong>conditionsArray<\/strong>) which is passed in setFilter method with the filter Operator whose values can be 1 (Or) \/ 0 (And). This operator is useful in multiple conditions. After calling setFilter method, we need to refresh the dataset to get the updated values.<\/p>\n<p>As shown in the image below, we will get all the Opportunities containing the word \u201cWill\u201d in the grid.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24779 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"1366\" height=\"461\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5.png 1366w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5-300x101.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5-768x259.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5-1024x346.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-5-660x223.png 660w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/a><\/p>\n<p>We can use other datatypes as well to search the value but the input value will differ for other datatypes, as explained below.<\/p>\n<p><strong>Lookup:<\/strong> To search with Lookup value we need to search with the guid of the record.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-6.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24778 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-6.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"310\" height=\"116\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-6.png 310w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-6-300x112.png 300w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/a><\/p>\n<p><strong>OptionSet:<\/strong> To search with OptionSet value we need to search with the value of that particular option. Example: 0, 1, etc.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-7.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-24777 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-7.png\" alt=\"set filters in PCF Dataset control using setFilter method\" width=\"336\" height=\"118\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-7.png 336w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/09\/set-filters-in-PCF-Dataset-control-using-setFilter-method-7-300x105.png 300w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<h2><strong>Conclusion:<\/strong><\/h2>\n<p style=\"text-align: justify;\">As explained above, we can set filters in PCF dataset control for single line of text. However, we can set filters with other datatypes as well, only the input value will differ for them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In our previous\u00a0blog, we saw how to create configurable PCF Dataset control. In this blog, we will see how to set filters in your PCF control to manage the data. Sometimes, we are working on large datasets and filtering that data becomes a nightmare. For such scenarios, we can use setFilter method to filter\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2020\/09\/how-to-set-filters-in-pcf-dataset-control-using-setfilter-method\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,19,1929],"tags":[545,1941],"class_list":["post-24775","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-crm","category-pcf","tag-dynamics-365-crm","tag-pcf-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=24775"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24775\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=24775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=24775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=24775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}