I created the Grid of my custom module successfully with Grid UI Component. Now what I want is, when edit action is selected for any row in the grid, it should open a form. I am trying to develop this form with the help of Form UI Component. I followed the steps mentioned here - http://devdocs.magento.com/guides/v2.0/ui-components/ui-form.html but it's giving me a blank page.
Here is what I have tried so far. Module and variable names have been changed, hence please excuse my brevity:
/view/adminhtml/layout/modulename_controllername_edit.xml
<page layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="editor"/>
<body>
<referenceContainer name="content">
<uiComponent name="vendorname_modulename_custom_form"/>
</referenceContainer>
</body>
</page>
/view/adminhtml/ui_component/vendorname_modulename_custom_form.xml
<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">vendorname_modulename.custom_form_data_source</item>
<item name="deps" xsi:type="string">vendorname_modulename.custom_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">My Custom Information</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
<item name="navContainerName" xsi:type="string">left</item>
</item>
<item name="buttons" xsi:type="array">
<item name="back" xsi:type="string">Vendorname\Modulename\Block\Adminhtml\Custom\Edit\BackButton</item>
<item name="delete" xsi:type="string">Vendorname\Modulename\Block\Adminhtml\Custom\Edit\DeleteButton</item>
<item name="reset" xsi:type="string">Vendorname\Modulename\Block\Adminhtml\Custom\Edit\ResetButton</item>
<item name="save" xsi:type="string">Vendorname\Modulename\Block\Adminhtml\Custom\Edit\SaveButton</item>
<item name="save_and_continue" xsi:type="string">Vendorname\Modulename\Block\Adminhtml\Custom\Edit\SaveAndContinueButton</item>
</item>
</argument>
<dataSource name="custom_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendorname\Modulename\Model\Custom\DataProvider</argument>
<argument name="name" xsi:type="string">custom_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_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="*/*/save"/>
<item name="validate_url" xsi:type="url" path="*/*/validate"/>
</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="custom">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">My Custom Information</item>
</item>
</argument>
<field name="entity_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">customrow</item>
</item>
</argument>
</field>
</fieldset>
</form>
DataProvider.php
namespace Vendorname\Modulename\Model\Custom;
use Vendorname\Modulename\Model\CustomFactory;
use Magento\Eav\Model\Config;
use Magento\Eav\Model\Entity\Type;
use Magento\Ui\DataProvider\EavValidationRules;
use Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
protected $collection;
protected $eavConfig;
protected $filterPool;
protected $loadedData;
protected $metaProperties = [
'dataType' => 'frontend_input',
'visible' => 'is_visible',
'required' => 'is_required',
'label' => 'frontend_label',
'sortOrder' => 'sort_order',
'notice' => 'note',
'default' => 'default_value',
'size' => 'multiline_count',
];
protected $formElement = [
'text' => 'input',
'hidden' => 'input',
'boolean' => 'checkbox',
];
protected $eavValidationRules;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
EavValidationRules $eavValidationRules,
CustomFactory $customCollectionFactory,
Config $eavConfig,
FilterPool $filterPool,
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
$this->eavValidationRules = $eavValidationRules;
$this->collection = $customCollectionFactory->create()->getCollection();
$this->getData();
$this->eavConfig = $eavConfig;
$this->filterPool = $filterPool;
}
public function getData() {
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();
foreach ($items as $customRow) {
$result['custom'] = $customRow->getData();
unset($result['custom']);
$this->loadedData[$customRow->getId()] = $result;
}
return $this->loadedData;
}
}
When I debug, the control comes __construct of my DataProvider.php. It gets executed successfully, but nothing gets displayed on frontend.
In addition to above two, I have created files for UiButtons.
- Block\Adminhtml\Custom\Edit\BackButton.php
- Block\Adminhtml\Custom\Edit\DeleteButton.php
- Block\Adminhtml\Custom\Edit\ResetButton.php
- Block\Adminhtml\Custom\Edit\SaveAndContinueButton.php
- Block\Adminhtml\Custom\Edit\SaveButton.php
Any ideas as to what I am doing wrong ? Are there any additional files that I need to create ?
