Magento – Magento2 – Custom Admin Module – UI Form Component showing blank page

adminformsmagento2moduleuicomponent

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 ?

Best Answer

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>

Related Solutions

Admin – How to Show Form Instead of Grid

Yes I have done same functionality in one of my project. hope you have create the basic module with grid.

Changes in Exciting code For Example.

Step 1: Open your Controller app\code\local\[Package Name]\[Module Name]\controllers\Adminhtml\ImportController.php

Step 2: Each Controller has indexAction().

public function indexAction()
{
    $this->_title($this->__('Import'));
    $this->loadLayout();
    $this->_addContent($this->getLayout()->createBlock('packagename/adminhtml_import_edit'));
    $this->renderLayout();
}

block path as per Magento Standard. For this you can bypass the grid thing.

Step 3: create file app\code\community\[Package Name]\[Module Name]\Block\Adminhtml\import\Edit.php.

Step 4: They layout and template file as per Magento Standards.

<packagename_adminhtml_import>
    <reference name="content">
        <block type="packagename/adminhtml_import" name="import" />
    </reference>
</packagename_adminhtml_import>

Hope you can understand What I am trying to say. For Your Knowledge I have follow the structure of System >> My Account page.

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Best Answer

Related Solutions

Admin – How to Show Form Instead of Grid

Magento 2 – How to Rewrite TierPrice Block

Related Topic