Tampilkan kolom kisi UI berdasarkan kondisi – Beragampengetahuan

Di blog ini, kami akan menjelaskan cara menampilkan kolom kisi UI secara kondisional di Magento 2. Pertama, kami akan memberi Anda ikhtisar tentang komponen UI.

Ikhtisar Komponen UI

Komponen UI Magento digunakan untuk mewakili elemen UI yang berbeda seperti tabel, tombol, dialog, dll..

Mereka dirancang untuk rendering antarmuka pengguna (UI) yang sederhana dan fleksibel. Komponen bertanggung jawab untuk merender fragmen halaman hasil dan menyediakan/mendukung interaksi lebih lanjut antara komponen JavaScript dan server.

Komponen UI Magento diimplementasikan sebagai modul standar bernama Magento_UI.

Untuk menggunakan komponen UI dalam modul khusus, Anda perlu menambahkan dependensi pada modul Magento_UI dalam file composer.json komponen.

File XSD berikut berisi aturan dan batasan yang dibagi di antara semua komponen (definisi dan konfigurasi instance):

<your module root dir>/Magento/Ui/etc/ui_definition.xsd

Pengembang ekstensi tidak dapat memperluas skema XSD ini dan memperkenalkan komponen baru, tetapi mereka dapat menyesuaikan komponen yang sudah ada.

Struktur keseluruhan

Ada komponen UI dasar dan tambahan di Magento 2.

Komponen dasarnya adalah:

Semua komponen UI lainnya bersifat sekunder.

Komponen dasar dideklarasikan dalam file tata letak halaman; komponen sekunder dideklarasikan dalam file konfigurasi instance komponen tingkat atas.

Semua komponen dapat dikonfigurasi untuk admin dan etalase.

Daftar adalah komponen dasar yang mengimplementasikan kisi, daftar, dan petak dengan pemfilteran, paginasi, pengurutan, dan fitur lainnya.

Untuk Menampilkan Kolom Admin Grid Berdasarkan Kondisi

Untuk mempelajari cara membuat kisi menggunakan Komponen UI di Magento 2, Anda dapat melihat blog kami yang lain di sini.
Di app/code/beragampengetahuan/Demo/view/adminhtml/ui_component/demo_blog_listing.xml Anda dan tambahkan atribut kelas di tag kolom seperti ini:

<column name="nameofyourcolumn" class="beragampengetahuan\Demo\Ui\Component\Listing\Column\MyColumn">

Sekarang buat kelas MyColumn:

<?php

namespace beragampengetahuan\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);
    }
}

Terima kasih telah membaca artikel ini tentang cara menampilkan kolom kisi UI secara kondisional di Magento 2, kami harap Anda menikmatinya.
Anda juga dapat melihat berbagai ekstensi Magento 2 siap pakai kami.

Akash Panwar
1 lencana

30 Juni 2023