Previous All files from Doc:
- Admin Url and ACL
- Add Admin Menu
app/code/{Vendor}/{ModuleName}/Controller/Adminhtml/{ControllerFolderName}/{ActionFileName}.php(Updated)app/code/{Vendor}/{ModuleName}/view/adminhtml/layout/{Admin_Route_Id}_{ControllerName_LowerCase}_{ActionFileName_In_LowerCase}.xml(New)app/code/{Vendor}/{ModuleName}/view/adminhtml/ui_component/{Ui_ComponentName_Listing_name}.xmlDefined at layout fileapp/code/{Vendor}/{ModuleName}//etc/di.xml
Need to update file from https://github.com/devamitbera/magento2-module-stucture/blob/master/6.Admin-url-using-route-acl.md#actionfilenamephp
Code
<?php
namespace {Vendor}\{ModuleName}\Controller\Adminhtml\Example;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class {ActionFileName} extends \Magento\Backend\App\Action
{
/**
* @url adminUrl/frontName/ControllerFolder/ActionfileName
* @example adminUrl/exampleadmin/example/listing
*/
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
private $resultPageFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultPage= $this->resultPageFactory->create();
$resultPage->getConfig()->setKeywords(__({PageMeta KeyWord}));
/**
* Left menu Select
*/
$resultPage->setActiveMenu({menUI});
/**
* Set Page title
*/
$resultPage->getConfig()->getTitle()->set(_({PageTitle}));
$resultPage->addBreadcrumb(__({Breadcrumb1}), __({Breadcrumb1}));
$resultPage->addBreadcrumb(__({Breadcrumb2}), __({Breadcrumb2}));
return $resultPage;
}
}
User Defined
{PageMeta KeyWord}is the page mete keywork.{menUI}is Menu if which is defined at app/code/{Vendor}/{ModuleName}/etc/adminhtml/menu.xml.{{PageTitle}is the page title for this page.{Breadcrumb1},{Breadcrumb2}is the BreadCrumb text.
Example
<?php
namespace StackExchange\Example\Controller\Adminhtml\Example;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Listing extends \Magento\Backend\App\Action
{
/**
* @url adminUrl/frontName/ControllerFolder/ActionfileName
* @example adminUrl/exampleadmin/example/listing
*/
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
private $resultPageFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultPage= $this->resultPageFactory->create();
$resultPage->getConfig()->setKeywords(__('Example Test KeyWord'));
/**
* Left menu Select
*/
$resultPage->setActiveMenu('StackExchange_Example::menu');
/**
* Set Page title
*/
$resultPage->getConfig()->getTitle()->set(_('Hello Config Title'));
$resultPage->addBreadcrumb(__('Hello'), __('Hello'));
$resultPage->addBreadcrumb(__('Example'), __('Example'));
return $resultPage;
}
}
Need to create a layout file for this url (i.e Action )
Location: : app/code/{Vendor}/{ModuleName}/view/adminhtml/layout/
file format: Admin_Route_Id}_{ControllerName_LowerCase}_{ActionFileName_In_LowerCase}.xml
Code
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<!-- Define a Ui file-->
<uiComponent name="{Ui_ComponentName_Listing_name}"/>
</referenceContainer>
</body>
</page>
User Defined
{Ui_ComponentName_Listing_name} Ui component file Name which is used for Grid/listing
Example
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<!-- Define a Ui file-->
<uiComponent name="example_ui_listing"/>
</referenceContainer>
</body>
</page>
Here {Ui_ComponentName_Listing_name} = example_ui_listing.
Need to Ui componet listing file which showing grid listing for this module.
Location: : app/code/{Vendor}/{ModuleName}/view/adminhtml/ui_component
file name format: file name should same Ui compenent file name .As <uiComponent name="{Ui_ComponentName_Listing_name}"/> is compenent file {Ui_ComponentName_Listing_name}.xml
Code
<?xml version="1.0" encoding="UTF-8"?>
<!-- This file should be same as uiComponent name at layout file-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="context" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
<!--Important element -->
<argument name="namespace" xsi:type="string">{Ui_ComponentName_Listing_name}</argument>
<!-- this should be same as the file name or uicomponentname -->
</argument>
<!-- Define data provider Name and spinner name and some button -->
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">{Ui_ComponentName_Listing_name}.{Ui_ComponentName_Listing_name}_data_source</item>
<item name="deps" xsi:type="string">{Ui_ComponentName_Listing_name}{Ui_ComponentName_Listing_name}_data_source</item>
<!-- the format here is uicomponentfile name.datasourcename -->
</item>
<!-- spinner is uicomponentfile NAME -->
<item name="spinner" xsi:type="string">{Ui_ComponentName_Listing_name}_columns</item>
<!-- ADD new button -->
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<!-- Declare Data source details -->
<!-- dataSource name is uicomponentfileMName_datasourcename -->
<dataSource name="{Ui_ComponentName_Listing_name}_data_source">
<!-- this is data source name, this is used at many places -->
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
<!-- dataSource name is uicomponentfileMName.datasourcename -->
<argument name="name" xsi:type="string">{Ui_ComponentName_Listing_name}_data_source</argument>
<!-- Put your Database table Primary key -->
<argument name="primaryFieldName" xsi:type="string">{Database_Table_Primary_key_Name}</argument>
<!-- it can be user define -->
<argument name="requestFieldName" xsi:type="string">{RequestId_user_Defined_Name}</argument>
<!-- the field used in ajax url's of grid. just define this as id -->
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">{Database_Table_Primary_key_Name}</item>
</item>
</item>
</argument>
</argument>
</dataSource>
<!-- Same as spinner name-->
<columns name="{Ui_ComponentName_Listing_name}_columns">
<!-- this is columns section name, used above in spinner -->
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!-- Same as Data source config indexField -->
<item name="indexField" xsi:type="string">{Database_Table_Primary_key_Name}</item>
</item>
</argument>
</selectionsColumn>
<!-- Adding colmn to grid -->
<column name="{Database_Table_Primary_key_Name}">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">{Label_For_Coulmn1}</item>
</item>
</argument>
</column>
<column name="{Column_Field_Two}">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">{Label_For_Coulmn2}</item>
</item>
</argument>
</column>
<!--
Add action column to Ui grid, Add Edit and Delete links from Here
-->
<actionsColumn name="actions"
class="{PHP_CLASS_FOR_ADD_Action_COlumn}">
<settings>
<!-- IndexField is same as selectionsColumn indexField -->
<indexField>{Database_Table_Primary_key_Name}</indexField>
</settings>
</actionsColumn>
</columns>
</listing>
User Defined
-
{Database_Table_Primary_key_Name}This Primary key Field of that table which is defined at Resource Model Class https://github.com/devamitbera/magento2-module-stucture/blob/master/5.build-model.md#create-resource-model-class -
{PHP_CLASS_FOR_ADD_Action_COlumn}This is a php Class which will add Edit & delete Action to Grid/Listing -
<argument name="namespace" xsi:type="string"></argument>namespace will be same asUi_ComponentName_Listing_name file -
<dataSource name="">Data source name format should be{Ui_ComponentName_Listing_name}_data_source -
<item name="spinner"and<columns name="should be same .Format:{Ui_ComponentName_Listing_name}_columns -
{Column_Field_Two}will same database table field -
and
{Label_For_Coulmn2}will user Defined.
Example
<?xml version="1.0" encoding="UTF-8"?>
<!-- This file should be same as uiComponent name at layout file-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="context" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
<!--Important element -->
<argument name="namespace" xsi:type="string">example_ui_listing</argument>
<!-- this should be same as the file name or uicomponentname -->
</argument>
<!-- Define data provider Name and spinner name and some button -->
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">example_ui_listing.example_ui_listing_data_source</item>
<item name="deps" xsi:type="string">example_ui_listing.example_ui_listing_data_source</item>
<!-- the format here is uicomponentfile name.datasourcename -->
</item>
<!-- spinner is uicomponentfile NAME -->
<item name="spinner" xsi:type="string">example_ui_listing_columns</item>
<!-- ADD new button -->
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New Exampl</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<!-- Declare Data source details -->
<!-- dataSource name is uicomponentfileMName.datasourcename -->
<dataSource name="example_ui_listing_data_source">
<!-- this is data source name, this is used at many places -->
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
<!-- dataSource name is uicomponentfileMName.datasourcename -->
<argument name="name" xsi:type="string">example_ui_listing_data_source</argument>
<!-- Put your Database table Primary key -->
<argument name="primaryFieldName" xsi:type="string">id</argument>
<!-- it can be user define -->
<argument name="requestFieldName" xsi:type="string">example_id</argument>
<!-- the field used in ajax url's of grid. just define this as id -->
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">id</item>
</item>
</item>
</argument>
</argument>
</dataSource>
<!-- Same as spinner name-->
<columns name="example_ui_listing_columns">
<!-- this is columns section name, used above in spinner -->
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!-- Same as Data source config indexField -->
<item name="indexField" xsi:type="string">id</item>
</item>
</argument>
</selectionsColumn>
<!-- Adding colmn to grid -->
<column name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">Name</item>
</item>
</argument>
</column>
<!--
Add action column to Ui grid, Add Edit and Delete links from Here
-->
<actionsColumn name="actions"
class="StackExchange\Example\Ui\Listing\Columns\ExampleActions">
<settings>
<!-- IndexField is same as selectionsColumn indexField -->
<indexField>id</indexField>
</settings>
</actionsColumn>
</columns>
</listing>
File Location app/code/{Vendor}/{ModuleName}/etc/di.xml
Code Format
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<!-- Defined Collection Class for Grid of Ui component listing -->
<!-- name is virtual Type -->
<virtualType name="{Vendor}\{ModuleName}\Model\ResourceModel\{YourResourceModelName}\Grid\Collection"
type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">example</argument>
<argument name="resourceModel" xsi:type="string">{{Vendor}\{ModuleName}\Model\ResourceModel\{YourResourceModelName}</argument>
</arguments>
</virtualType>
<!-- Add Virtual Grid Class to Ui compoment -->.
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<!--name format is UiComponent file name__data_source -->
<item name="{Ui_ComponentName_Listing_name}_data_source}" xsi:type="string">{Vendor}\{ModuleName}\Model\ResourceModel\{YourResourceModelName}\Grid\Collection</item>
</argument>
</arguments>
</type>
</config>
User Defined
-
virtualTypecreate virtual collecion Class. name format{Vendor}\{ModuleName}\Model\ResourceModel\{YourResourceModelName}\Grid\Collection. -
{Ui_ComponentName_Listing_name}_data_source}see at datasource name from https://github.com/devamitbera/magento2-module-stucture/blob/master/8.admin-grid-using-ui.md#ui_componentname_listing_name-file
Example
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<!-- Defined Collection Class for Grid of Ui component listing -->
<!-- name is virtual Type -->
<virtualType name="StackExchange\Example\Model\ResourceModel\Student\Grid\Collection"
type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">example</argument>
<argument name="resourceModel" xsi:type="string">StackExchange\Example\Model\ResourceModel\Student</argument>
</arguments>
</virtualType>
<!-- Add Virtual Grid Class to Ui compoment -->.
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<!--name format is UiComponent file name__data_source -->
<item name="example_ui_listing_data_source" xsi:type="string">StackExchange\Example\Model\ResourceModel\Student\Grid\Collection</item>
</argument>
</arguments>
</type>
</config>
*Create a php class and add Edit & delete using this Class
File and Location: app/code/{Vendor}/{ModuleName}/Ui/Listing/Columns/{UserDefinedClassForACtion}.php
Code
<?php
namespace {Vendor}\{ModuleName}\Controller\Ui\Listing\Columns;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\UrlInterface;
class {UserDefinedClassForACtion} extends \Magento\Ui\Component\Listing\Columns\Column
{
/**
* Add edit page Url path
* Format AdminRouteId/ControllerFolderInSmall/ActionfileInSmall
*/
const EDIT_PAGE_URL_PATH ="{Admin_RouteId}/{ControllerFolderNameInSMall}}/{EditActionFileName}";
/**
* Add Delete page Url path
* Format AdminRouteId/ControllerFolderInSmall/ActionfileInSmallCase
*/
const DELETE_PAGE_URL_PATH ="{Admin_RouteId}/{ControllerFolderNameInSMall}}/{DeleteActionFileName}";
/**
* @var \Magento\Framework\UrlInterface
*/
private $urlBuilder;
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = array(),
array $data = array())
{
parent::__construct($context, $uiComponentFactory, $components, $data);
$this->urlBuilder = $urlBuilder;
}
/**
* Add Url Actions to Json data of Ui grid listing Data Source
*/
public function prepareDataSource(array $dataSource)
{
if(isset($dataSource['data']['items'])){
foreach ($dataSource['data']['items'] as & $item){
if($item[{Database_Table_Primary_key_Name}]){
$item[$this->getData('name')] =[
'edit' =>[
'label' => __('Edit Action'),
'href' => $this->urlBuilder->getUrl(
self::EDIT_PAGE_URL_PATH,
['{{Paramster_For_URL}}' => $item[{Database_Table_Primary_key_Name}]] // this Parameter will show at url
)
],
'delete' => [
'label' => __('Delete Action'),
'href' => $this->urlBuilder->getUrl(
self::DELETE_PAGE_URL_PATH,
['{Paramster_For_URL}' => $item[{Database_Table_Primary_key_Name}]]
),
'post' => true , // Hitting Delete Url as POST request
// Adding Confirm Pop during Delete
'confirm' =>[
'title' => __('Delete record of %1',$item[{A_Database_Table_Column}]),
'message' => __('Are you sure you want to delete a record of %1 ?', $item[{A_Database_Table_Column}]),
]
]
];
}
}
}
return $dataSource;
}
}
Example
<?php
namespace StackExchange\Example\Ui\Listing\Columns;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\UrlInterface;
class ExampleActions extends \Magento\Ui\Component\Listing\Columns\Column
{
/**
* Add edit page Url path
* Format AdminRouteId/ControllerFolderInSmall/ActionfileInSmall
*/
const EDIT_PAGE_URL_PATH ="exampleadminid/example/edit";
/**
* Add Delete page Url path
* Format AdminRouteId/ControllerFolderInSmall/ActionfileInSmallCase
*/
const DELETE_PAGE_URL_PATH ="exampleadminid/example/delete";
/**
* @var \Magento\Framework\UrlInterface
*/
private $urlBuilder;
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = array(),
array $data = array())
{
parent::__construct($context, $uiComponentFactory, $components, $data);
$this->urlBuilder = $urlBuilder;
}
/**
* Add Url Actions to Json data of Ui grid listing Data Source
*/
public function prepareDataSource(array $dataSource)
{
if(isset($dataSource['data']['items'])){
foreach ($dataSource['data']['items'] as & $item){
if($item['id']){
$item[$this->getData('name')] =[
'edit' =>[
'label' => __('Edit Action'),
'href' => $this->urlBuilder->getUrl(
self::EDIT_PAGE_URL_PATH,
['example_id' => $item['id']] // this Parameter will show at url
)
],
'delete' => [
'label' => __('Delete Action'),
'href' => $this->urlBuilder->getUrl(
self::DELETE_PAGE_URL_PATH,
['example_id' => $item['id']]
),
'post' => true , // Hitting Delete Url as POST request
// Adding Confirm Pop during Delete
'confirm' =>[
'title' => __('Delete record of %1',$item['name']),
'message' => __('Are you sure you want to delete a record of %1 ?', $item['name']),
]
]
];
}
}
}
return $dataSource;
}
}