2

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 ?

  • Have you create Block/Adminhtml/Edit classs and Block/Adminhtml/Edit/Form class as well? ui form is used in customer management and both those classes are there, so maybe you are missing something in this area? – Zefiryn Jan 19 '16 at 7:17
2

i think you not define ui-components in etc/di.xml

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="custom_form_data_source" xsi:type="string">Vendorname\Modulename\Model\ResourceModel\Custom\Collection</item>
        </argument>
    </arguments>
</type>

<virtualType name="CustomGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
    <arguments>
        <argument name="appliers" xsi:type="array">
            <item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
            <item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
        </argument>
    </arguments>
</virtualType>

<virtualType name="Vendorname\Modulename\Model\Custom\DataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Vendorname\Modulename\Model\Custom\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">CustomGridFilterPool</argument>
    </arguments>
</virtualType>
  • thank you for inputs but its not working. – Reena Parekh Dec 22 '15 at 6:39
0

in the provider and deps config, the first part is the name of the form. So it has to be:

vendorname_modulename_custom_form.custom_form_data_source
  • thank you for your answer David. i will check it as soon as i get some time. – Reena Parekh Feb 23 '16 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.