Tôi đã tạo một ví dụ ui_component. Các trường được kết xuất nhưng không được điền. Mặc dù JSON được kết xuất chứa dữ liệu, nó không hiển thị.
Tôi đang làm gì sai? Các bước gỡ lỗi hiệu quả là gì?
Đây là những gì tôi đã có. Đối với mục đích thử nghiệm, tôi đã làm cho thực thể khá tối thiểu (hai trường: foo_id
và name
).
XML ui_component:
<?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>
Trình cung cấp dữ liệu:
<?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;
}, []);
}
}
Đây là JSON được kết xuất (in đẹp để dễ đọc):
{
"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"
}
}
}
}
}
}
}