Magento Question posted in
The official documentation can be found here.

In Magento2 (2.2.5) uicomponent form in frontend, SAVE button not appearing with form

I added uiform in frontend. Form is loading but save button is not appearing. Code details:

1. employee_form.xml code:

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">employee_form.employee_form_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">Assign Product Form</item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
    <item name="spinner" xsi:type="string">uiform_index_columns2</item>
</argument>
<settings>
    <buttons>
        <button name="save" class="CnUiformBlockEmployeeFormSaveButton"/>
        <button name="back">
            <url path="*/*/"/>
            <class>back</class>
            <label translate="true">Back</label>
        </button>
    </buttons>
    <namespace>employee_form</namespace>
    <dataScope>data</dataScope>
    <deps>
        <dep>employee_form.employee_form_data_source</dep>
    </deps>
</settings>
<dataSource name="employee_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="*/*/save"/>
    </settings>
    <dataProvider class="CnUiformModelDataProvider" name="employee_form_data_source">
        <settings>
            <primaryFieldName>id</primaryFieldName>
            <requestFieldName>id</requestFieldName>
        </settings>
    </dataProvider>
</dataSource>

2. DataProvide.php methods code

public function prepareMeta(array $meta) {
    return $meta;
}
public function getData() {
    return [];
}

3. SaveButton.php class code

use MagentoFrameworkViewElementUiComponentControlButtonProviderInterface;

class SaveButton extends GenericButton implements ButtonProviderInterface {

    public function getButtonData() {
        return [
            'label' => __('Save Slide'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => ['button' => ['event' => 'save']],
                'form-role' => 'save',
            ],
            'sort_order' => 90,
        ];
    }
}

4. di.xml

<!--for edit uiform-->
<type name="MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="employee_form_data_source" xsi:type="string">CnUiformModelResourceModelEmployeeCollection</item>
        </argument>
    </arguments>
</type>

enter image description here

=> But, the ui form is loading without SAVE button.

Tags:

2

Answers


  1. 0

    I’ve never implemented IU components on the frontend, but as far as the backend goes, my own forms have the buttons included inside the ‘data’ argument. E.g.

    <argument name="data" xsi:type="array">
    <item name="buttons" xsi:type="array”>
        <item name="save" xsi:type="string">CnUiformBlockEmployeeFormSaveButton</item>
    </item>
</argument>
    Login or Signup to reply.
  2. 0

    For displaying buttons on frontend UI component form. You have to add a Container reference in your layout.

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.main.actions">
            <block class="MagentoFrameworkViewElementTemplate" name="page.actions.toolbar" template="Magento_Backend::pageactions.phtml"/>
        </referenceContainer>
        <referenceContainer name="admin.scope.col.wrap" htmlClass="admin__old" />
        <referenceContainer name="content">
            <uiComponent name="employee_form"/>
        </referenceContainer>
    </body>
</page>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search