0

I am new to magento and trying to create a custom form in adminhtml using UIComponent. I can display the form but I am a bit confused on how to put up a submit button in the form.

I have gone through the internet and found multiple ways, out of which these are the thigngs I tried.

ONE

<item name="config" xsi:type="array">
    <item name="submit_url" xsi:type="string">customer/index/save</item>
    <item name="validate_url" xsi:type="string">rehan_testing/save/datas</item>
</item>

TWO

<item name="buttons" xsi:type="array">
    <item name="add" xsi:type="array">
        <item name="name" xsi:type="string">add</item>
        <item name="label" xsi:type="string" translate="true">Save Post</item>
        <item name="class" xsi:type="string">primary</item>
        <item name="url" xsi:type="string">rehan_testing/save/datas</item>
    </item>
</item

Which one is the right way? The latter renders a actuall Button on the form but the former one doesn't.

And when I clicked the button It shows 404 Page Not Found error.

Can someone point out the mistake?

This is my complete UIComponent

<?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">rehan_testing_create_form.rehan_testing_create_form_data_source</item>
            <item name="deps" xsi:type="string">rehan_testing_create_form.rehan_testing_create_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Employee Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">rehan_testing_create_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Save Post</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">rehan_testing/save/datas</item>
            </item>
        </item>
    </argument>
    <dataSource name="rehan_testing_create_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Rehan\Testing\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">rehan_testing_create_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>
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="string">customer/index/save</item>
                <item name="validate_url" xsi:type="string">customer/index/validate</item>
            </item>
        </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="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">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">name</item>
                </item>
            </argument>
        </field>
        <field name="email">
            <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">Email</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">email</item>
                </item>
            </argument>
        </field>
        <field name="contact_number">
            <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">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">contact_number</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>
0

Following is some part of my code that I used to create custom Database table, UI form and UI grid.

app/code/Anshu/Custom/view/adminhtml/ui_component/custom_edit_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">custom_edit_form.edit_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Custom Information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button name="save" class="Anshu\Custom\Block\Adminhtml\Custom\Edit\SaveButton"/>
            <button name="back" class="Anshu\Custom\Block\Adminhtml\Custom\Edit\BackButton"/>
        </buttons>
        <namespace>custom_edit_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>custom_edit_form.edit_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="edit_form_data_source">
        <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>
        <settings>
            <submitUrl path="custom/custom/save"/>
        </settings>
        <dataProvider class="Anshu\Custom\Model\DataProvider" name="edit_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="custom_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Information</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="name" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">customForm</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Name</label>
                <dataScope>name</dataScope>
            </settings>
        </field>
        <field name="description" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">customForm</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Description</label>
                <dataScope>description</dataScope>
            </settings>
        </field>
    </fieldset>
</form>

app/code/Anshu/Custom/Block/Adminhtml/Custom/Edit/SaveButton.php

<?php

namespace Anshu\Custom\Block\Adminhtml\Custom\Edit;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

/**
 * Class SaveButton
 */
class SaveButton extends GenericButton implements ButtonProviderInterface
{
    /**
     * @return array
     */
    public function getButtonData()
    {
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => ['button' => ['event' => 'save']],
                'form-role' => 'save',
            ],
            'sort_order' => 20,
        ];
    }
}

submitUrl in UI component xml maps to app/code/Anshu/Custom/Controller/Adminhtml/Custom/Save.php

<?php

namespace Anshu\Custom\Controller\Adminhtml\Custom;

----

class Save extends Action
{
    ----

    public function execute()
    {
        // my custom code
    }
}

This is not complete code, but you can take reference of it and modify it according to your requirement.

0

You can add button like this :

<item name="buttons" xsi:type="array">
    <item name="add" xsi:type="array">
        <item name="name" xsi:type="string">add</item>
        <item name="label" xsi:type="string" translate="true">Save Post</item>
        <item name="class" xsi:type="string">primary</item>
        <item name="url" xsi:type="string">adminroutename/controller/action</item>
    </item>
</item>

And define admin route in module/etc/adminhtml/routes.xml

  • This is making a GET request. There is any way to do a POST request? – Gabriel Fernandes Jul 16 at 19:27

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.