3

I've created an uiComponent form but there is no save button. In every form coponent example there is no save buttons and all the examples with save button that I found are FULLY created in Magento 1 way (I mean they are all generated by a php block).

I created a normal button using code below which looks like save one but I can't make him save the form.

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

If there is no other way to make the savable form as UI Component then what's the point of their partial existance?

3

2 Answers 2

7

You can declare buttons inside the

<argument name="data" xsi:type="array"> tag as this

    <item name="buttons" xsi:type="array">
        <item name="back" xsi:type="string">[Namespace]\[Module]\Block\Adminhtml\Button\Back</item>
        <item name="delete" xsi:type="string">[Namespace]\[Module]\Block\Adminhtml\Button\Delete</item>
        <item name="save" xsi:type="string">[Namespace]\[Module]\Block\Adminhtml\Button\Save</item>
    </item>

You can have additional buttons. As many as you want.
Each class declared inside the 'item' tag must implement the interface Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface.
in the method getButtonData you define how the button looks or behaves

For example, for the back button it can look like this:

public function getButtonData()
{
    return [
        'label' => __('Back'),
        'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
        'class' => 'back',
        'sort_order' => 10
    ];
}

A more detailed example can be found here

5
  • 1
    Hi. This one works but in case edit form component. How to make button define in xml ability dynamic show. I mean sometime you don't want button delete show up in form new create entity!
    – mrtuvn
    Sep 23, 2016 at 9:09
  • in case you don't want a button to appear just make the method getButtonData return an empty array []
    – Marius
    Sep 23, 2016 at 9:17
  • 1
    Oh i see it now! But i have a curius question. Before 2.1 and early version 1. We use block classes for create form It can easy customize class form container for add many things but in latest new ui-form come with more files seperate. I dont know how to edit form like old way? For example new form don't have form tag right? How it can be post data
    – mrtuvn
    Sep 23, 2016 at 9:28
  • 1
    In your custom extensions you can still create forms the old way, but this is not recommended anymore. Use this as an example you can use that has ui components. github.com/tzyganu/Magento2SampleModule
    – Marius
    Sep 23, 2016 at 10:20
  • 1
    How do i can populate data to field into ui-form? Data inserted in db (such as id) i want to put it in my field hidden in form-component! I can't find example in anywhere to do this!
    – mrtuvn
    Sep 24, 2016 at 3:10
2

Step-1: Create Generic.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Cms\Api\PageRepositoryInterface;

class Generic
{
    protected $context;
    protected $pageRepository;

    public function __construct(
        Context $context,
        PageRepositoryInterface $pageRepository
    ) {
        $this->context = $context;
        $this->pageRepository = $pageRepository;
    }

    public function getUrl($route = '', $params = [])
    {
        return $this->context->getUrlBuilder()->getUrl($route, $params);
    }
}

Step-2: Create Back.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

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

class Back extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Back'),
            'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
            'class' => 'back',
            'sort_order' => 10,
        ];
    }

    public function getBackUrl()
    {
        return $this->getUrl('*/*/');
    }
}

Step-3: Create Reset.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

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

class Reset implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Reset'),
            'class' => 'reset',
            'on_click' => 'location.reload();',
            'sort_order' => 30,
        ];
    }
}

Step-4: Create Delete.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Buttons

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class Delete extends Generic implements ButtonProviderInterface
{
    protected $context;

    public function __construct(
        Context $context
    ) {
        $this->context = $context;
    }

    public function getButtonData()
    {
        $data = [];
        $id = $this->context->getRequest()->getParam('id');
        if ($id) {
            $data = [
                'label' => __('Delete'),
                'class' => 'delete',
                'on_click' => 'deleteConfirm(\'' . __(
                    'Are you sure you want to delete this?'
                ) . '\', \'' . $this->getDeleteUrl() . '\')',
                'sort_order' => 20,
            ];
        }
        return $data;
    }

    public function getDeleteUrl()
    {
        $id = $this->context->getRequest()->getParam('id');
        return $this->getUrl('*/*/delete', ['id' => $id]);
    }
}

Step-5: Create Save.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Ui\Component\Control\Container;

class Save extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => [
                    'buttonAdapter' => [
                        'actions' => [
                            [
                                'targetName' => 'your_form_ui_component_name.your_form_ui_component_name',
                                'actionName' => 'save',
                                'params' => [
                                    false,
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }

}

Step-6: In your Form Ui-Component file at app/code/VendoreName/ModuleName/view/adminhtml/ui_component add below code:

<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="buttons" xsi:type="array">
            <item name="back" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\Back</item>
            <item name="delete" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\Delete</item>
            <item name="reset" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\Reset</item>
            <item name="save" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\Save</item>
        </item>
        ............................................................................................................
    </argument>
    <dataSource name="your_form_data_source_name">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">VendoreName\ModuleName\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">your_form_data_source_name</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="submit_url" xsi:type="url" path="*/*/save"/>
              </item>
            </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>
    ................................................................................................................
</form>

After adding above files run below command:

php bin/magento s:up
php bin/magento c:c
1
  • thanks this help me
    – Mujahidh
    Aug 22, 2022 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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