Magento 2 Development 19: Action Column

In the previous blog, we have seen about Mass-actions but sometimes we will need actions for each row. For example, if we want to give permission to the admin to edit the blogs then we will have to give an edit link in each row; just like we did on front-end.

In this blog, we will create an action column that will allow us to delete a single blog at a time. We will look into the edit blog feature in the next blog.

Create UI-Component file

Since we are adding a column in the grid, at first we need to edit the ui-component file of the grid view/adminhtml/ui_component/blogmanager_blog_listing.xml

Updated code for view/adminhtml/ui_component/blogmanager_blog_listing.xml file

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing_data_source</item>
            <item name="deps" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">blogmanager_blog_columns</item>
    </argument>
    <dataSource name="blogmanager_blog_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">blogmanager_blog_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">entity_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="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</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>
    <listingToolbar name="listing_top">
        <massaction name="listing_massaction" component="Magento_Ui/js/grid/tree-massactions">
            <argument name="data" xsi:type="array">
                <item name="data" xsi:type="array">
                <item name="selectProvider" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing.blogmanager_blog_columns.ids</item>
                <item name="displayArea" xsi:type="string">bottom</item>
                <item name="indexField" xsi:type="string">entity_id</item>
                </item>
            </argument>
            <action name="delete">
                <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="type" xsi:type="string">delete</item>
                    <item name="label" xsi:type="string" translate="true">Delete</item>
                    <item name="url" xsi:type="url" path="blog/manage/massDelete"/>
                    <item name="confirm" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Delete Blogs?</item>
                        <item name="message" xsi:type="string" translate="true">Are you sure you want to delete the selected blogs?</item>
                    </item>
                </item>
                </argument>
            </action>
            <action name="status">
                <settings>
                    <type>status</type>
                    <label translate="true">Change status</label>
                    <actions>
                        <action name="0">
                            <type>enable</type>
                            <label translate="true">Enable</label>
                            <url path="blog/manage/massStatus">
                                <param name="status">1</param>
                            </url>
                        </action>
                        <action name="1">
                            <type>disable</type>
                            <label translate="true">Disable</label>
                            <url path="blog/manage/massStatus">
                                <param name="status">0</param>
                            </url>
                        </action>
                    </actions>
                </settings>
            </action>
        </massaction>
        <bookmark name="bookmarks"/>
        <columnsControls name="columns_controls"/>
        <filters name="listing_filters">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="templates" xsi:type="array">
                            <item name="filters" xsi:type="array">
                                <item name="select" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                                    <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
        </filters>
        <paging name="listing_paging"/>
    </listingToolbar>
    <columns name="blogmanager_blog_columns">
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="entity_id">
            <settings>
                <filter>textRange</filter>
                <label translate="true">ID</label>
                <resizeDefaultWidth>25</resizeDefaultWidth>
            </settings>
        </column>
        <column name="user_name">
            <settings>
                <filter>text</filter>
                <label translate="true">User</label>
            </settings>
        </column>
        <column name="title">
            <settings>
                <filter>text</filter>
                <label translate="true">Title</label>
            </settings>
        </column>
        <column name="content" class="Webkul\BlogManager\Ui\Component\Listing\Columns\Content">
            <settings>
                <filter>false</filter>
                <sortable>false</sortable>
                <label translate="true">Content</label>
            </settings>
        </column>
        <column name="status" component="Magento_Ui/js/grid/columns/select">
            <settings>
                <options class="Webkul\BlogManager\Model\Blog\Status"/>
                <dataType>select</dataType>
                <filter>select</filter>
                <sortable>false</sortable>
                <label translate="true">Status</label>
            </settings>
        </column>
        <column name="updated_at" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <filter>dateRange</filter>
                <dataType>date</dataType>
                <label translate="true">Updated</label>
            </settings>
        </column>
        <column name="created_at" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <filter>dateRange</filter>
                <dataType>date</dataType>
                <label translate="true">Created</label>
            </settings>
        </column>
        <actionsColumn name="delete_action" class="Webkul\BlogManager\Ui\Component\Listing\Columns\DeleteAction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="viewUrlPath" xsi:type="string">blogmanager/manage/delete</item>
                    <item name="urlEntityParamName" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Delete</label>
            </settings>
        </actionsColumn>
    </columns>
