Skip to content

Custom uiComponent missing form element

Hi fellow developers,

I am loading a form uicomponent through ajax in a modal in the backend of Magento 2.4.
The problem is that i dont have an element around my uiComponent.

The way i am loading the form is as follows.

The controller (Vendor/ModuleName/Controller/Adminhtml/Section/index.php):

<?php
declare(strict_types=1);

namespace VendorModuleControllerAdminhtmlSection;

use MagentoFrameworkAppActionHttpGetActionInterface;
use MagentoFrameworkViewResultLayout as LayoutResult;
use MagentoFrameworkViewResultLayoutFactory;

class Index implements HttpGetActionInterface
{
    public function __construct(
        private readonly LayoutFactory $layoutFactory,
    ) {
    }

    public function execute(): LayoutResult
    {
        /** @var LayoutResult $layoutFactory */
        return $this->layoutFactory->create();
    }
}

The layout xml (Vendor/ModuleName/view/adminhtml/layout/vendor_module_section_index.php):

<?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>
        <container name="content">
            <uiComponent name="vendor_module_sections"/>
        </container>
    </body>
</page>

And the uiComponent that gets loaded:

<?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="component" xsi:type="string">Magento_Ui/js/form/form</item>
            <item name="provider" xsi:type="string">
                vendor_module_sections.vendor_module_sections_data_source
            </item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <ns>vendor_module_sections</ns>
        <dataScope>data</dataScope>
        <deps>
            <dep>vendor_module_sections.vendor_module_sections_data_source</dep>
        </deps>
        <buttons>
            <button name="save" class="VendorModuleBlockAdminhtmlSectionButtonSave"/>
        </buttons>
    </settings>
    <dataSource name="vendor_module_sections_data_source" component="Magento_Ui/js/form/provider">
        <settings>
            <updateUrl path="mui/index/render"/>
            <submitUrl path="vendor_module/section/save"/>
            <filterUrlParams>
                <param name="store_id">*</param>
            </filterUrlParams>
        </settings>
        <dataProvider name="vendor_module_sections_data_source"
                      class="VendorModuleModelDataProvider">
            <settings>
                <primaryFieldName>section_id</primaryFieldName>
                <requestFieldName>scope</requestFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <dynamicRows name="vendor_module_sections">
        <settings>
            <addButtonLabel>Add section</addButtonLabel>
            <additionalClasses>
                <class name="admin__field-wide">true</class>
            </additionalClasses>
            <componentType>dynamicRows</componentType>
            <recordTemplate>record</recordTemplate>
            <deleteProperty>false</deleteProperty>
        </settings>
        <container name="record" component="Magento_Ui/js/dynamic-rows/record">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="isTemplate" xsi:type="boolean">true</item>
                    <item name="is_collection" xsi:type="boolean">true</item>
                    <item name="showFallbackReset" xsi:type="boolean">false</item>
                </item>
            </argument>
            <field name="section_id" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                    <visible>false</visible>
                    <dataType>text</dataType>
                    <label>ID</label>
                </settings>
            </field>
            <field name="title" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                    <dataType>text</dataType>
                    <label>Title</label>
                </settings>
            </field>
            <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                    <additionalClasses>
                        <class name="data-grid-actions-cells">true</class>
                    </additionalClasses>
                    <componentType>actionDelete</componentType>
                    <dataType>text</dataType>
                </settings>
            </actionDelete>
        </container>
    </dynamicRows>
</form>

When i click the button that does a request to /admin/vendor_module/section/index/scope/stores/?isAjax=true the uiComponent gets successfully loaded. the only problem that resists is i am missing a element around the uiComponent form.
Anyone has an idea how i can add the Form element?