Back to Top

Display UI grid columns on condition basis

Updated 11 July 2023

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.

Searching for an experienced
Magento 2 Company ?
Find out More

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:

image-18-83


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.

Related Blogs:

  1. How to create a grid using UI Component in Magento 2
  2. How to Apply join in Collection in UI Component Grid in Magento 2
  3. Create UI Form in Magento 2: Part 1 and Part 2
  4. How to add Custom Field in UI Component using htmlContent Magento 2

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home