</listing>

Here, at the end, I have added a new tag actionsColumn to add the action column which will let us delete a single row at a time. We have used a class for this column. With that class, we will be displaying the URLs for each row.

With the argument tag, we can pass some data to the class. It will get clear when we see the code for the DeleteAction class.

NOTE that here for the url we are using the route id instead of the front name. It’s because of some strange issue with Magento. So please keep both the route id and the front name the same when you are developing any module.

Create Action Column

Now let’s create the class of the action column, Ui/Component/Listing/Columns/DeleteAction.php

Code for Ui/Component/Listing/Columns/DeleteAction.php file

Just like we did earlier with the Content column where we used prepareDataSource to loop through each row and set the data for each row. We have looped over $dataSource['data']['items'] and we are setting url data for each row as [ ‘view’ => [ ‘href’ => ‘#’, ‘label’ => ‘Link’ ] ]; format.

Here you can notice that we have used the getData function. So what it does is that it allows us to get the values that we passed from the ui component in the argument tag.

<?php
namespace Webkul\BlogManager\Ui\Component\Listing\Columns;

use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;

class DeleteAction extends \Magento\Ui\Component\Listing\Columns\Column
{
    /**
     * @var Magento\Framework\UrlInterface
     */
    protected $urlBuilder;

    /**
     * Dependency Initilization
     *
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                if (isset($item['entity_id'])) {
                    $viewUrlPath = $this->getData('config/viewUrlPath');
                    $urlEntityParamName = $this->getData('config/urlEntityParamName');
                    $item[$this->getData('name')] = [
                        'view' => [
                            'href' => $this->urlBuilder->getUrl(
                                $viewUrlPath,
                                [
                                    $urlEntityParamName => $item['entity_id'],
                                ]
                            ),
                            'label' => __('Delete'),
                        ],
                    ];
                }
            }
        }
        return $dataSource;
    }
}

Create Controller file

Now let’s create the controller which will handle the delete action Controller/Adminhtml/Manage/Delete.php

Code for Controller/Adminhtml/Manage/Delete.php file

<?php
namespace Webkul\BlogManager\Controller\Adminhtml\Manage;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;

class Delete extends Action
{
    /**
     * @var \Webkul\BlogManager\Model\BlogFactory
     */
    protected $blogFactory;
    
    /**
     * Dependency Initilization
     *
     * @param Context $context
     * @param \Webkul\BlogManager\Model\BlogFactory $blogFactory
     */
    public function __construct(
        Context $context,
        \Webkul\BlogManager\Model\BlogFactory $blogFactory
    ) {
        $this->blogFactory = $blogFactory;
        parent::__construct($context);
    }

    /**
     * Provides content
     *
     * @return Magento\Framework\Controller\Result\Redirect
     */
    public function execute()
    {
        $resultRedirect = $this->resultRedirectFactory->create();
        $id = $this->getRequest()->getParam('id');
        try {
            $blogModel = $this->blogFactory->create();
            $blogModel->load($id);
            $blogModel->delete();
            $this->messageManager->addSuccessMessage(__('You deleted the blog.'));
        } catch (\Exception $e) {
            $this->messageManager->addErrorMessage($e->getMessage());
        }
        return $resultRedirect->setPath('*/*/');
    }

    /**
     * Check Autherization
     *
     * @return boolean
     */
    public function _isAllowed()
    {
        return $this->_authorization->isAllowed('Webkul_BlogManager::delete');
    }
}

I don’t think I have to explain anything in this code. Because we have already seen similar code in one blog or another. Here we have got the id from the param and loaded the blog model based on the id. Then we deleted that blog.

After deleting we have redirected back to the blog listing page. And we have also used the message manager to show the success message or error message in case some exception occurs.

Now when you view the grid, you should be able to see the delete column and perform the delete action using that.