I have created a form ui_component instance. The fields are rendered but not populated. Even though the rendered JSON contains the data, it does not display.
What am I doing wrong? What are effective debugging steps?
Here is what I've got. For testing purposes I have made the entity quite minimal (two fields: foo_id and name).
The ui_component 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">example_foo_form.example_foo_form_data_source</item>
<item name="deps" xsi:type="string">example_foo_form.example_foo_form_data_source</item>
</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">example_foo_form</item>
</item>
<item name="label" xsi:type="string" translate="true">Foo 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="save" xsi:type="string">Example\Foo\Block\Adminhtml\Foo\Edit\SaveButton</item>
</item>
</argument>
<dataSource name="example_foo_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Example\Foo\Model\Foo\DataProvider</argument>
<argument name="name" xsi:type="string">example_foo_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">foo_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="example_foo/foo/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>
<fieldset name="foo">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Foo Information</item>
</item>
</argument>
<field name="foo_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Foo ID</item>
<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="dataScope" xsi:type="string">foo_id</item>
</item>
</argument>
</field>
<field name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Name</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="dataScope" xsi:type="string">name</item>
</item>
</argument>
</field>
</fieldset>
</form>
The DataProvider:
<?php
namespace Example\Foo\Model\Foo;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
public function __construct(
\Example\Foo\Model\ResourceModel\Foo\CollectionFactory $collectionFactory,
$name,
$primaryFieldName,
$requestFieldName,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
$data = parent::getData();
return array_reduce($data['items'], function ($result, array $item) {
$result[$item['foo_id']] = $item;
return $result;
}, []);
}
}
This is the rendered JSON (pretty-printed for readability):
{
"types": {
"dataSource": {
"component": "Magento_Ui/js/form/provider"
},
"input": {
"extends": "example_foo_form"
},
"form.input": {
"extends": "input"
},
"textarea": {
"extends": "example_foo_form"
},
"form.textarea": {
"extends": "textarea"
},
"fieldset": {
"component": "Magento_Ui/js/form/components/fieldset",
"extends": "example_foo_form"
},
"example_foo_form": {
"component": "Magento_Ui/js/form/form",
"provider": "example_foo_form.example_foo_form_data_source",
"deps": "example_foo_form.example_foo_form_data_source"
},
"nav": {
"component": "Magento_Ui/js/form/components/tab_group",
"config": {
"template": "ui/tab"
},
"extends": "example_foo_form"
},
"html_content": {
"component": "Magento_Ui/js/form/components/html",
"extends": "example_foo_form"
},
"tab": {
"component": "Magento_Ui/js/form/components/area",
"extends": "example_foo_form"
}
},
"components": {
"example_foo_form": {
"children": {
"sections": {
"type": "nav",
"config": {
"label": "Foo Information"
},
"children": []
},
"areas": {
"type": "example_foo_form",
"config": {
"namespace": "example_foo_form"
},
"children": {
"foo": {
"type": "tab",
"dataScope": "data.foo",
"config": {
"label": "Foo Information"
},
"insertTo": {
"example_foo_form.sections": {
"position": 20
}
},
"children": {
"foo": {
"type": "fieldset",
"name": "foo",
"children": {
"name": {
"type": "form.input",
"name": "name",
"children": [],
"dataScope": "name",
"config": {
"component": "Magento_Ui/js/form/element/abstract",
"template": "ui/form/field",
"label": "Name",
"visible": true,
"dataType": "text",
"formElement": "input",
"displayArea": "body"
}
}
},
"config": {
"label": "Foo Information",
"displayArea": "body"
}
}
}
}
}
},
"example_foo_form_data_source": {
"type": "dataSource",
"name": "example_foo_form_data_source",
"dataScope": "example_foo_form",
"config": {
"data": {
"foo_id": "1",
"name": "test1"
},
"submit_url": "http://m2-example.localhost/admin/example/foo/save/key/f218ccaa2d4596ecc1f63770cd913793822e7f8489bd480ca007e3890f83a4b5/",
"params": {
"namespace": "example_foo_form"
}
}
}
}
}
}
}
