Question:

UI Component - Only a spinner showing

Wyatt: 2 weeks ago

I am having all kinds of ui_component xml issues. I've got things sorted out from what I think should be working. However, I am just getting a spinner and the page header. Buttons do show up in the upper right if I add them to the file. The grid never shows, though.

<?xml version="1.0"?>
<listing 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">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_listing_data_source</item>
            <item name="deps" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">wundercarparts_makeanoffer_offers_columns</item>
    </argument>
    <dataSource name="wundercarparts_makeanoffer_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">WundercarpartsMakeanofferOffersGridDataProvider</argument>
            <argument name="name" xsi:type="string">wundercarparts_makeanoffer_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">offers_id</argument>
            <argument name="requestFieldName" xsi:type="string">offers_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                </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/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
                <item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
            </item>
        </argument>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="namespace" xsi:type="string">wundercarparts_makeanoffer_offers_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <component name="columns_controls">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsData" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns</item>
                    </item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                </item>
            </argument>
        </component>
        <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns.ids</item>
                </item>
            </argument>
        </exportButton>
        <filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="templates" xsi:type="array">
                        <item name="filters" xsi:type="array">
                            <item name="select" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                                <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                            </item>
                        </item>
                    </item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
                <item name="observers" xsi:type="array">
                    <item name="column" xsi:type="string">column</item>
                </item>
            </argument>
        </filters>
        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns.ids</item>
                    <item name="indexField" xsi:type="string">offers_id</item>
                </item>
            </argument>
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">Delete</item>
                        <item name="url" xsi:type="url" path="wundercarparts_makeanoffer/post/massDelete"/>
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Delete Posts</item>
                            <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected Posts?</item>
                        </item>
                    </item>
                </argument>
            </action>
            <action name="edit">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">edit</item>
                        <item name="label" xsi:type="string" translate="true">Edit</item>
                        <item name="callback" xsi:type="array">
                            <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns_editor</item>
                            <item name="target" xsi:type="string">editSelected</item>
                        </item>
                    </item>
                </argument>
            </action>
        </massaction>
        <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">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns.ids</item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="wundercarparts_makeanoffer_offers_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="editorConfig" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns.ids</item>
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="indexField" xsi:type="string">offers_id</item>
                    <item name="clientConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="wundercarparts_makeanoffer/post/inlineEdit"/>
                        <item name="validateBeforeSave" xsi:type="boolean">false</item>
                    </item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns_editor</item>
                        <item name="target" xsi:type="string">startEdit</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                            <item name="1" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top.bookmarks</item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">55</item>
                    <item name="indexField" xsi:type="string">offers_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="offers_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <column name="first_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">First Name</item>
                </item>
            </argument>
        </column>
        <column name="last_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Last Name</item>
                </item>
            </argument>
        </column>
    </columns>
    <container name="sticky">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
                <item name="toolbarProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.listing_top</item>
                <item name="listingProvider" xsi:type="string">wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_listing.wundercarparts_makeanoffer_offers_columns</item>
            </item>
        </argument>
    </container>
</listing>

Anything else needed, please ask.

Answer:
David: 2 weeks ago

Your Ui component xml contains error. like you haven't defined the Data Source (WundercarpartsMakeanofferOffersGridDataProvider) correctly.

<dataSource name="wundercarparts_makeanoffer_listing_data_source">

        <argument name="class" xsi:type="string">WundercarpartsMakeanofferOffersGridDataProvider</argument>

replace it with your data provider class.

And also post your file name.

Please refer any default ui component in Magento2 or go through the tutorial here :

https://webkul.com/blog/how-to-create-a-grid-using-ui-component/