Magento 2 Admin Form – Fix Infinite Loading Issue

magento-2.1.2magento2uicomponent

I'm still trying to figure out how to create a custom form in the backend. I've tried doing it with Blocks only and it worked fine except for the fact that I couldn't save my images.

Anyways, now I've switched to using Ui-component. But the resources on the subject (up-to-date and complete) are scarce on the net. This is what I have so far:

Company\Manufacturer\view\adminhtml\layout\manufacturer_manufacturer_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="editor"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="new_manufacturer_form"/>
        </referenceContainer>
    </body>
</page>

(so far so good, nothing fancy)

Company\Manufacturer\view\adminhtml\ui_component\new_manufacturer_form.xml

<?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">manufacturer_form.manufacturer_form_data_source</item>
            <item name="deps" xsi:type="string">manufacturer_form.manufacturer_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Manufacturer Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">manufacturer_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="manufacturer_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Company\Manufacturer\Model\Manufacturer\DataProvider</argument>
            <argument name="name" xsi:type="string">manufacturer_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">entity_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="manufacturer/manufacturer/save"/>
                </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>
</form>

I am aware the <fieldset> bit as well as the buttons are missing, but it's not relevant for my problem as the Block's creation page works fine without them too.

Company\Manufacturer\Model\Manufacturer\DataProvider.php

<?php

namespace Company\Manufacturer\Model\Manufacturer;
use Magento\Ui\DataProvider\AbstractDataProvider;
use Company\Manufacturer\Model\ResourceModel\Manufacturer\CollectionFactory;

class DataProvider extends AbstractDataProvider
{

    /**
     * @param string $name
     * @param string $primaryFieldName
     * @param string $requestFieldName
     * @param CollectionFactory $collectionFactory
     * @param array $meta
     * @param array $data
     */
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
        $this->collection = $collectionFactory->create();
    }
}

Once again, the Block's creation page loads fine without its getData() too.
There seems to be an overlay with a loader on top, and no further requests are made, no matter what I put in the <fieldset>.
This is what it looks like:

Overlay on top of form

Does anyone have any idea on what could be happening there? What am I doing wrong?

edit: added @Aaron Allen's suggestion.

Best Answer

I think there is problem in your js_config. The namaspace and ui_component name must be same.

Try following change.

Change following lines

<item name="provider" xsi:type="string">manufacturer_form.manufacturer_form_data_source</item>
<item name="deps" xsi:type="string">manufacturer_form.manufacturer_form_data_source</item>

To

<item name="provider" xsi:type="string">new_manufacturer_form.manufacturer_form_data_source</item>
<item name="deps" xsi:type="string">new_manufacturer_form.manufacturer_form_data_source</item>

Make sure you use ui_component name as namespace.