I am trying to create a form using Ui Components in the storefront.
For that I have created the following:
A Layout: that I used to call the Form Component.
<!-- magento/app/code/Vendor/ModuleName/view/frontend/layout/catalog_productclass_assign.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="customer_account"/>
<body>
<referenceContainer name="content">
<block name="customer.account.product.classes.assign.listing.header" template="Vendor_ModuleName::assign/header.phtml"/>
<!-- here is how I call the Ui Component -->
<uiComponent name="product_classes_assign_listing_form"/>
<!-- here is how I call the Ui Component -->
<block class="Magento\Customer\Block\Account\Dashboard" name="customer.account.link.back" cacheable="false"/>
</referenceContainer>
</body>
</page>
The Ui Component Form
<!-- // magento/app/code/Vendor/ModuleName/view/frontend/ui_component/product_classes_assign_listing_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">product_classes_assign_listing_form.product_classes_assign_listing_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>
</argument>
<settings>
<buttons>
<button name="save" class="Vendor\ModuleName\Block\Assign\Form\SaveButton"/>
<button name="back">
<url path="*/*/"/>
<class>back</class>
<label translate="true">Back</label>
</button>
</buttons>
<namespace>product_classes_assign_listing_form</namespace>
<dataScope>data</dataScope>
<deps>
<dep>product_classes_assign_listing_form.product_classes_assign_listing_form_data_source</dep>
</deps>
</settings>
<dataSource name="product_classes_assign_listing_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="sample/sample/sample"/>
</settings>
<dataProvider class="Vendor\ModuleName\Ui\DataProvider\Assign\Form\DataProvider" name="product_classes_assign_listing_form_data_source">
<settings>
<primaryFieldName>entity_id</primaryFieldName>
<requestFieldName>entity_id</requestFieldName>
</settings>
</dataProvider>
</dataSource>
<fieldset name="assign_products">
<settings>
<label translate="true" />
</settings>
<!-- This field represents form id and is hidden -->
<field name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">contact</item>
</item>
</argument>
</field>
<field name="name" formElement="input">
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label translate="true">Name</label>
</settings>
</field>
</fieldset>
</form>
A DataProvider
<?php
// magento/app/code/Vendor/ModuleName/Ui/DataProvider/Assign/Form/DataProvider.php
namespace Vendor\ModuleName\Ui\DataProvider\Assign\Form;
use Vendor\ModuleName\Model\ResourceModel\Assign\Listing\CollectionFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param CollectionFactory $collectionFactory
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* @return array
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();
$this->loadedData = [];
foreach ($items as $item) {
$this->loadedData[$item->getId()]['item'] = $item->getData();
}
return $this->loadedData;
}
}
And defined a collection in the DI to be used as a data source
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="product_classes_assign_listing_data_source" xsi:type="string">Vendor\ModuleName\Model\ResourceModel\Assign\Listing\Collection</item>
</argument>
</arguments>
</type>
</config>
The Problem: The form renders and I can see the fields BUT the buttons do not show.
Also, this renders a blank form and that is fine to add new information BUT (let say I also want to edit information using this form), how can I tell the form the ids of the row I want to edit?
