How to Use UI Grid Component on the Front End in Magento 2

How to Use UI Grid Component on the Front End in Magento 2

There are plenty examples of such a wonderful UI component as grid on the administrator part of the site. Using grid on the front end allows us to quickly enable paging, sorting and filtering via standard Magento functionality without having to invent something new. However, you will encounter a lack of less, fonts and an ajax data request error for the grid.

It is going to look like this:

1

You can use our UiGrid module to solve this problem quickly. The module is available at github.com.

To use the module, specify the dependency in the file etc/module.xml:

Add CSS on the page with the grid:

Ajax data requests from the admin side go at URL mui/index/render.

This does not suit us, that is why we need to change the URL to your controller in the app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml file:

Inherit the controller from:

Now the grid should look as usual:

2 (1)

In the example, the administrator can manage notes for customers. Customers can view notes and delete them. The examples are available at github.com.

Note that in order for a user to see not all the records, but only his own, you need to create your DataProvider and indicate it in ui_component/{your_route}.xml.

Ui_component: app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml.

Model

We specify filter conditions in the data provider: app/code/Vendor/Module/Model/DataProvider.php.

Done. Now we have a full grid from the front end, in which a customer can see only his own notes:

3
That is it concerning UI grid component in Magento 2, we hope you will easily implement the article’s material into your Magento 2 development process.



8 comments

  1. But it is not running :( Your module from github, no possibility to add note in admin and I can’t check frontend, because probably you didn’t add link into customer account. When I tried your css in my own module, I go error: Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’: Cannot access rules” . Without yours css, knockout works but looks bad :(

  2. Thank you for your comment.
    The table in the admin panel is just an example so that a programmer could compare how it is done on the admin panel and on the front. You can add entries to the database or write functionality in Magento.

    Regarding your second question. The front does not work, the “failed to read the CssRules property from CSSStyleSheet Can not access the rule” error is displayed. If you google, you can see that this is an issue with the Chrome browser, and maybe with one of its extensions. The point is that it’s not a Magento’s problem.

    All the abovementioned was tested on Magento 2.2.3.

  3. I have used above solution and now grid is available on frontend. I have one requirement where i need to add checkbox column in grid so user can select it and save that. I have added column and now column is there.
    I have two questions. One is that how can i put this grid in form, So on submit of form I can get selected rows and another oneis that how can I set selected rows in grid by customer on edit of this form ?
    Please help me.
    Thanks in advance…

  4. Hi Ajay,
    It depends on your code and can take much more time for explanation than implementation. To cut a long story short you are to create the whole form with UI component, not only the grid itself. Also, you need to create your own data provider with grid predefined values to mark required checkboxes.
    The module allows using UI COmponents the same way as you do in the admin panel, please check the official documentation https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html

  5. ok Thank you for reply.
    I have resolved that issue.

    now I am facing one more issue with grid. On frontend admin-icons.woff2 , admin-icons.woff, admin-icons.ttf file is missing.
    How can i add them ?

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *