Magento – How to we create a form at front-end using UI component Magento 2

formsfrontendmagento-2.1uicomponent

I am looking to create a form at storefront using UI component. When I create xml file in Ui component folder It throwing an error 

Fatal error: Call to a member function getRequestFieldName() on null in /opt/lampp/htdocs/magento2.1.7/vendor/magento/module-ui/Component/Form.php on line 61

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">

</form>

For Now I just have created a simple form tag to check the working. So, I just want to ask, do Magento allow to create a UI form at storefront.
If yes then what do I need to do. I am on Magento 2.1.7.

Best Answer

I wrote a blog post about adding uiComponents such as admin grid to frontend here http://magefoo.com/building-an-admin-grid-in-the-front-end-of-magento-2/

also it shows you how to build form on frontend with uiComponents here: https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-form.html

You would add the tag <uiComponent name="example_name"/> in your layout file like the example below:

#app/code/Dford/Geoip/view/frontend/layout/geoip_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Customer Login History</title>
        <css src="Dford_Geoip::css/backend.css" />
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="geoip_grid" />
        </referenceContainer>
    </body>
</page>

The uiComponent will be a new xml file under the app/code/Dford/Geoip/view/frontend/ui_component/ directory called geoip_grid.xml (or the name you named your uiComponent in your tag in layout file

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="context" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
        <argument name="namespace" xsi:type="string">geoip_grid</argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">geoip_grid.dford_geoip_grid_data_source</item>
            <item name="deps" xsi:type="string">geoip_grid.dford_geoip_grid_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">geoip_columns</item>
    </argument>
    <dataSource name="dford_geoip_grid_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Dford\Geoip\Ui\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">dford_geoip_grid_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">customer_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="geoip/index/index"/>
                    <item name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">customer_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>
    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsProvider" xsi:type="string">geoip_grid.geoip_grid.geoip_columns</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">geoip_grid.geoip_grid.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.filters</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="provider" xsi:type="string">geoip_grid.geoip_grid.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">geoip_grid.geoip_grid.geoip_columns.${ $.index }:visible</item>
                    </item>
                </item>
            </item>
        </argument>
    </filters>
    <columns name="geoip_columns">
        <selectionsColumn name="customer_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">customer_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="ip_address">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">desc</item>
                    <item name="label" xsi:type="string" translate="true">IP Address</item>
                </item>
            </argument>
        </column>
        <column name="user_agent">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">desc</item>
                    <item name="label" xsi:type="string" translate="true">User Agent</item>
                </item>
            </argument>
        </column>
        <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="sorting" xsi:type="string">desc</item>
                    <item name="label" xsi:type="string" translate="true">Logged In Date</item>
                </item>
            </argument>
        </column>
    </columns>
    <paging name="listing_paging">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">geoip_grid.geoip_grid.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">geoip_grid.geoip_grid.dford_geoip_columns.customer_id</item>
            </item>
        </argument>
    </paging>
</listing>

In your di.xml you would create your dataProvider like below

# app/code/Dford/Geoip/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <virtualType name="Dford\Geoip\Model\Resource\Collection" type="Dford\Geoip\Ui\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">dford_geoip_data</argument>
            <argument name="resourceModel" xsi:type="string">Dford\Geoip\Model\ResourceModel\Geoip</argument>
        </arguments>
    </virtualType>
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="dford_geoip_grid_data_source" xsi:type="string">Dford\Geoip\Model\Resource\Collection</item>
            </argument>
        </arguments>
    </type> 
    <type name="Magento\Framework\App\Action\AbstractAction">
         <plugin name="dford_geoip_app_action_dispatchController_context_plugin" type="Dford\Geoip\Plugin\App\Action\Context" sortOrder="15"/>
    </type>
</config>
Related Topic