Magento 2 create custom ui component admin form
Today we talk about How in Magento 2 create custom ui component admin form. For creating the admin from you must familiar with ui component of magento2. The form consist of these major node that must be used for creating the form.
Data Argument
The argument data basically have three item js_config,label,config,template and buttons. Js_config contain js configuration of grid data. In buttons you can add button that are need to added into form like save button, delete button , save and continue button, reset button or any custom button as your requirement.
js_config
helloworld_listing this will be you ui component file name. helloworld_listing_data_source will be name of your dataSource.
<item name="provider" xsi:type="string">helloworld_edit.helloworld_data_source</item>
<item name="deps" xsi:type="string">helloworld_edit.helloworld_data_source</item>
</item>
buttons
You can add button in your form in buttons item. like save button, delete button , save and continue button, reset button or any custom button as your requirement.
<item name="back" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\BackButton</item>
</item>
template
You can set template type in this node.
label
config
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">helloworld_edit</item>
</item>
dataSource
Second component of ui component form is dataSource. That have unique name that are use in ui component from. Name of my example helloworld_data_source.
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">QaisarSatti\HelloWorld\Model\HelloWorld\DataProvider</argument>
<argument name="name" xsi:type="string">helloworld_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">post_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="helloworld/index/save"/>
</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/form/provider</item>
</item>
</argument>
</dataSource>
fieldset
You can add multiple fieldset in form. Fieldset have unique name like general. Fieldset consist of following elements.
Data argument
In data argument you can add the label for fieldset and sort order.
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">General Information</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
Field
This is element you add field as your requirement like select, input and etc. Here is simple example of field.
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Title:</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">helloworld</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
Complete example for ui component is below.
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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">helloworld_edit.helloworld_data_source</item>
<item name="deps" xsi:type="string">helloworld_edit.helloworld_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Manage Post</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">helloworld_edit</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
<item name="buttons" xsi:type="array">
<item name="back" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\BackButton</item>
<item name="delete" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\DeleteButton</item>
<item name="reset" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\ResetButton</item>
<item name="save" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\SaveButton</item>
<item name="save_and_continue" xsi:type="string">QaisarSatti\HelloWorld\Block\Adminhtml\HelloWorld\Edit\SaveAndContinueButton</item>
</item>
</argument>
<dataSource name="helloworld_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">QaisarSatti\HelloWorld\Model\HelloWorld\DataProvider</argument>
<argument name="name" xsi:type="string">helloworld_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">post_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="helloworld/index/save"/>
</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/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="general">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string"/>
</item>
</argument>
<field name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">helloworld</item>
</item>
</argument>
</field>
<field name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Title:</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">helloworld</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="content">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Content:</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">textarea</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">helloworld</item>
</item>
</argument>
</field>
</fieldset>
</form>
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
