We will see both ways but in this blog, I will show, how to create the form with the ui-component. And in the next blog, we will create the form with a block class.<\/p>\n\n\n\n
First of all, we need to add the edit link to the grid. We have seen in the previous blog itself how to add the link column or the action column in the admin grid. Let’s quickly create the column by following the previous blog’s<\/a> steps.<\/p>\n\n\n\n We will have to edit the view\/adminhtml\/ui_component\/blogmanager_blog_listing.xml<\/em> file to add the column,<\/p>\n\n\n\n Updated code for view\/adminhtml\/ui_component\/blogmanager_blog_listing.xml<\/em> file<\/p>\n\n\n\n Now we need to create a class for the column, Ui\/Component\/Listing\/Columns\/EditAction.php<\/em><\/p>\n\n\n\n Now you will be able to see the edit column in the admin grid like below,<\/p>\n\n\n\n And now we have to create the controller as well, Controller\/Adminhtml\/Manage\/Edit.php<\/em><\/p>\n\n\n\n Code for Controller\/Adminhtml\/Manage\/Edit.php<\/em> file<\/p>\n\n\n\n If you remember, how we created the admin grid with ui-component, then it should come automatically to you that we need to create a layout file and then we will have to create the ui-component file.<\/p>\n\n\n\n The layout file will be view\/adminhtml\/layout\/blogmanager_manage_edit.xml<\/em> based on the URL,<\/p>\n\n\n\n Code for view\/adminhtml\/layout\/blogmanager_manage_edit.xml<\/em> file<\/p>\n\n\n\n Now we will create the most important file of this blog which is the ui-component file for the form, view\/adminhtml\/ui_component\/blogmanager_blog_editing.xml<\/em><\/p>\n\n\n\n Code for view\/adminhtml\/ui_component\/blogmanager_blog_editing.xml<\/em> file<\/p>\n\n\n\n You can notice the dataProvider<\/strong> tag inside the dataSource tag it has a class associated with it which will be responsible for providing the data for the form based on the blog id.<\/p>\n\n\n\n It will get the blog id from the URL based on the value in requestFieldName<\/strong> and primaryFieldName<\/strong> will be used to load the model.<\/p>\n\n\n\n We can add multiple group of fields with multiple fieldset<\/strong> tag. One use case you can see on the product add\/edit page.<\/p>\n\n\n\n We add different fields with field tag and we can configure them as we want in the tag itself. Also please notice for the status field, how we have provided the options with the option class that we created earlier.<\/p>\n\n\n\n It won’t be possible or practical to explain each and every part of this XML file. And as I said earlier, most of the time you will end up copy-pasting these codes. If you want an in-depth explanation then you can always refer to the magento’s devdoc. <\/p>\n\n\n\n As of now, I found many things missing from the devdoc itself. In such cases, it is always good to refer to the Magento’s code which you can find under the \/vendor\/magento<\/em> folder of the root directory.<\/p>\n\n\n\n We have created the uiComponent file but we still have one more file to create. And that file is Model\/Blog\/DataProvider.php<\/em> which is responsible for providing the data for the form.<\/p>\n\n\n\n Code for Model\/Blog\/DataProvider.php<\/em> file<\/p>\n\n\n\n The getData<\/strong> method will provide the data that is the model for the blog. The collection will be filtered based on the requestFieldName<\/strong> and primaryFieldName<\/strong> that we have passed in the parent’s constructor.<\/p>\n\n\n\n Now when you click on the edit link, you should see the edit form as shown below.<\/p>\n\n\n\n Previous Blog -> Magento 2 Development 19: Action Column<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<?xml version="1.0" encoding="UTF-8"?>\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n <argument name="data" xsi:type="array">\n <item name="js_config" xsi:type="array">\n <item name="provider" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing_data_source<\/item>\n <item name="deps" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing_data_source<\/item>\n <\/item>\n <item name="spinner" xsi:type="string">blogmanager_blog_columns<\/item>\n <\/argument>\n <dataSource name="blogmanager_blog_listing_data_source">\n <argument name="dataProvider" xsi:type="configurableObject">\n <argument name="class" xsi:type="string">Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider<\/argument>\n <argument name="name" xsi:type="string">blogmanager_blog_listing_data_source<\/argument>\n <argument name="primaryFieldName" xsi:type="string">entity_id<\/argument>\n <argument name="requestFieldName" xsi:type="string">entity_id<\/argument>\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="update_url" xsi:type="url" path="mui\/index\/render"\/>\n <item name="storageConfig" xsi:type="array">\n <item name="indexField" xsi:type="string">entity_id<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/argument>\n <argument name="data" xsi:type="array">\n <item name="js_config" xsi:type="array">\n <item name="component" xsi:type="string">Magento_Ui\/js\/grid\/provider<\/item>\n <\/item>\n <\/argument>\n <\/dataSource>\n <listingToolbar name="listing_top">\n <massaction name="listing_massaction" component="Magento_Ui\/js\/grid\/tree-massactions">\n <argument name="data" xsi:type="array">\n <item name="data" xsi:type="array">\n <item name="selectProvider" xsi:type="string">blogmanager_blog_listing.blogmanager_blog_listing.blogmanager_blog_columns.ids<\/item>\n <item name="displayArea" xsi:type="string">bottom<\/item>\n <item name="indexField" xsi:type="string">entity_id<\/item>\n <\/item>\n <\/argument>\n <action name="delete">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="type" xsi:type="string">delete<\/item>\n <item name="label" xsi:type="string" translate="true">Delete<\/item>\n <item name="url" xsi:type="url" path="blog\/manage\/massDelete"\/>\n <item name="confirm" xsi:type="array">\n <item name="title" xsi:type="string" translate="true">Delete Blogs?<\/item>\n <item name="message" xsi:type="string" translate="true">Are you sure you want to delete the selected blogs?<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/action>\n <action name="status">\n <settings>\n <type>status<\/type>\n <label translate="true">Change status<\/label>\n <actions>\n <action name="0">\n <type>enable<\/type>\n <label translate="true">Enable<\/label>\n <url path="blog\/manage\/massStatus">\n <param name="status">1<\/param>\n <\/url>\n <\/action>\n <action name="1">\n <type>disable<\/type>\n <label translate="true">Disable<\/label>\n <url path="blog\/manage\/massStatus">\n <param name="status">0<\/param>\n <\/url>\n <\/action>\n <\/actions>\n <\/settings>\n <\/action>\n <\/massaction>\n <bookmark name="bookmarks"\/>\n <columnsControls name="columns_controls"\/>\n <filters name="listing_filters">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="templates" xsi:type="array">\n <item name="filters" xsi:type="array">\n <item name="select" xsi:type="array">\n <item name="component" xsi:type="string">Magento_Ui\/js\/form\/element\/ui-select<\/item>\n <item name="template" xsi:type="string">ui\/grid\/filters\/elements\/ui-select<\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/filters>\n <paging name="listing_paging"\/>\n <\/listingToolbar>\n <columns name="blogmanager_blog_columns">\n <selectionsColumn name="ids">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="indexField" xsi:type="string">entity_id<\/item>\n <\/item>\n <\/argument>\n <\/selectionsColumn>\n <column name="entity_id">\n <settings>\n <filter>textRange<\/filter>\n <label translate="true">ID<\/label>\n <resizeDefaultWidth>25<\/resizeDefaultWidth>\n <\/settings>\n <\/column>\n <column name="user_name">\n <settings>\n <filter>text<\/filter>\n <label translate="true">User<\/label>\n <\/settings>\n <\/column>\n <column name="title">\n <settings>\n <filter>text<\/filter>\n <label translate="true">Title<\/label>\n <\/settings>\n <\/column>\n <column name="content" class="Webkul\\BlogManager\\Ui\\Component\\Listing\\Columns\\Content">\n <settings>\n <filter>false<\/filter>\n <sortable>false<\/sortable>\n <label translate="true">Content<\/label>\n <\/settings>\n <\/column>\n <column name="status" component="Magento_Ui\/js\/grid\/columns\/select">\n <settings>\n <options class="Webkul\\BlogManager\\Model\\Blog\\Status"\/>\n <dataType>select<\/dataType>\n <filter>select<\/filter>\n <sortable>false<\/sortable>\n <label translate="true">Status<\/label>\n <\/settings>\n <\/column>\n <column name="updated_at" component="Magento_Ui\/js\/grid\/columns\/date">\n <settings>\n <filter>dateRange<\/filter>\n <dataType>date<\/dataType>\n <label translate="true">Updated<\/label>\n <\/settings>\n <\/column>\n <column name="created_at" component="Magento_Ui\/js\/grid\/columns\/date">\n <settings>\n <filter>dateRange<\/filter>\n <dataType>date<\/dataType>\n <label translate="true">Created<\/label>\n <\/settings>\n <\/column>\n <actionsColumn name="edit_action" class="Webkul\\BlogManager\\Ui\\Component\\Listing\\Columns\\EditAction">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="indexField" xsi:type="string">entity_id<\/item>\n <item name="viewUrlPath" xsi:type="string">blogmanager\/manage\/edit<\/item>\n <item name="urlEntityParamName" xsi:type="string">id<\/item>\n <item name="sortOrder" xsi:type="number">40<\/item>\n <\/item>\n <\/argument>\n <settings>\n <label translate="true">Edit<\/label>\n <\/settings>\n <\/actionsColumn>\n <actionsColumn name="delete_action" class="Webkul\\BlogManager\\Ui\\Component\\Listing\\Columns\\DeleteAction">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="indexField" xsi:type="string">entity_id<\/item>\n <item name="viewUrlPath" xsi:type="string">blogmanager\/manage\/delete<\/item>\n <item name="urlEntityParamName" xsi:type="string">id<\/item>\n <item name="sortOrder" xsi:type="number">50<\/item>\n <\/item>\n <\/argument>\n <settings>\n <label translate="true">Delete<\/label>\n <\/settings>\n <\/actionsColumn>\n <\/columns>\n<\/listing><\/pre>\n\n\n\n
<?php\nnamespace Webkul\\BlogManager\\Ui\\Component\\Listing\\Columns;\n\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\n\nclass EditAction extends \\Magento\\Ui\\Component\\Listing\\Columns\\Column\n{\n \/**\n * @var Magento\\Framework\\UrlInterface\n *\/\n protected $urlBuilder;\n\n \/**\n * Dependency Initilization\n *\n * @param ContextInterface $context\n * @param UiComponentFactory $uiComponentFactory\n * @param UrlInterface $urlBuilder\n * @param array $components\n * @param array $data\n *\/\n public function __construct(\n ContextInterface $context,\n UiComponentFactory $uiComponentFactory,\n UrlInterface $urlBuilder,\n array $components = [],\n array $data = []\n ) {\n $this->urlBuilder = $urlBuilder;\n parent::__construct($context, $uiComponentFactory, $components, $data);\n }\n\n \/**\n * Prepare Data Source\n *\n * @param array $dataSource\n * @return array\n *\/\n public function prepareDataSource(array $dataSource)\n {\n if (isset($dataSource['data']['items'])) {\n foreach ($dataSource['data']['items'] as &$item) {\n if (isset($item['entity_id'])) {\n $viewUrlPath = $this->getData('config\/viewUrlPath');\n $urlEntityParamName = $this->getData('config\/urlEntityParamName');\n $item[$this->getData('name')] = [\n 'view' => [\n 'href' => $this->urlBuilder->getUrl(\n $viewUrlPath,\n [\n $urlEntityParamName => $item['entity_id'],\n ]\n ),\n 'label' => __('Edit'),\n ],\n ];\n }\n }\n }\n return $dataSource;\n }\n}<\/pre>\n\n\n\n![\"Image](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-16_17-53-1200x431.png\")
<\/figure>\n\n\n\n<?php\nnamespace Webkul\\BlogManager\\Controller\\Adminhtml\\Manage;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Framework\\Controller\\ResultFactory;\n\nclass Edit extends Action\n{\n \/**\n * Provides content\n *\n * @return \\Magento\\Framework\\View\\Result\\Page\n *\/\n public function execute()\n {\n $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);\n $resultPage->getConfig()->getTitle()->prepend(__("Edit Blog"));\n return $resultPage;\n }\n\n \/**\n * Check Autherization\n *\n * @return boolean\n *\/\n public function _isAllowed()\n {\n return $this->_authorization->isAllowed('Webkul_BlogManager::edit');\n }\n}<\/pre>\n\n\n\n<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <body>\n <referenceContainer name="content">\n <uiComponent name="blogmanager_blog_editing"\/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
The Form Component<\/h3>\n\n\n\n
<?xml version="1.0" encoding="UTF-8"?>\n<form xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n <argument name="data" xsi:type="array">\n <item name="js_config" xsi:type="array">\n <item name="provider" xsi:type="string">blogmanager_blog_editing.blogmanager_blog_editing_data_source<\/item>\n <item name="deps" xsi:type="string">blogmanager_blog_editing.blogmanager_blog_editing_data_source<\/item>\n <\/item>\n <item name="label" xsi:type="string" translate="true">Blog Data<\/item>\n <item name="config" xsi:type="array">\n <item name="dataScope" xsi:type="string">data<\/item>\n <item name="namespace" xsi:type="string">blogmanager_blog_editing<\/item>\n <\/item>\n <item name="template" xsi:type="string">templates\/form\/collapsible<\/item>\n <\/argument>\n <dataSource name="blogmanager_blog_editing_data_source">\n <argument name="data" xsi:type="array">\n <item name="js_config" xsi:type="array">\n <item name="component" xsi:type="string">Magento_Ui\/js\/form\/provider<\/item>\n <\/item>\n <\/argument>\n <dataProvider class="Webkul\\BlogManager\\Model\\Blog\\DataProvider" name="blogmanager_blog_editing_data_source">\n <settings>\n <requestFieldName>id<\/requestFieldName>\n <primaryFieldName>entity_id<\/primaryFieldName>\n <\/settings>\n <\/dataProvider>\n <\/dataSource>\n <fieldset name="blog_data">\n <settings>\n <label translate="true">Blog Data<\/label>\n <\/settings>\n <field name="entity_id" formElement="input">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="source" xsi:type="string">blog<\/item>\n <\/item>\n <\/argument>\n <settings>\n <dataType>text<\/dataType>\n <visible>false<\/visible>\n <\/settings>\n <\/field>\n <field name="title" formElement="input">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="source" xsi:type="string">blog<\/item>\n <\/item>\n <\/argument>\n <settings>\n <dataType>text<\/dataType>\n <label translate="true">Title<\/label>\n <validation>\n <rule name="required-entry" xsi:type="boolean">true<\/rule>\n <\/validation>\n <\/settings>\n <\/field>\n <field name="content" formElement="textarea">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="source" xsi:type="string">blog<\/item>\n <\/item>\n <\/argument>\n <settings>\n <dataType>text<\/dataType>\n <label translate="true">Content<\/label>\n <validation>\n <rule name="required-entry" xsi:type="boolean">true<\/rule>\n <\/validation>\n <\/settings>\n <\/field>\n <field name="status" formElement="select">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="source" xsi:type="string">blog<\/item>\n <\/item>\n <\/argument>\n <settings>\n <dataType>text<\/dataType>\n <label translate="true">Status<\/label>\n <\/settings>\n <formElements>\n <select>\n <settings>\n <options class="Webkul\\BlogManager\\Model\\Blog\\Status"\/>\n <\/settings>\n <\/select>\n <\/formElements>\n <\/field>\n <\/fieldset>\n<\/form><\/pre>\n\n\n\n
<?php\nnamespace Webkul\\BlogManager\\Model\\Blog;\n\nuse Magento\\Framework\\Data\\OptionSourceInterface;\n\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider\n{\n \/**\n * @var \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\Collection\n *\/\n protected $collection;\n\n \/**\n * @var array\n *\/\n protected $loadedData;\n\n \/**\n * Dependency Initilization\n *\n * @param [type] $name\n * @param [type] $primaryFieldName\n * @param [type] $requestFieldName\n * @param \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\CollectionFactory $blogCollectionFactory\n * @param array $meta\n * @param array $data\n *\/\n public function __construct(\n $name,\n $primaryFieldName,\n $requestFieldName,\n \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\CollectionFactory $blogCollectionFactory,\n array $meta = [],\n array $data = []\n ) {\n $this->collection = $blogCollectionFactory->create();\n parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n }\n\n \/**\n * Get Data\n *\n * @return array\n *\/\n public function getData()\n {\n if (isset($this->loadedData)) {\n return $this->loadedData;\n }\n $items = $this->collection->getItems();\n foreach ($items as $blog) {\n $this->loadedData[$blog->getId()] = $blog->getData();\n }\n return $this->loadedData;\n }\n}<\/pre>\n\n\n\n![\"Image](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-16_19-29-1200x489.png\")
<\/figure>\n\n\n\n
Next Blog -> Magento 2 Development 21: Form Widget<\/a><\/p>\n\n\n\n