如何在ui component grid 新增客製化欄位

在 Magento 2 中，很常會用ui component grid來列出每筆資料的重點資訊。

通常在客製化的需求的時候，會在各個ui component的grid表加上額外的資料。

從這篇文章你會知道：

Magento 2 如何新增欄位在ui component grid上

以新增資料在Admin->Sales->Orders->選一張訂單->ORDER VIEW->Credit Memos這張Grid表為例(如下圖所示)

先找到這個原本產生的檔案位置並在自己建立的模組中建立相對應的檔案

檔案位置:Vendor/Module/view/adminhtml/ui_component/sales_order_view_creditmemo_grid.xml

<?xml version="1.0" ?>
<listing>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">sales_order_view_creditmemo_grid.ecpay_sales_order_view_creditmemo_grid_data_source</item>
        </item>
    </argument>
    <settings>
        <spinner>sales_order_creditmemo_columns</spinner>
        <deps>
            <dep>sales_order_view_creditmemo_grid.ecpay_sales_order_view_creditmemo_grid_data_source</dep>
        </deps>
    </settings>
    <dataSource name="ecpay_sales_order_view_creditmemo_grid_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <filterUrlParams>
                <param name="order_id">*</param>
            </filterUrlParams>
            <updateUrl path="mui/index/render"/>
        </settings>
        <aclResource>Magento_Sales::sales_creditmemo</aclResource>
        <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="ecpay_sales_order_view_creditmemo_grid_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                        <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    原本的欄位

    ......
    新增的欄位
        <column name="new_col" class="Vendor\Module\Ui\Component\Listing\Column\NewCol">
            <settings>
                <filter>text</filter>
                <label translate="true">New Col</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
    </columns>
</listing>

接下來要新增在sales_order_view_creditmemo_grid新增的欄位所使用的class

新增Vendor\Module\Ui\Component\Listing\Column\NewCol.php並 Extend Magento\Ui\Component\Listing\Columns\Column.php

/******
......省略......
*******/
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $item['new_col'] = $item['new_col']??'';
            }
        }

        return $dataSource;
    }

因為目標是ecpay_sales_order_view_creditmemo_grid_data_source要新增一個欄位，所以要在di.xml注入新的data_source。

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">


    <!--  注入新的data_source  -->
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="ecpay_sales_order_view_creditmemo_grid_data_source" xsi:type="string">AstralWeb\EcpayInvoice\Model\ResourceModel\Order\Creditmemo\Order\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
</config>

再新增Vendor\Module\Model\ResourceModel\Order\Creditmemo\Order\Grid.php

可以在這邊加入需要join的表

<?php
namespace Vendor\Module\Model\ResourceModel\Order\Creditmemo\Order\Grid;

/******
......省略......
*******/

class Collection extends \Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult
{
    /**
     * Initialize dependencies.
     *
     * @param EntityFactory $entityFactory
     * @param Logger $logger
     * @param FetchStrategy $fetchStrategy
     * @param EventManager $eventManager
     * @param string $mainTable
     * @param string $resourceModel
     */
    public function __construct(
        EntityFactory $entityFactory,
        Logger $logger,
        FetchStrategy $fetchStrategy,
        EventManager $eventManager,
        $mainTable = 'sales_creditmemo_grid',
        $resourceModel = \Magento\Sales\Model\ResourceModel\Order\Creditmemo::class
    ) {
        parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $mainTable, $resourceModel);
    }


    protected function _initSelect()
    {
        parent::_initSelect();
        $this->getSelect()
            ->joinLeft(
                ['secondTable' => $this->getTable('target_table')],
                'main_table.increment_id = secondTable.increment_id',
                'allow_no'
            );

        return $this;
    }
}

以上就是歐斯瑞本次『如何在ui component grid 新增客製化欄位』 分享，接下來還會持續介紹各種簡易又好用的方法給大家喔！

記得訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

後端開發

如何在ui component grid 新增客製化欄位