Magento 2 Development 16: 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 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 action column which will allow us to delete single blog at a time. We will look into the edit blog feature in the next blog.

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

<?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.

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

<?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

{

public $urlBuilder;

public function __construct(

ContextInterface $context,

UiComponentFactory $uiComponentFactory,

UrlInterface $urlBuilder,

array $components = [],

array $data = []

) {

$this->urlBuilder = $urlBuilder;

parent::__construct($context, $uiComponentFactory, $components, $data);

}

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;

}

}

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 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.

Now let’s create the controller which will handle the delete action Ui/Component/Listing/Columns/DeleteAction.php

<?php

namespace Webkul\BlogManager\Controller\Adminhtml\Manage;

use Magento\Backend\App\Action;

use Magento\Backend\App\Action\Context;

class Delete extends Action

{

public $blogFactory;

public function __construct(

Context $context,

\Webkul\BlogManager\Model\BlogFactory $blogFactory

) {

$this->blogFactory = $blogFactory;

parent::__construct($context);

}

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('*/*/');

}

public function _isAllowed()

{

return $this->_authorization->isAllowed('Webkul_BlogManager::delete');

}

}

I don’t think I have to explain in this code. Because we have already seen all of these 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 have 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 delete action using that.