Magento 2, Useful articles

February 19, 2024

Magento 2 – Show filtered data on admin grid

Show Filtered Data on Admin Grids for Effective Data Management in Magento 2

In the vast landscape of Magento 2 administration, navigating through seemingly endless data can be overwhelming. Fortunately, you can wield the power of filtering to bring clarity and focus to your data management tasks. This blog post delves into two practical methods for initializing a pre-filtered admin grid based on a parameter value, empowering you to streamline your workflow and enhance your decision-making.

Understanding the Need for Pre-Filtered Grids:

Imagine you’re the administrator of a bustling online store. You need to review recent customer browsing history, but sifting through every record is inefficient. By pre-filtering the grid based on specific criteria (e.g., customer ID, date range), you can immediately see the targeted data you need, saving time and maximizing productivity.

Method 1: Leveraging the filter_url_params Element

Locate the UI Component XML File: Identify the UI component XML file responsible for rendering the grid you want to filter. This file typically resides within the view/adminhtml/ui_component/ directory, using your module or core Magento structure as a guide.
Locate the dataSource Node: Within the XML file, find the <dataSource> node with the corresponding name attribute matching your grid’s data source.
Add the filter_url_params Element: Under the <data> tag within the <dataSource> node, create a new <item> element named config. Inside this config element, add a second <item> named filter_url_params. This is where you define the filtering parameters.
Define the Filter Parameter: Inside the filter_url_params element, add a nested <item> element with the following structure:
XML
```
<item name="parameter_name" xsi:type="string">*</item>
```
Replace parameter_name with the actual name of the parameter you want to filter by (e.g., entity_id in the example). The asterisk * indicates that any value for this parameter should trigger filtering.
Customize Filtering Logic (Optional): For more granular control, you can replace the asterisk with a specific value or use expressions. Refer to Magento’s UI component documentation for advanced filtering scenarios.

				
					<dataSource name="browsinghistory_log_listing_data_source">
	<argument name="dataProvider" xsi:type="configurableObject">
		<argument name="class" xsi:type="string">Magento\Customer\Ui\Component\DataProvider</argument>
		<argument name="name" xsi:type="string">browsinghistory_log_listing_data_source</argument>
		<argument name="primaryFieldName" xsi:type="string">log_id</argument>
		<argument name="requestFieldName" xsi:type="string">log_id</argument>
		<argument name="data" xsi:type="array">
			<item name="config" xsi:type="array">
				<item name="update_url" xsi:type="url" path="mui/index/render"/>
				<item name="filter_url_params" xsi:type="array">
					<item name="entity_id" xsi:type="string">*</item>
				</item>
			</item>
		</argument>
	</argument>
	<argument name="data" xsi:type="array">
		<item name="js_config" xsi:type="array">
			<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
		</item>
	</argument>
</dataSource>

Method 2: Utilizing the dataSource Settings Node

Locate the UI Component XML File: Similar to Method 1, find the relevant UI component XML file for your grid.
Locate the dataSource Node: Identify the <dataSource> node with the matching name attribute for your grid’s data source.
Modify the settings Node: Under the <dataSource> node, locate the <settings> node. This is where you define various configuration options, including filtering.
Add the filterUrlParams Element: Within the <settings> node, add a new <filterUrlParams> element.
Define the Filter Parameter: Inside the <filterUrlParams> element, add a nested <param> element with the following structure:
XML
```
<param name="parameter_name">value</param>
```
Replace parameter_name with the actual name of the parameter you want to filter by (e.g., entity_id) and provide a specific value to filter for.

				
					<dataSource name="browsinghistory_log_listing_data_source" component="Magento_Ui/js/grid/provider">
	<settings>
		<storageConfig>
			<param name="indexField" xsi:type="string">log_id</param>
		</storageConfig>
		<updateUrl path="mui/index/render"/>
		<filterUrlParams>
			<param name="entity_id" >*</param>
		</filterUrlParams>

	</settings>
	<aclResource>Webficial_BrowsingHistoryPro::Entity</aclResource>
	<dataProvider name="browsinghistory_log_listing_data_source" class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
		<settings>
			<requestFieldName>log_id</requestFieldName>
			<primaryFieldName>log_id</primaryFieldName>
		</settings>
	</dataProvider>
</dataSource>

Output:

Key Considerations:

Remember to Clear Cache: After making changes to the UI component XML file, clear your Magento cache for the modifications to take effect.
Multiple Parameter Filtering: To filter based on multiple parameters, add additional <param> elements within the <filterUrlParams> element, specifying the desired parameter names and values.
Custom Filter Logic: For complex filtering requirements, explore options like custom filters or data providers. Refer to Magento’s UI component documentation for advanced techniques.

In Conclusion:

By implementing these methods, you can empower yourself and other authorized users to view pre-filtered admin grids, saving valuable time and effort when navigating large datasets. Remember to tailor the filtering behavior to your specific needs and ensure proper understanding of UI component concepts before making XML modifications. By harnessing the power of pre-filtered grids, you can unlock more efficient and streamlined data management within your Magento 2 admin panel.