{"id":15615,"date":"2018-04-24T14:42:42","date_gmt":"2018-04-24T12:42:42","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=15615"},"modified":"2021-02-18T09:38:13","modified_gmt":"2021-02-18T07:38:13","slug":"ui-grid-component-on-the-front-end-in-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/ui-grid-component-on-the-front-end-in-magento-2.html","title":{"rendered":"How to Use UI Grid Component on the Front End in Magento 2"},"content":{"rendered":"\n

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.<\/p>\n

<\/p>\n

It is going to look like this:<\/p>\n

\"1\"<\/p>\n

You can use our UiGrid module to solve this problem quickly. The module is available at github.com<\/a>.<\/p>\n

To use the module, specify the dependency in the file etc\/module.xml<\/strong>:<\/p>\n

<sequence>\r\n     <module name=\"Belvg_UiGrid\"\/>\r\n  <\/sequence><\/pre>\n
Add CSS on the page with the grid:<\/p>\n
<head>\r\n   <css src=\"Belvg_UiGrid::css\/backend.css\"\/>\r\n<\/head><\/pre>\n
Ajax data requests from the admin side go at URL mui<\/strong>\/index\/render<\/strong>.<\/p>\n
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<\/strong> file:<\/p>\n
<item name=\"update_url\" path=\"{your-route}\/controller\/index\" xsi:type=\"url\"\/><\/pre>\n
Inherit the controller from:<\/p>\n
\\Belvg\\UiGrid\\Controller\\Mui\\Index\r\n<?php\r\nnamespace Vendor\\Module\\Controller\\Index;\r\nclass Index extends \\Belvg\\UiGrid\\Controller\\Mui\\Index\r\n{\r\n}<\/pre>\n
Now the grid should look as usual:<\/p>\n
\"2<\/p>\n
In the example, the administrator can manage notes for customers. Customers can view notes and delete them. The examples are available at github.com<\/a>.<\/p>\n
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<\/strong>.<\/p>\n
Ui_component: app\/code\/Vendor\/Module\/view\/frontend\/ui_component\/{your_route}.xml.<\/strong><\/p>\n
<?xml version=\"1.0\" ?>\r\n…\r\n<argument name=\"class\" xsi:type=\"string\">Belvg\\Note\\Model\\DataProvider<\/argument>\r\n…<\/pre>\n
Model<\/span><\/strong><\/h2>\n
We specify filter conditions in the data provider: app\/code\/Vendor\/Module\/Model\/DataProvider.php.<\/strong><\/p>\n
<?php\r\nnamespace Belvg\\Note\\Model;\r\nuse Magento\\Framework\\Api\\FilterBuilder;\r\nuse Magento\\Framework\\Api\\Search\\SearchCriteriaBuilder;\r\nuse Magento\\Framework\\App\\RequestInterface;\r\nuse Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\Reporting;\r\nclass DataProvider extends \\Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider\r\n{\r\n   protected $customerSession;\r\n   \/**\r\n    * @param \\Magento\\Customer\\Model\\Session $customerSession\r\n    * @param string $name\r\n    * @param string $primaryFieldName\r\n    * @param string $requestFieldName\r\n    * @param Reporting $reporting\r\n    * @param SearchCriteriaBuilder $searchCriteriaBuilder\r\n    * @param RequestInterface $request\r\n    * @param FilterBuilder $filterBuilder\r\n    * @param array $meta\r\n    * @param array $data\r\n    *\/\r\n   public function __construct(\r\n       \\Magento\\Customer\\Model\\Session $customerSession,\r\n       $name,\r\n       $primaryFieldName,\r\n       $requestFieldName,\r\n       Reporting $reporting,\r\n       SearchCriteriaBuilder $searchCriteriaBuilder,\r\n       RequestInterface $request,\r\n       FilterBuilder $filterBuilder,\r\n       array $meta = [],\r\n       array $data = []\r\n   ) {\r\n       $this->customerSession = $customerSession;\r\n       parent::__construct(\r\n           $name,\r\n           $primaryFieldName,\r\n           $requestFieldName,\r\n           $reporting,\r\n           $searchCriteriaBuilder,\r\n           $request,\r\n           $filterBuilder,\r\n           $meta,\r\n           $data\r\n       );\r\n   }\r\n   protected function prepareUpdateUrl()\r\n   {\r\n       $this->data['config']['filter_url_params']['customer_id'] = $this->customerSession->getCustomer()->getId();\r\n       parent::prepareUpdateUrl();\r\n   }\r\n}<\/pre>\n
Done. Now we have a full grid from the front end, in which a customer can see only his own notes:<\/p>\n
\"3\"<\/a>
\nThat 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.<\/p>\n\n","protected":false},"excerpt":{"rendered":"UI Grid Component in Front End Magento 2","protected":false},"author":82,"featured_media":15622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[389,473,524],"tags":[],"class_list":["post-15615","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento2-development","category-magento-front-end-developer","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t