Magento 2 – How to Set Data for Field in Form UI

data-providermagento2uicomponent

Is there a right way pass data (request value) to form ui-component?

I have try to setData from DataProvider define in form-ui.xml but not work. After form load complete this field must be populated data (initial value)

/**
 * Get data from provider and populate
 * @param void
 * @return array
 */
public function getData()
{

    if (isset($this->loadedData)) {
        return $this->loadedData;
    }

    if ($itemId)
        $items = $this->collection->getItems();

    $data = $this->dataPersistor->get('form_item');
    if (!empty($data)) {
       //Do something
    } else {
       //When form init without any data
       // I want to setData for some field here
    }

    return $this->loadedData;
}

My current question:
1 – How to setData in the right way for ui way? If my way not right is there a better way to do setdata for field
2 – Side question: How core-team can make magento find exactly which form to interactive. In old way form , we can define form original with form tag, htmlIdPrefix … etc But in new form i can't find anywhere in uiform.xml to configuration id form, form prefix .. I am curious how it work

It will be great if know about it

Best Answer

In your custom_form.xml file

<field name="your_field_id">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">{Vendorname}\{Modulename}\Model\Classname</item>
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Name label</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">[source_here]</item>
                    <item name="dataScope" xsi:type="string">your_field_id</item>
                    <item name="caption" xsi:type="string" translate="true">-- Please Select --</item>
                </item>
            </argument>
        </field>

    In above -- Please Select -- is set as default custom message for dropdown.

Where you can set select dynamic option from this class,

{Vendorname}\{Modulename}\Model\Classname using toOptionArray() method.

In DataProvider.php file,

<?php
namespace Yourmodule\Modulename\Model\Path;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

public function __construct(        
        \Magento\Framework\App\RequestInterface $request        
    ) {
        $this->_request = $request;
    }



public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }

    $itemId = $this->_request->getParam('page_id');

    if ( !empty($itemId) ) {
    $items = $this->collection->getItems();
    foreach ($items as $item) {
        $this->loadedData[$item->getId()] = $item->getData();
    }

    $data = $this->dataPersistor->get('form_item');

    if (!empty($data)) {
       //Do something
       $this->loadedData[$item->getId()] = $item->getData();
    } 
    return $this->loadedData;
}

}

Another way to get data Using UI component.

If you want get dafault value from another module using UI component

Add this field in your custom_form.xml file

<item name="options" xsi:type="object">{Vendorname}\{Modulename}\Ui\Component\Form\Element\DataProvider</item>

In DataProvider.php file,

<?php
namespace {Vendorname}\{Modulename}\Ui\Component\Form\Element;
class DataProvider extends \Magento\Ui\Component\Form\Element\Input
{
  /**
     * Prepare component configuration
     *
     * @return void
     */
    public function prepare()
    {
      parent::prepare();

      $customValue = {Get Custom value};

      $config = $this->getData('config');

      if(isset($config['dataScope']) && $config['dataScope']=='your_field_id'){
        $config['default']= $customValue;
        $this->setData('config', (array)$config);
      }
    }
}

Related Solutions

Magento – Data population in UI form

Using dataPersistor to get Form data, thought you're using getSession

$data = $this->getSession()->getFormData();

Save action

<?php


namespace Vendor\Module\Controller\Adminhtml\Scheduler;

use Magento\Framework\Exception\LocalizedException;

class Save extends \Magento\Backend\App\Action
{

    protected $dataPersistor;

