Display UI grid columns on condition basis
In this blog, we will explain you how to display UI grid columns on condition basis in Magento 2. First, we will provide you the overview of UI components.
Overview of UI components
Magento UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others.
They are designed for simple and flexible user interface (UI) rendering. Components are responsible for rendering result page fragments and providing/supporting further interactions of JavaScript components and server.
You can also implement Magento UI components as a standard module named Magento_UI.
To use UI components in your custom module, you need to add a dependency for the Magento_UI module in your component’s composer.json file.
The following XSD file contains rules and limitations shared between all components (both definitions and instance configurations):
<your module root dir>/Magento/Ui/etc/ui_definition.xsd
Extension developers cannot extend this XSD scheme and introduce new components, but can customize existing ones.
General structure
In Magento 2 there are basic and secondary UI components.
Basic components are:
All other UI components are secondary.
We declare Basic components in the page layout files and secondary components in the top-level component’s instances configuration files.
We can configure components for both Admin and storefront.
Listing is a basic component that implements grids, lists, and tiles with filtering, pagination, sorting, and other features.
Steps to display admin grid columns on condition basis
To know how to create a grid using UI Component in Magento 2, you can check our other blog by clicking here.
You can include your UI component in your layout XML file. For example, the customer_listing UI component is included in <Magento_Customer_module_dir>/view/adminhtml/layout/customer_index_index.xml as showing in below image:
In your app/code/Webkul/Demo/view/adminhtml/ui_component/demo_blog_listing.xml , add the class attribute in the column tag as below:
<column name="nameofyourcolumn" class="Webkul\Demo\Ui\Component\Listing\Column\MyColumn">
Now create MyColumn class as:
<?php
namespace Webkul\Demo\Ui\Component\Listing\Column;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\DataObject;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
class MyColumn extends Column{
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
array $components = [],
array $data = []
) {
// here you can use your condition
$hideCondition = true;
if ($hideCondition) {
$data = [];
}
parent::__construct($context, $uiComponentFactory,$components, $data);
}
}
In doing so, you will be able to display UI grid columns on condition basis.
Thank you for reading this article on How to display UI grid columns on condition basis in Magento 2, we hope you liked it.
You can also view our wide range of ready-to-use Magento 2 extensions.