Creating form on frontend using UI Component . Buttons not showing up

Viewed 537

I'm trying to create a custom form on the frontend homepage using UI Component, but buttons not showing up. I've created a custom module for this. Can someone advice ? is this right way to use ui components on frontend?

cms_index_index.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
           <uiComponent name="frontpage_form"/>
       </referenceContainer>
   </body>
</page>

view/frontend/ui_component/frontpage_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">frontpage_form.frontpage_form_data_source</item>
           <item name="deps" xsi:type="string">frontpage_form.frontpage_form_data_source</item>
       </item>

       <item name="config" xsi:type="array">
           <item name="component" xsi:type="string">Magento_Ui/js/form/form</item>
           <item name="dataScope" xsi:type="string">data</item>
           <item name="namespace" xsi:type="string">frontpage_form</item>
       </item>

       <item name="buttons" xsi:type="array">
           <item name="reset" xsi:type="string">Rocknrollsun\Proform\Block\Buttons\ClearButton</item>
           <item name="save" xsi:type="string">Rocknrollsun\Proform\Block\Buttons\SubmitButton</item>
       </item>

       <item name="template" xsi:type="string">templates/form/collapsible</item>
   </argument>

   <dataSource name="frontpage_form_data_source">
       <argument name="dataProvider" xsi:type="configurableObject">
           <argument name="class" xsi:type="string">Rocknrollsun\Proform\Ui\DataProvider</argument>
           <argument name="name" xsi:type="string">frontpage_form_data_source</argument>
           <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
           <argument name="requestFieldName" xsi:type="string">entity_id</argument>
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="submit_url" xsi:type="url" path="proform/index/submit"/>
               </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>

   <fieldset name="frontpage_form">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="label" xsi:type="string">Amazing UI Component Form</item>
           </item>
       </argument>

       <settings>
           <additionalClasses>
               <class name="frontpage_form">true</class>
           </additionalClasses>
       </settings>

       <field name="name">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="label" xsi:type="string">Name</item>
                   <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">frontpage_form</item>
                   <item name="validation" xsi:type="array">
                       <item name="required-entry" xsi:type="boolean">true</item>
                   </item>
               </item>
           </argument>
       </field>

       <field name="email">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="label" xsi:type="string">Email</item>
                   <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">frontpage_form</item>
                   <item name="validation" xsi:type="array">
                       <item name="required-entry" xsi:type="boolean">true</item>
                   </item>
               </item>
           </argument>
       </field>

       <field name="phone">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="label" xsi:type="string">Phone</item>
                   <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">frontpage_form</item>
                   <item name="validation" xsi:type="array">
                       <item name="required-entry" xsi:type="boolean">true</item>
                   </item>
               </item>
           </argument>
       </field>

       <field name="address">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="label" xsi:type="string">Address</item>
                   <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">frontpage_form</item>
                   <item name="validation" xsi:type="array">
                       <item name="required-entry" xsi:type="boolean">true</item>
                   </item>
               </item>
           </argument>
       </field>

       <field name="myCheckbox" formElement="checkbox">
           <settings>
               <label translate="true">Confirm you're kind human</label>
           </settings>
           <formElements>
               <checkbox>
                   <settings>
                       <prefer>checkbox</prefer>
                       <valueMap>
                           <map name="false" xsi:type="boolean">false</map>
                           <map name="true" xsi:type="boolean">true</map>
                       </valueMap>
                   </settings>
               </checkbox>
           </formElements>
       </field>

       <field name="country_id" formElement="select" sortOrder="10">
           <settings>
               <dataType>text</dataType>
               <label translate="true">Country</label>
               <validation>
                   <rule name="required-entry" xsi:type="boolean">true</rule>
               </validation>
           </settings>
           <formElements>
               <select>
                   <settings>
                       <options class="Rocknrollsun\Proform\Model\Config\Source\CountryList"/>
                   </settings>
               </select>
           </formElements>
       </field>

   </fieldset>
</form>

Also created blocks for buttons

<?php
/**
* @author    Anatolii Palash <anatoly.palash@gmail.com>
*/

declare(strict_types=1);

namespace Rocknrollsun\Proform\Block\Buttons;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Rocknrollsun\Proform\Block\Buttons\GenericButton;

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

       return $data;
   }
}

0 Answers
Related