Magento2 : Admin Module Part 3

This section contains the edit UI components and layout xml files

Stesps :

Form ui components

create a file kpsaddress_index_lising.xml for grid under ui_component

<?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">kpsaddressindex_listing.kpsaddress_index_listing_data_source</item>
            <item name="deps" xsi:type="string">kpsaddress_index_listing.kpsaddress_index_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">kpsaddress_index_columns</item>
        <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>
    <dataSource name="kpsaddress_index_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">KpsAddressGridDataProvider</argument>
            <argument name="name" xsi:type="string">kpsaddress_index_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">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">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>

    <container name="listing_top">

        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>

        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/>
                        <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/>
                        <item name="namespace" xsi:type="string">kpsaddress_index_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>

        <container name="columns_controls">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsData" xsi:type="array">
                        <item name="provider" xsi:type="string">kpsaddress_index_listing.kpsaddress_index_listing.kpsaddress_index_columns
                        </item>
                    </item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                </item>
            </argument>
        </container>

        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="dataScope" xsi:type="string">filters</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">
                            kpsaddress_index_listing.kpsaddress_index_listing.listing_top.bookmarks
                        </item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">
                            kpsaddress_index_listing.kpsaddress_index_listing.listing_top.listing_filters
                        </item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">
                                kpsaddress_index_listing.kpsaddress_index_listing.listing_top.bookmarks:current.columns.${ $.index }.visible
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
            <filterInput name="title">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">title</item>
                        <item name="label" xsi:type="string" translate="true">Title</item>
                    </item>
                </argument>
            </filterInput>
            <filterInput name="store_ids">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">store_ids</item>
                        <item name="label" xsi:type="string" translate="true">Stores</item>
                    </item>
                </argument>
            </filterInput>
        </filters>

        <paging name="listing_paging">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">
                            kpsaddress_index_listing.kpsaddress_index_listing.listing_top.bookmarks
                        </item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">
                        kpsaddress_index_listing.kpsaddress_index_listing.kpsaddress_index_columns.ids
                    </item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                    <item name="options" xsi:type="array">
                        <item name="20" xsi:type="array">
                            <item name="value" xsi:type="number">20</item>
                            <item name="label" xsi:type="string" translate="true">20</item>
                        </item>
                        <item name="30" xsi:type="array">
                            <item name="value" xsi:type="number">30</item>
                            <item name="label" xsi:type="string" translate="true">30</item>
                        </item>
                        <item name="50" xsi:type="array">
                            <item name="value" xsi:type="number">50</item>
                            <item name="label" xsi:type="string" translate="true">50</item>
                        </item>
                        <item name="100" xsi:type="array">
                            <item name="value" xsi:type="number">100</item>
                            <item name="label" xsi:type="string" translate="true">100</item>
                        </item>
                        <item name="200" xsi:type="array">
                            <item name="value" xsi:type="number">200</item>
                            <item name="label" xsi:type="string" translate="true">200</item>
                        </item>
                    </item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="kpsaddress_index_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">kpsaddress_index_listing.kpsaddress_index_listing.listing_top.bookmarks
                    </item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">
                            kpsaddress_index_listing.kpsaddress_index_listing.kpsaddress_index_columns.actions
                        </item>
                        <item name="target" xsi:type="string">applyAction</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">edit</item>
                            <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                        </item>
                    </item>
                    <item name="controlVisibility" xsi:type="boolean">true</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">
                            kpsaddress_index_listing.kpsaddress_index_listing.listing_top.bookmarks
                        </item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>

        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">55</item>
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="label" xsi:type="string" translate="true">Selection</item>
                </item>
            </argument>
        </selectionsColumn>

        <column name="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">ID</item>
                </item>
            </argument>
        </column>

        <column name="province">
            <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">Province</item>
                </item>
            </argument>
        </column>

        <column name="province_code">
            <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">Province Code</item>
                </item>
            </argument>
        </column>

        <column name="city">
            <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">City</item>
                </item>
            </argument>
        </column>

        <column name="city_code">
            <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">City Code</item>
                </item>
            </argument>
        </column>

        <column name="urban">
            <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">Urban</item>
                </item>
            </argument>
        </column>

        <column name="urban_code">
            <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">Urban Code</item>
                </item>
            </argument>
        </column>

        <column name="sub_district">
            <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">Sub District</item>
                </item>
            </argument>
        </column>

        <column name="sub_district_code">
            <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">Sub District Code</item>
                </item>
            </argument>
        </column>

        <column name="zipcode">
            <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">Zipcode</item>
                </item>
            </argument>
        </column>

        <actionsColumn name="actions" class="Vasan\KpmsAddress\Ui\Component\Listing\Column\AddressActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">107</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

create a file kpsaddress_edit_form.xml file for form under ui_component

