adminhtml表单ui_component字段未填充


8

我创建了一个表单ui_component实例。字段已呈现但未填充。即使呈现的JSON包含数据,也不会显示。
我究竟做错了什么?什么是有效的调试步骤?

这就是我所拥有的。为了进行测试,我使实体变得非常小(两个字段:foo_idname)。

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>

数据提供者:

<?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;
        }, []);
    }
}

这是呈现的JSON(出于可读性的考虑,经过漂亮打印):

{
  "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"
            }
          }
        }
      }
    }
  }
}

只要有资格获得赏金,我就会很高兴地给100分赏金给一个好的答案,
Vinai 2016年

1
你在发问题!!! 有趣的:)
阿米特·贝拉

到目前为止,我发现整个UI组件都很难调试(或理解)。ui表单组件的devdocs pag对我没有用。我们需要付出很多努力才不会开始大声疾呼:)我将非常感谢您提供的良好答案!
维奈2016年

我有类似的问题!。保存成功后,数据将以未加载的ui格式存储。数据存储未加载到网格中
mrtuvn

Answers:


10

查看您呈现的JSON,这看起来像

    "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"
        }
      }
    }

特别

  "config": {
    "data": {
      "foo_id": "1",
      "name": "test1"
    },

在Magento的核心表单(例如客户表单)中,通常还有另一个嵌套层

  "config": {
    "data": {
        "foo": {
              "foo_id": "1",
              "name": "test1"
    }
    },

foo以上指的是你fieldset的名字。这需要匹配数据提供者类(Example\Foo\Model\Foo\DataProvider上面)返回的数组中的键。

public function getData()
{
    //...        
    return [$object_id=>['foo'=>$item_data]];
}

进行这些调整,然后您就应该做好了。


这很棒!最终,这正确地解释了一个XML节点:)期待您提到的文章
Vinai

$ object_id指的是什么?您可以发布完整的getData()函数吗?
Priya Ponnusamy
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.