Magento2 : Form Edit UI_COMPONENT showing blank page

https://magento.stackexchange.com/questions/322881

14-04-2021
|

Question

I am having a button in my ui_component that open page with form in it to save the data, everything I have done as follows but the page after click on the button is blank nothing showing:

Router Files as below:

<?xml version="1.0" encoding="UTF-8"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="apriljune_testimonial" frontName="apriljune_testimonial">
  <module name="Apriljune_Testimonial" before="Magento_Backend" />
</route>
 <route id="testimonial" frontName="testimonial">
        <module name="Apriljune_Testimonial" after="Magento_Backend" />
  </route>
</router>
</config>

My Controller is as below :

namespace Apriljune\Testimonial\Controller\Adminhtml\Testimonial;

use Magento\Framework\Controller\ResultFactory;

class Edit extends \Magento\Backend\App\Action
{
     /**
     * @return \Magento\Backend\Model\View\Result\Page
     */
    public function execute()
    {
     $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
     return $resultPage;
    }
}

UI_COMPONENT is defined as below:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
    <referenceContainer name="content">
        <uiComponent name="apriljune_testimonial_testimonial_form"/>
    </referenceContainer>
</body>

And my UI component contains the following code:

<?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">apriljune_testimonial_testimonial_form.apriljune_testimonial_testimonial_listing_data_source</item>
        <item name="deps" xsi:type="string">apriljune_testimonial_testimonial_form.apriljune_testimonial_testimonial_listing_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">Testimonial Information</item>
    <item name="config" xsi:type="array">
        <item name="dataScope" xsi:type="string">data</item>
        <item name="namespace" xsi:type="string">apriljune_testimonial_testimonial_form</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="apriljune_testimonial_testimonial_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
        <argument name="name" xsi:type="string">apriljune_testimonial_testimonial_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<fieldset name="employee_details">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Employee Details</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
    <field name="employee_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Id</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_id</item>
            </item>
        </argument>
    </field>
    <field name="employee_name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_name</item>
            </item>
        </argument>
    </field>
    <field name="employee_salary">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Salary</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_salary</item>
            </item>
        </argument>
    </field>
    <field name="employee_address">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Address</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_address</item>
            </item>
        </argument>
    </field>
</fieldset>

And di.xml looks like this:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Apriljune\Testimonial\Model\ResourceModel\Testimonial\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">apriljune_testimonial</argument>
        <argument name="eventPrefix" xsi:type="string">test_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">test_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Apriljune\Testimonial\Model\ResourceModel\Testimonial</argument>
    </arguments>
</type>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="apriljune_testimonial_testimonial_listing_data_source" xsi:type="string">Apriljune\Testimonial\Model\ResourceModel\Testimonial\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Solution

Try this code

My Controller is as below :

<?php

namespace Apriljune\Testimonial\Controller\Adminhtml\Testimonial;

class Edit  extends \Magento\Backend\App\Action
{
    protected $resultPageFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Edit Page'));
        return $resultPage;
    }
}

UI_COMPONENT is defined as below:

apriljune_testimonial_testimonial_edit.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="apriljune_testimonial_testimonial_form"/>
        </referenceContainer>
    </body>
</page>

And my UI component contains the following code:

apriljune_testimonial_testimonial_form.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">apriljune_testimonial_testimonial_form.apriljune_testimonial_testimonial_listing_data_source</item>
        <item name="deps" xsi:type="string">apriljune_testimonial_testimonial_form.apriljune_testimonial_testimonial_listing_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">Testimonial Information</item>
    <item name="config" xsi:type="array">
        <item name="dataScope" xsi:type="string">data</item>
        <item name="namespace" xsi:type="string">apriljune_testimonial_testimonial_form</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="apriljune_testimonial_testimonial_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
         <argument name="class" xsi:type="string">Apriljune\Testimonial\Model\DataProvider</argument>
        <argument name="name" xsi:type="string">apriljune_testimonial_testimonial_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<fieldset name="employee_details">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Employee Details</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
    <field name="employee_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Id</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_id</item>
            </item>
        </argument>
    </field>
    <field name="employee_name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_name</item>
            </item>
        </argument>
    </field>
    <field name="employee_salary">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Salary</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_salary</item>
            </item>
        </argument>
    </field>
    <field name="employee_address">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Employee Address</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="source" xsi:type="string">employee</item>
                <item name="dataScope" xsi:type="string">employee_address</item>
            </item>
        </argument>
    </field>
</fieldset>
</form>

Apriljune\Testimonial\Model

DataProvider.php

<?php

namespace Apriljune\Testimonial\Model;

use Apriljune\Testimonial\Model\ResourceModel\Testimonial\CollectionFactory;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    protected $loadedData;
    protected $storeManager;

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        CollectionFactory $TestimonialCollection,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $TestimonialCollection->create();
        $this->_storeManager = $storeManager;
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }
    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $job_data) {
            $this->loadedData[$job_data->getId()] = $job_data->getData();
        }
        return $this->loadedData;
    }
}

Licensed under: CC-BY-SA with attribution

Not affiliated with magento.stackexchange