6

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.

-1

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>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.