Introduction
In our previous blog, 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 the data as per the provided condition.
Prerequisites:
- Microsoft PowerApps CLI should be installed.
- Should be familiar in creating Basic dataset control.
Scenario:
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.
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.
Code Implementation:
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.
public onSearchButtonClicked() {
this.contextObj.parameters.sampleDataSet.filtering.clearFilter();
let fieldName = “searchField”;
let condition: any = {
attributeName: fieldName,
conditionOperator: 6 /* Like */,
value: “%” + this.searchTextBox.value + “%”,
};
let conditionsArray: any = [];
conditionsArray.push(condition);
this.contextObj.parameters.sampleDataSet.filtering.setFilter({
conditions: conditionsArray,
filterOperator: 1 /* or */,
});
this.contextObj.parameters.sampleDataSet.refresh();
}
Code Explanation:
At first, we are clearing the filter with clearFilter method so that other filters are removed and only our new filter will be applied.
In condition 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.
The 6 in condition Operator refers to “Like” 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 docs.
The third property value refers to the value of the searched field based on which we are searching the record. The value should be always in string format.
This condition object is pushed into an array (conditionsArray) 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.
As shown in the image below, we will get all the Opportunities containing the word “Will” in the grid.
We can use other datatypes as well to search the value but the input value will differ for other datatypes, as explained below.
Lookup: To search with Lookup value we need to search with the guid of the record.
OptionSet: To search with OptionSet value we need to search with the value of that particular option. Example: 0, 1, etc.
Conclusion:
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.