adminhtml form ui_component Felder nicht ausgefüllt

8

Ich habe eine Formular-ui_component-Instanz erstellt. Die Felder werden gerendert, aber nicht ausgefüllt. Obwohl der gerenderte JSON die Daten enthält, werden sie nicht angezeigt.
Was mache ich falsch? Was sind effektive Debugging-Schritte?

Hier ist was ich habe. Zu Testzwecken habe ich die Entität ziemlich minimal gemacht (zwei Felder: foo_idund name).

Die XML-Datei 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>

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

Dies ist der gerenderte JSON (zur besseren Lesbarkeit hübsch gedruckt):

{
  "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
quelle
Ich gebe gerne eine Prämie von 100 Punkten für eine gute Antwort, sobald die Frage für eine Prämie in Frage kommt.
— Vinai
1
postest du frage !!! interessant :)
— Amit Bera
Ich finde die gesamten UI-Komponenten bisher ziemlich schwierig zu debuggen (oder zu verstehen). Die Devdocs-Seite für die UI- Form-Komponente ist für mich nutzlos. Es braucht Mühe, nicht zu viel zu schimpfen :) Ich wäre sehr dankbar für eine gute Antwort!
— Vinai
Ich habe ein ähnliches Problem! . Speichert Daten in Form ui, die nach erfolgreichem Speichern nicht geladen wurden. Datenspeicher werden nicht in das Raster
— geladen

Antworten:

10

Wenn Sie sich Ihren gerenderten JSON ansehen, sieht dies nicht gut aus

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

Speziell 

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

In den Kernformularen von Magento (wie dem Kundenformular) befindet sich normalerweise eine andere verschachtelte Ebene

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

Das fooObige bezieht sich auf Ihren fieldsetNamen. Dies muss mit dem Schlüssel in dem Array übereinstimmen, das Ihre Datenproviderklasse ( Example\Foo\Model\Foo\DataProvideroben) zurückgibt.

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

Nehmen Sie diese Anpassungen vor, und Sie sollten bereit sein, loszulegen.

— Alan Storm
quelle
Das ist toll! Das erklärt schließlich einen der XML-Knoten richtig :) Ich freue mich auf den Artikel, den Sie erwähnt haben
— Vinai
Worauf bezieht sich $ object_id? Können Sie die vollständige Funktion getData () veröffentlichen?
— Priya Ponnusamy
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.