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;
}
}