0

I'm learning to create an UI components form, but stuck on neverending spinner. Help me to create this form, step by step, please. enter image description here I have a module in adminhtml which shows a table from database. This table contains columns id, age, name, comment. I need to build an edit form which shows after click on a row in the table. File myadminroute_index_edit.xml was created in Overdose\AdminPanel\view\adminhtml\layout\myadminroute_index_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Backend\Block\Template" template="Overdose_AdminPanel::future-form.phtml"/>
            <uiComponent name="overdose_friends_form"/>
        </referenceContainer>
    </body>
</page>

UI component overdose_friends_form.xml is located in *\Overdose\AdminPanel\view\base\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">overdose_friends_form.overdose_friends_form_data_source</item>
            <item name="deps" xsi:type="string">overdose_friends_form.overdose_friends_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Editing in the Form</item>
        <item name="layout" xsi:type="array">
            <item name="type" xsi:type="string">tabs</item>
        </item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
        </item>
        <item name="buttons" xsi:type="array">
        <item name="primary" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Save Button</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">myadminroute/index/save</item>
        </item>
            <item name="primary" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Back Button</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">myadminroute/index/index</item>
            </item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>

    <dataSource name="overdose_friends_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Overdose\AdminPanel\Controller\Adminhtml\Model\Dataprovider</argument>
            <argument name="name" xsi:type="string">overdose_friends_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</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="sample_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Sample Fieldset</item>
            </item>
        </argument>

        <!-- This field represents form id -->
        <field name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <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="source" xsi:type="string">sampleform</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Dataprovider.php is located in *\Overdose\AdminPanel\Controller\Adminhtml\Model*

<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Model;

use \Overdose\LessonOne\Model\ResourceModel\Collection\FriendsFactory;

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

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        \Overdose\LessonOne\Model\ResourceModel\Collection\FriendsFactory $friendsFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $friendsFactory->create();
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
        return [];
    }
}

The controller consists of AbstractController.php in *\Overdose\AdminPanel\Controller\Adminhtml\Index*

<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\Framework\App\Config\ScopeConfigInterface;

abstract class AbstractController extends \Magento\Backend\App\Action

{
    const DEFAULT_ACTION_PATH = 'myadminroute/index/';

    protected $friendsFactory;
    protected $friendsResourceModel;


    public function __construct(
        Action\Context $context,
                // TODO: Add your repository or model/resourceModel classes here
        \Overdose\LessonOne\Model\FriendsFactory $friendsFactory,
        \Overdose\LessonOne\Model\ResourceModel\Friends $friendsResourceModel
    ) {

        parent::__construct($context);
        // TODO: Assign them to the protected variable, so that child classes can access it
        $this->friendsFactory = $friendsFactory;
        $this->friendsResourceModel = $friendsResourceModel;
    }
}

and Edit.php in *\Overdose\AdminPanel\Controller\Adminhtml\Index*

<?php
namespace Overdose\AdminPanel\Controller\Adminhtml\Index;

use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Backend\App\Action;
use Magento\Framework\Controller\ResultFactory;


class Edit extends AbstractController
{

    public function execute()
    {
        $adminPage = $this->resultFactory->create('page');

        $adminPage->getConfig()->getTitle()->prepend(__('Friend form'));

        $entityId = $this->getRequest()->getParam('id');
        //echo ($entityId);
     
        return  $adminPage;


    }
}

1
0

When you develop any frontend side things keep open your browser console.

If you see endless spinner on admin pages, basically it means something not working. So try to open browser console and catch the info's.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.