    /**
     * @param \Magento\Backend\App\Action\Context $context
     * @param \Magento\Framework\App\Request\DataPersistorInterface $dataPersistor
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\App\Request\DataPersistorInterface $dataPersistor
    ) {
        $this->dataPersistor = $dataPersistor;
        parent::__construct($context);
    }

    /**
     * Save actionSave action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
        $resultRedirect = $this->resultRedirectFactory->create();
        $data = $this->getRequest()->getPostValue();
        if ($data) {
            $id = $this->getRequest()->getParam('scheduler_id');

            $model = $this->_objectManager->create('Vendor\Module\Model\Scheduler')->load($id);
            if (!$model->getId() && $id) {
                $this->messageManager->addErrorMessage(__('This Scheduler no longer exists.'));
                return $resultRedirect->setPath('*/*/');
            }

            $model->setData($data);

            try {

                $model->save();
                $this->messageManager->addSuccessMessage(__('You saved the Scheduler.'));
                $this->dataPersistor->clear('engraving_scheduler');

                if ($this->getRequest()->getParam('back')) {
                    return $resultRedirect->setPath('*/*/edit', ['scheduler_id' => $model->getId()]);
                }
                return $resultRedirect->setPath('*/*/');
            } catch (LocalizedException $e) {
                $this->messageManager->addErrorMessage($e->getMessage());
            } catch (\Exception $e) {
                $this->messageManager->addExceptionMessage($e, __('Something went wrong while saving the Scheduler.'));
            }

            $this->dataPersistor->set('engraving_scheduler', $data);
            return $resultRedirect->setPath('*/*/edit', ['scheduler_id' => $this->getRequest()->getParam('scheduler_id')]);
        }
        return $resultRedirect->setPath('*/*/');
    }
}

DataProvider

<?php


namespace Vendor\Module\Model\Scheduler;

use Vendor\Module\Model\ResourceModel\Scheduler\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

    protected $dataPersistor;

    protected $loadedData;
    protected $collection;


    /**
     * Constructor
     *
     * @param string $name
     * @param string $primaryFieldName
     * @param string $requestFieldName
     * @param CollectionFactory $collectionFactory
     * @param DataPersistorInterface $dataPersistor
     * @param array $meta
     * @param array $data
     */
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        DataPersistorInterface $dataPersistor,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $collectionFactory->create();
        $this->dataPersistor = $dataPersistor;
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $model) {
            $this->loadedData[$model->getId()] = $model->getData();
        }
        $data = $this->dataPersistor->get('engraving_scheduler');

        if (!empty($data)) {
            $model = $this->collection->getNewEmptyItem();
            $model->setData($data);
            $this->loadedData[$model->getId()] = $model->getData();
            $this->dataPersistor->clear('engraving_scheduler');
        }

        return $this->loadedData;
    }
}

ui form xml

    <?xml version="1.0" ?>
<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">engraving_scheduler_form.scheduler_form_data_source</item>
            <item name="deps" xsi:type="string">engraving_scheduler_form.scheduler_form_data_source</item>
        </item>
        <item name="label" translate="true" xsi:type="string">General Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">engraving_scheduler_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">Vendor\Module\Block\Adminhtml\Scheduler\Edit\BackButton</item>
            <item name="delete" xsi:type="string">Vendor\Module\Block\Adminhtml\Scheduler\Edit\DeleteButton</item>
            <item name="save" xsi:type="string">Vendor\Module\Block\Adminhtml\Scheduler\Edit\SaveButton</item>
            <item name="save_and_continue" xsi:type="string">Vendor\Module\Block\Adminhtml\Scheduler\Edit\SaveAndContinueButton</item>
        </item>
    </argument>
    <dataSource name="scheduler_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Model\Scheduler\DataProvider</argument>
            <argument name="name" xsi:type="string">scheduler_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">scheduler_id</argument>
            <argument name="requestFieldName" xsi:type="string">scheduler_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" path="*/*/save" xsi:type="url"/>
                </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="General">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
            </item>
        </argument>
        <field name="label">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Title</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">Scheduler</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="dataScope" xsi:type="string">label</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Magento2 UIComponent Form – How to Show Data from DB Table

My main problem that DataProvider::getData() function weren't executed was because it didn't know which row to populate. When I added /settings_id/1/ into an url then this function was called.

And return value should be set like this:

return [1 => ['settings' => $item]]

where

[$selectedId => [$fieldsetName => $ArrayOfitemValues]]

I hope it helps somebody.

Best Answer

Related Solutions

Magento – Data population in UI form

Magento2 UIComponent Form – How to Show Data from DB Table

Related Topic