Contents
Show
Step: 1 Create db_schema.xml for creating a table
Here you can follow our previous blog to create db schema file
Step: 2 Create admin routes
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route id="webiators_uigrid" frontName="webiators_uigrid"> <module name="Webiators_Uigrid"/> </route> </router> </config> |
Step: 3 Create admin Menu
You can follow this link to create an admin menu
Step 4: Create Controller
Create controller file called index.php
Path- app/code/Webiators/Uigrid/Controller/Adminhtml/Uigrid/Index.php
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php namespace Webiators\Uigrid\Controller\Adminhtml\Uigrid; class Index extends \Magento\Backend\App\Action { protected $resultPageFactory = false; public function __construct( \Magento\Backend\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory ) { parent::__construct($context); $this->resultPageFactory = $resultPageFactory; } public function execute() { // echo "string"; // die(); $resultPage = $this->resultPageFactory->create(); $resultPage->getConfig()->getTitle()->prepend((__('Ui Grid'))); return $resultPage; } } |
Step 5: Create di.xml file
File: app/code/Webiators/Uigrid/etc/di.xml
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="webiators_uigrid_listing_data_source" xsi:type="string">Webiators\Uigrid\Model\ResourceModel\Uigrid\Collection</item> </argument> </arguments> </type> <virtualType name="Webiators\Uigrid\Model\ResourceModel\Uigrid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> <arguments> <argument name="mainTable" xsi:type="string">webiators_uigrid_uigrid</argument> <argument name="resourceModel" xsi:type="string">Webiators\Uigrid\Model\ResourceModel\Uigrid</argument> </arguments> </virtualType> </config> |
Step 6: Create Layout file Webiators_uigrid_uigrid_index.xml
Path- app/code/Webiators/Uigrid/view/adminhtml/layout
|
1 2 3 4 5 6 7 8 9 |
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <update handle="styles"/> <body> <referenceContainer name="content"> <uiComponent name="webiators_uigrid_uigrid_listing"/> </referenceContainer> </body> </page> |
Step 7: Create component layout file webiators_uigrid_uigrid_listing.xml
Path app/code/Mageplaza/HelloWorld/view/adminhtml/ui_component/webiators_uigrid_uigrid_listing.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<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">webiators_uigrid_uigrid_listing.webiators_uigrid_uigrid_listing_data_source</item> <item name="deps" xsi:type="string">webiators_uigrid_uigrid_listing.webiators_uigrid_uigrid_listing_data_source</item> </item> <item name="spinner" xsi:type="string">spinner_columns</item> </argument> <!-- ... other block of code --> <listingToolbar name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sticky" xsi:type="boolean">true</item> </item> </argument> <bookmark name="bookmarks"/> <filterSearch name="fulltext"/> <filters name="listing_filters" /> <columnsControls name="columns_controls"/> <paging name="listing_paging"/> </listingToolbar> <!-- ... other block of code --> <dataSource name="nameOfDataSource"> <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">webiators_uigrid_uigrid_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">uigrid_id</argument> <argument name="requestFieldName" xsi:type="string">id</argument> <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">uigrid_id</item> </item> </item> </argument> </argument> </dataSource> <columns name="spinner_columns"> <column name="uigrid_id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">textRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="label" xsi:type="string" translate="true">Uigrid ID</item> </item> </argument> </column> <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">dateRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item> <item name="dataType" xsi:type="string">date</item> <item name="label" xsi:type="string" translate="true">Created</item> </item> </argument> </column> <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">dateRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item> <item name="dataType" xsi:type="string">date</item> <item name="label" xsi:type="string" translate="true">Updated</item> </item> </argument> </column> <column name="customer_firstname"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Customer Firstname</item> </item> </argument> </column> <column name="customer_lastname"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Customer Lastname</item> </item> </argument> </column> <column name="telephone"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Customer Phone</item> </item> </argument> </column> <column name="customer_email"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Customer Email</item> </item> </argument> </column> <column name="status"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="array"> <item name="0" xsi:type="array"> <item name="label" xsi:type="string">Active</item> <item name="value" xsi:type="string">1</item> </item> <item name="1" xsi:type="array"> <item name="label" xsi:type="string">Inactive</item> <item name="value" xsi:type="string">0</item> </item> </item> <item name="config" xsi:type="array"> <item name="editor" xsi:type="string">select</item> <item name="filter" xsi:type="string">select</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item> <item name="dataType" xsi:type="string">select</item> <item name="label" xsi:type="string" translate="true">Status</item> </item> </argument> </column> </columns> </listing> |
Step 8: Run Command
|
1 2 3 4 5 6 7 |
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f en_US php bin/magento cache:flush php bin/magento cache:clean php bin/magento indexer:reindex |
Thank You!
Hit 5 Stars if you find this post helpful
0 (based on 0 Reviews)
