Raul Watson Mar 15, 2018 2 min de lectura

Como: Usar el Form Ui Component en Magento 2

En esta página

El Form Ui Component es lo que Magento usa en todas partes en el admin para renderizar las pantallas de edición. La primera vez que construyes uno se siente como mucho XML para un formulario simple, pero el patrón es siempre el mismo, así que una vez que lo has hecho una vez puedes hacerlo con los ojos cerrados.

Un formulario necesita dos cosas: un archivo XML que describe los campos, y un data provider que lo alimenta con los valores actuales.

Este post asume que existe ya un módulo con la ruta app/code/Vendor/Module con un modelo de entidad y su resource model. Aquí nos enfocamos en el formulario en sí.

El XML del formulario

xml
<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/adminhtml/ui_component/vendor_entity_form.xml -->
<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">vendor_entity_form.vendor_entity_form_data_source</item>
        </item>
    </argument>
    <settings>
        <namespace>vendor_entity_form</namespace>
        <dataScope>data</dataScope>
    </settings>
    <dataSource name="vendor_entity_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Model\Entity\DataProvider</argument>
            <argument name="name" xsi:type="string">vendor_entity_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
    </dataSource>
    <fieldset name="general">
        <settings>
            <label translate="true">General</label>
        </settings>
        <field name="title" formElement="input">
            <settings>
                <label translate="true">Title</label>
                <dataType>text</dataType>
            </settings>
        </field>
    </fieldset>
</form>

El data provider

El data provider extiende AbstractDataProvider (o el moderno Magento\Ui\DataProvider\AbstractDataProvider) y su trabajo es devolver la data del registro que se está editando, indexada por su id.

php
<?php
/** app/code/Vendor/Module/Model/Entity/DataProvider.php */
namespace Vendor\Module\Model\Entity;

use Magento\Ui\DataProvider\AbstractDataProvider;
use Vendor\Module\Model\ResourceModel\Entity\CollectionFactory;

class DataProvider extends AbstractDataProvider
{
    /**
     * @var array
     */
    private $loadedData;

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $collectionFactory->create();
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    /**
     * @return array
     */
    public function getData()
    {
        if ($this->loadedData !== null) {
            return $this->loadedData;
        }

        $this->loadedData = [];
        foreach ($this->collection->getItems() as $entity) {
            $this->loadedData[$entity->getId()] = $entity->getData();
        }

        return $this->loadedData;
    }
}

Ese es todo el ciclo: el formulario le pide la data al data source, el data source es nuestro provider, y el provider devuelve el registro indexado por su id para que cada campo conozca su valor actual. Conecta un controlador que renderice este formulario, despliega el static content del admin, limpia la caché y tienes una pantalla de edición funcionando.

Espero que esto ayude.

Si tienes alguna pregunta o conoces una mejor manera de lograr esto, siéntete libre de compartir en los comentarios a continuación.