Magento 2.1 – Fix ui_component Form Module Not Working

magento-2.1magento2moduleuicomponent

I am trying to create a form on the backend in my Magento 2.1 module using ui_component. However, when I am trying to access the page of the module it throws error 500.

Here is the outcome of apache error logs:

[Fri May 26 14:03:15.423368 2017] [:error] [pid 13863] [client
xxx] PHP Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not
throw an exception, caught Error: Call to a member function
addFieldToFilter() on null in
/data/sites/project_name/vendor/magento/module-ui/Component/Wrapper/UiComponent.php
on line 0

Here is the module's structure:

/etc/adminhtml/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="productparser" frontName="productparser">
            <module name="Company_Name_ProductParser"/>
        </route>
    </router>
</config>

/Controller/Adminhtml/ParseProduct/Index.php

<?php
namespace Company_Name\ProductParser\Controller\Adminhtml\ParseProduct;

class Index extends \Magento\Backend\App\Action
{
    /**
     * @var \Magento\Framework\View\Result\PageFactory
     */
    protected $resultPageFactory;

    /**
     * Constructor
     *
     * @param \Magento\Backend\App\Action\Context $context
     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }


    /**
     * Load the page defined in view/adminhtml/layout/productparser_parseproduct_index.xml
     *
     * @return \Magento\Framework\View\Result\Page
     */
    public function execute()
    {
        return  $resultPage = $this->resultPageFactory->create();
    }
}
?>

/view/adminhtml/layout/productparser_parseproduct_index.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">
    <head>
        <title>
            Parse
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="parse_form"/>
        </referenceContainer>
    </body>
</page>

/view/adminhtml/ui_component/parse_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">parse_form.parse_form_data_source</item>
                <item name="deps" xsi:type="string">parse_form.parse_form_data_source</item>
            </item>
            <item name="label" xsi:type="string" translate="true">Sample Form</item>
            <item name="layout" xsi:type="array">
                <item name="type" xsi:type="string">tabs</item>
            </item>
    </argument>

    <dataSource name="parse_form_data_source">
            <argument name="dataProvider" xsi:type="configurableObject">
                <argument name="class" xsi:type="string">Company_Name\ProductParser\Model\DataProvider</argument>
                <argument name="name" xsi:type="string">parse_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 and is hidden -->
            <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">sampleform</item>
                    </item>
                </argument>
            </field>

            <!-- This field has data type 'text' and standard 'input' form element and looks like input -->
            <field name="title">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string">New title</item>
                        <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>

/Model/DataProvider.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Company_Name\ProductParser\Model;
/**
 * Class DataProvider
 */
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
        return [];
    }
}

Best Answer

Add item config and template in data argument in parse_form.xml

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">parse_form.parse_form_data_source</item>
        <item name="deps" xsi:type="string">parse_form.parse_form_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">Sample 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 name="namespace" xsi:type="string">parse_form</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>