0

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.