I'm learning to create an UI components form, but stuck on neverending spinner. Help me to create this form, step by step, please.
I have a module in adminhtml which shows a table from database. This table contains columns id, age, name, comment. I need to build an edit form which shows after click on a row in the table.
File myadminroute_index_edit.xml was created in Overdose\AdminPanel\view\adminhtml\layout\myadminroute_index_edit.xml
<?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">
<block class="Magento\Backend\Block\Template" template="Overdose_AdminPanel::future-form.phtml"/>
<uiComponent name="overdose_friends_form"/>
</referenceContainer>
</body>
</page>
UI component overdose_friends_form.xml is located in *\Overdose\AdminPanel\view\base\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">overdose_friends_form.overdose_friends_form_data_source</item>
<item name="deps" xsi:type="string">overdose_friends_form.overdose_friends_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Editing in the Form</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
</item>
<item name="buttons" xsi:type="array">
<item name="primary" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Save Button</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">myadminroute/index/save</item>
</item>
<item name="primary" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Back Button</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">myadminroute/index/index</item>
</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="overdose_friends_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Overdose\AdminPanel\Controller\Adminhtml\Model\Dataprovider</argument>
<argument name="name" xsi:type="string">overdose_friends_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</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="sample_fieldset">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Sample Fieldset</item>
</item>
</argument>
<!-- This field represents form id -->
<field name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<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">sampleform</item>
</item>
</argument>
</field>
</fieldset>
</form>
Dataprovider.php is located in *\Overdose\AdminPanel\Controller\Adminhtml\Model*
<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Model;
use \Overdose\LessonOne\Model\ResourceModel\Collection\FriendsFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
\Overdose\LessonOne\Model\ResourceModel\Collection\FriendsFactory $friendsFactory,
array $meta = [],
array $data = []
) {
$this->collection = $friendsFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* Get data
*
* @return array
*/
public function getData()
{
return [];
}
}
The controller consists of AbstractController.php in *\Overdose\AdminPanel\Controller\Adminhtml\Index*
<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Framework\App\Config\ScopeConfigInterface;
abstract class AbstractController extends \Magento\Backend\App\Action
{
const DEFAULT_ACTION_PATH = 'myadminroute/index/';
protected $friendsFactory;
protected $friendsResourceModel;
public function __construct(
Action\Context $context,
// TODO: Add your repository or model/resourceModel classes here
\Overdose\LessonOne\Model\FriendsFactory $friendsFactory,
\Overdose\LessonOne\Model\ResourceModel\Friends $friendsResourceModel
) {
parent::__construct($context);
// TODO: Assign them to the protected variable, so that child classes can access it
$this->friendsFactory = $friendsFactory;
$this->friendsResourceModel = $friendsResourceModel;
}
}
and Edit.php in *\Overdose\AdminPanel\Controller\Adminhtml\Index*
<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Backend\App\Action;
use Magento\Framework\Controller\ResultFactory;
class Edit extends AbstractController
{
public function execute()
{
$adminPage = $this->resultFactory->create('page');
$adminPage->getConfig()->getTitle()->prepend(__('Friend form'));
$entityId = $this->getRequest()->getParam('id');
//echo ($entityId);
return $adminPage;
}
}
