adminhtml campos do formulário ui_component não preenchidos

8

Eu criei uma instância de formulário ui_component. Os campos são renderizados, mas não preenchidos. Mesmo que o JSON renderizado contenha os dados, ele não é exibido.
O que estou fazendo errado? O que são etapas de depuração eficazes?

Aqui está o que eu tenho. Para fins de teste, tornei a entidade bastante mínima (dois campos: foo_ide name).

O 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>

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

Este é o JSON renderizado (bastante impresso para facilitar a leitura):

{
  "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"
            }
          }
        }
      }
    }
  }
}
magento2 uicomponent Vinai
fonte
Vou felizmente dar um 100 pontos de recompensa para uma boa resposta, logo que a questão é elegível para recompensas,
Vinai
11
você está postando pergunta !!! interessante :)
Amit Bera
Acho que todos os componentes da interface do usuário são bastante difíceis de depurar (ou entender) até agora. A pagina devdocs para o componente de formulário da interface do usuário é inútil para mim. É preciso esforço para não começar a reclamar muito :) Eu ficaria muito grato por uma boa resposta!
Vinai
Eu tenho um problema semelhante! . Armazena dados no formulário ui não carregado após salvar com êxito. Armazenamentos de dados não carregar na grade
mrtuvn

Respostas:

10

Olhando para o JSON renderizado, isso parece

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

Especificamente 

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

Nos formulários principais do Magento (como o formulário do cliente), geralmente há outro nível aninhado lá

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

O fooacima refere-se ao seu fieldsetnome. Isso precisa corresponder à chave na matriz que sua classe de provedor de dados ( Example\Foo\Model\Foo\DataProvideracima) retorna.

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

Faz esses ajustes e você deve estar pronto.

Alan Storm
fonte
Isso é ótimo! Que, finalmente, explica um dos nós XML corretamente :) Ansioso para o artigo que você mencionou
Vinai
A que $ object_id se refere? Você pode postar a função getData () completa?
Priya Ponnusamy 1/11