<?xml version="1.0" encoding="UTF-8"?>
<form 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">kpsaddress_edit_form.kpsaddress_edit_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">KPS Address</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button name="delete" class="Vasan\KpsAddress\Block\Adminhtml\Edit\DeleteButton"/>
            <button name="reset" class="Vasan\KpsAddress\Block\Adminhtml\Edit\ResetButton"/>
            <button name="save" class="Vasan\KpsAddress\Block\Adminhtml\Edit\SaveButton"/>
            <button name="save_and_continue" class="Vasan\KpsAddress\Block\Adminhtml\Edit\SaveAndContinueButton"/>
            <button name="back">
                <url path="*/*/" />
                <class>back</class>
                <label translate="true">Back</label>
            </button>
        </buttons>
        <namespace>kpsaddress_edit_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>kpsaddress_edit_form.kpsaddress_edit_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="kpsaddress_edit_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <settings>
            <submitUrl path="kpsaddress/index/save" />
        </settings>
        <dataProvider class="Vasan\KpsAddress\Model\Address\DataProvider" name="kpsaddress_edit_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="author_data" sortOrder="10">
        <settings>
            <collapsible>true</collapsible>
            <opened>true</opened>
            <label translate="true">KPS Address</label>
        </settings>
        <field name="id" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <visible>false</visible>
                <dataScope>id</dataScope>
            </settings>
        </field>

        <field name="province" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Province</label>
                <visible>true</visible>
                <dataScope>province</dataScope>
            </settings>
        </field>

        <field name="province_code" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Province Code</label>
                <visible>true</visible>
                <dataScope>province_code</dataScope>
            </settings>
        </field>

        <field name="city" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">City</label>
                <visible>true</visible>
                <dataScope>city</dataScope>
            </settings>
        </field>

        <field name="city_code" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">City Code</label>
                <visible>true</visible>
                <dataScope>city_code</dataScope>
            </settings>
        </field>

        <field name="urban" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Urban</label>
                <visible>true</visible>
                <dataScope>urban</dataScope>
            </settings>
        </field>

        <field name="urban_code" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Urban Code</label>
                <visible>true</visible>
                <dataScope>urban_code</dataScope>
            </settings>
        </field>

        <field name="sub_district" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Sub District</label>
                <visible>true</visible>
                <dataScope>sub_district</dataScope>
            </settings>
        </field>

        <field name="sub_district_code" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Sub District Code</label>
                <visible>true</visible>
                <dataScope>sub_district_code</dataScope>
            </settings>
        </field>

        <field name="zipcode" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">kps_address</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Zipcode</label>
                <visible>true</visible>
                <dataScope>zipcode</dataScope>
            </settings>
        </field>

    </fieldset>

</form>

layout xml files

create a layout xml file kpsaddress_index_index.xml for grid

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="kpsaddress_index_listing"/>
        </referenceContainer>
    </body>
</page>

create a layourt xml file kpsaddress_index_edit.xml for form

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="kpsaddress_edit_form"/>
        </referenceContainer>
    </body>
</page>

vasan

Say thanks

Last edit

Over 2 years ago

vasan

Magento 2 : Admin Module Part 1

1. Create required folders and files for a module

Vasan
--KpsAddress
  --Api
    --Data
      --AddressInterface.php
      --AddressSearchResultsInterface.php
    --AddressRepositoryIn...

Magento 2 : Admin Module Part 2

5.Create Model and Resource model

Address model class extends the AddressInterface and it contains the data object getters setter methods.

<?php
/**
 * Address
 *
 * @copyright Copyright © 2021 Va...

Magento 2 : Data cleaning and import

Following example shows how to clean customer and order records and import customer data from another database

## Following query to identify the name of the attribute and attribute id
select * from  live.eav_attribute where entity_type_i...

Magento 2 : Admin Grid

How to add di.xml configuration for simplet grid.

<!-- City listing definitions -->

    <virtualType name="Kemana\Directory\Model\ResourceModel\City\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult...

Magento 2 Notes

1) Non Auto Increment Primary key

The $_isPkAutoIncrement should be assigned as false in resource model, when a primary key of a table is used as non auto increment.

protected $_isPkAutoIncrement = false;

2) Custom Cron Job

F...

Magento 2 : Customer attribute creation

CustomerSetupFactory and Attribute SetFactory classes should be used to create the customer attribute using setup script

<?php


namespace ExamNotes\Chapter10\Setup;

use Magento\Customer\Setup\CustomerSetupFactory;
use Magento\Eav\Setup\Eav...

Magento 2: Searchable drop-down

Searchable drop-down component with Jquery Plugin

Following example shows the steps to use Select2 Jquery Plugin in Magento 2 admin form.

Stesps :

1. Download the required files from Repository

https://github.com/select2/sele...

Posted by vasan to vasan's deck (2021-12-18 08:01)

Magento2 : Admin Module Part 3

Related cards:

1. Create required folders and files for a module

5.Create Model and Resource model