Magento2 : Form Edit UI_COMPONENT showing blank page
-
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