Magento – Admin Ui Form component JS error

magento2moduleuicomponent

What Im trying to do

I started creating my own module for Magento 2. Module is simple – manage news articles in admin side and display them in frontend. No problems displaying data in frontend so far. Had "broken reference" error and blank page when creating admin Ui grid for my news articles, fixed it by using Magento version 2.2.0 instead of 2.0.x.

Now I am trying to create option to add new article in admin side. Added "add new" button in grid, created data provider, layout, controller and form component. When I navigate to "add new" page where should be the form I get page without form, only created tab in left side and loader animation is spinning all the time.

Screenshot:
enter image description here

Error

Checking Chromium developer tools console I noticed error:

Uncaught TypeError: Cannot read property 'on' of undefined
at UiClass.initUnique (element.js:201)
at UiClass.initialize (element.js:108)
at UiClass.initialize (wrapper.js:109)
at UiClass._super (wrapper.js:106)
at UiClass.initialize (tab.js:26)
at UiClass.initialize (wrapper.js:109)
at UiClass._super (wrapper.js:106)
at UiClass.initialize (area.js:30)
at UiClass.initialize (wrapper.js:109)
at new UiClass (class.js:49)

Checking Magento logs I noticed "message" in system.log each time I try to access page:

main.INFO: Broken reference: the 'notification.messages' tries to reorder itself towards 'user', but their parents are different: 'header.inner.right' and 'header' respectively.

Code

Ui\DataProvider.php: 

<?php

namespace Iskes\Simplenews\Ui;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    protected $collection;

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

    public function getData()
    {
        $result = [];
        foreach ($this->collection->getItems() as $item) {
            $result[$item->getId()]['general'] = $item->getData();
        }

        return $result;
    }
}

Controller\Adminhtml\Article\NewAction.php:

<?php

namespace Iskes\Simplenews\Controller\Adminhtml\Article;

use \Magento\Framework\Controller\ResultFactory;

class NewAction extends \Magento\Backend\App\Action
{
    public function execute()
    {
       return $this->resultFactory->create(ResultFactory::TYPE_PAGE);
    }
}

Layout view\adminhtml\layout\simplenews_article_new.php:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="simplenews_new_article_form"/>
        </referenceContainer>
    </body>
</page>

Ui form component view\adminhtml\ui_component\simplenews_new_article_form.xml:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="provider" xsi:type="string">simplenews_new_article_form.simplenews_new_article_form_data_source</item>
            </item>
            <item name="deps" xsi:type="string">simplenews_new_article_form.simplenews_new_article_form_data_source</item>
        </item>
        <item name="label" xsi:type="string">General</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="save" xsi:type="array">
                <item name="name" xsi:type="string">save</item>
                <item name="label" xsi:type="string">Save</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/save</item>
            </item>
        </item>
    </argument>
    <dataSource name="simplenews_new_article_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Iskes\Simplenews\Ui\DataProvider</argument>
            <argument name="name" xsi:type="string">simplenews_new_article_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="collectionFactory" xsi:type="object">Iskes\Simplenews\Model\ResourceModel\Article\CollectionFactory</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="string">simplenews/article/save</item>
                </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="general">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">General</item>
            </item>
        </argument>
        <field name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Title</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

So the question is

What I am doing wrong, where is the problem and how to solve it? I really hope I am the one who missed something and created the error. I have read that Magento 2 has lot of issues and bugs…

UPDATE

Commenting fieldset in ui form component removes the error.

Best Answer

Adding source and dataScope to fields under tag item with name "config" fixed the problem - form is showing, no errors.
Code:

...
<item name="source" xsi:type="string">article</item>
<item name="dataScope" xsi:type="string">title</item>
...
Related Topic