{"id":12639,"date":"2017-03-16T13:31:02","date_gmt":"2017-03-16T10:31:02","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=12639"},"modified":"2019-09-18T17:45:57","modified_gmt":"2019-09-18T15:45:57","slug":"a-category-chooser-in-magento-2-backend","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/a-category-chooser-in-magento-2-backend.html","title":{"rendered":"A \u201cCategory Chooser\u201d in Magento 2 Backend"},"content":{"rendered":"\n

Let’s imagine, you need to create a category chooser for magento admin panel. For example, this might be necessary in the following cases:<\/p>\n

1. To be used for some standard form as follows:<\/p>\n

$fieldset->addField(\r\n\t'category_chooser',\r\n\t'[Vendor]\\[Modul]\\Block\\Adminhtml\\[Chooser]',\r\n\t[\r\n    \t'name' => 'category_chooser',\r\n    \t'label' => __('Categories'),\r\n    \t'title' => __('Categories'),\r\n    \t'required' => true\r\n\t]\r\n);\r\n<\/pre>\n
2. For some backend configurations:<\/p>\n
<field id=\"category_chooser\" translate=\"label\" sortOrder=\"20\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n    <label>Categories<\/label>\r\n    <frontend_model>[Vendor]\\[Modul]\\Block\\Adminhtml\\[Chooser]<\/frontend_model>\r\n<\/field>\r\n<\/pre>\n
3. Or, like in my case, for some widgets:<\/p>\n
<parameter name=\"category_chooser\" xsi:type=\"block\" visible=\"true\" required=\"true\" sort_order=\"10\">\r\n\t<label translate=\"true\">Categories<\/label>\r\n\t<block class=\"[Vendor]\\[Modul]\\Block\\Adminhtml\\[Chooser]\" \/>\r\n<\/parameter>\r\n<\/pre>\n
So, let’s consider how it is possible to arrange that. Magento source code offers us several solutions but we have selected the simplest one to use. First off, we write down the code for the element itself:<\/p>\n
\tprotected function _elementHtml()\r\n\t{\r\n    \t$element = $this->_element;\r\n    \t$htmlId  = $element->getId();\r\n        $data\t= $element->getData();\r\n \r\n        $data['after_element_js']   = $this->_afterElementJs();\r\n        $data['after_element_html'] = $this->_afterElementHtml();\r\n        $data['readonly']       \t= 'readonly';\r\n \r\n        $objectManager  = \\Magento\\Framework\\App\\ObjectManager::getInstance();\r\n        $elementFactory = $objectManager->get('\\Magento\\Framework\\Data\\Form\\Element\\Factory');\r\n \r\n    \t$htmlItem = $elementFactory->create('text', ['data' => $data]);\r\n  \t  $htmlItem\r\n            ->setId(\"{$htmlId}\")\r\n            ->setForm($element->getForm())\r\n            ->addClass('required-entry')\r\n            ->addClass('entities');\r\n \r\n        $return  = <<<HTML\r\n            <div id=\"{$htmlId}-container\" class=\"chooser_container\">\r\n                {$htmlItem->getElementHtml()}\r\n            <\/div>\r\nHTML;\r\n \r\n    \treturn $return;\r\n\t}\r\n<\/pre>\n
<\/a>
\"\"
Magento Custom Development<\/h3>
Take your online store to the next level with BelVG Magento custom development<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
But that is only a form’s input. Now, let’s write down some html and javascript code to output the chooser in the backend and let it perform properly:<\/p>\n
\tprotected function _afterElementHtml()\r\n\t{\r\n    \t$element = $this->_element;\r\n        $htmlId  = $element->getId();\r\n \r\n        $return  = <<<HTML\r\n        \t<a href=\"javascript:void(0)\" onclick=\"MultiCategoryChooser.displayChooser('{$htmlId}-container')\" class=\"widget-option-chooser\" title=\"{__('Open Chooser')}\">\r\n                <img src=\"{$this->getViewFileUrl('images\/rule_chooser_trigger.gif')}\" alt=\"{__('Open Chooser')}\" \/>\r\n            <\/a>\r\n        \t<a href=\"javascript:void(0)\" onclick=\"MultiCategoryChooser.hideChooser('{$htmlId}-container')\" title=\"{__('Apply')}\">\r\n                <img src=\"{$this->getViewFileUrl('images\/rule_component_apply.gif')}\" alt=\"{__('Apply')}\">\r\n            <\/a>\r\n \r\n            <div class=\"chooser\"><\/div>\r\nHTML;\r\n \r\n    \treturn $return;\r\n\t}\r\n \r\n\tprotected function _afterElementJs()\r\n\t{\r\n        $chooserUrl = $this->getUrl('adminhtml\/widget_instance\/categories', []);\r\n        $element\t= $this->_element;\r\n        $htmlId \t= $element->getId();\r\n \r\n    \t$return = <<<HTML\r\n            <script>\r\n\t            require([\r\n                    'jquery',\r\n                    'Magento_Ui\/js\/modal\/alert',\r\n                    \"prototype\"\r\n                ], function (jQuery, alert) {\r\n                    var MultiCategoryChooser = {\r\n                        displayChooser : function(chooser) {\r\n                        \tchooser  = $(chooser).down('div.chooser');\r\n                        \tentities = chooser.up('div.chooser_container').down('input[type=\"text\"].entities').value;\r\n                        \tpostParameters = {selected: entities};\r\n                        \turl = '{$chooserUrl}';\r\n \r\n                        \tif (chooser && url) {\r\n                            \tif (chooser.innerHTML == '') {\r\n                                \tnew Ajax.Request(url, {\r\n                                        method \t: 'post',\r\n                                        parameters : postParameters,\r\n                                        onSuccess  : function(transport) {\r\n                                        \ttry {\r\n                                                if (transport.responseText) {\r\n                                                    Element.insert(chooser, transport.responseText);\r\n                                                    chooser.removeClassName('no-display');\r\n                                                    chooser.show();\r\n                                                }\r\n                                        \t} catch (e) {\r\n                                                alert({\r\n     \t                                           content: 'Error occurs during loading chooser.'\r\n                                                });\r\n                                        \t}\r\n                                    \t}\r\n                                    });\r\n                            \t} else {\r\n                                    chooser.removeClassName('no-display');\r\n                                    chooser.show();\r\n                            \t}\r\n                        \t}\r\n     \t               },\r\n                        hideChooser : function(chooser) {\r\n                        \tchooser = $(chooser).down('div.chooser');\r\n                        \tif (chooser) {\r\n                                chooser.addClassName('no-display');\r\n                            \tchooser.hide();\r\n                        \t}\r\n                        },\r\n                        checkCategory : function(event) {\r\n                        \tnode  \t= event.memo.node;\r\n                        \tcontainer = event.target.up('div.chooser_container');\r\n                        \tvalue \t= container.down('input[type=\"text\"].entities').value.strip();\r\n                        \tif (node.attributes.checked) {\r\n                            \tif (value) ids = value.split(',');\r\n                            \telse ids = [];\r\n                            \tif (-1 == ids.indexOf(node.id)) {\r\n                                    ids.push(node.id);\r\n                                    container.down('input[type=\"text\"].entities').value = ids.join(',');\r\n                            \t}\r\n                        \t} else {\r\n                            \tids = value.split(',');\r\n                            \twhile (-1 != ids.indexOf(node.id)) {\r\n                                    ids.splice(ids.indexOf(node.id), 1);\r\n                                    container.down('input[type=\"text\"].entities').value = ids.join(',');\r\n                            \t}\r\n                        \t}\r\n                        }\r\n  \t              }\r\n \r\n                    window.MultiCategoryChooser = MultiCategoryChooser;\r\n                    jQuery(function() {\r\n                        var container = $('{$htmlId}-container');\r\n                        if (container) {\r\n                            container.up(0).down('.control-value').hide();\r\n                        }\r\n \r\n                        Event.observe(document, 'node:changed', function(event){\r\n                            MultiCategoryChooser.checkCategory(event);\r\n                        });\r\n                        Event.observe(document, 'category:beforeLoad', function(event) {\r\n                        \tcontainer = event.target.up('div.chooser_container');\r\n                        \tvalue \t= container.down('input[type=\"text\"].entities').value.strip();\r\n                            event.memo.treeLoader.baseParams.selected = value;\r\n                        });\r\n                    });\r\n                });\r\n            <\/script>\r\nHTML;\r\n \r\n    \treturn $return;\r\n\t}\r\n<\/pre>\n
So, this is the Multi Category Chooser. But what if we need only one category? For such case there is a ready-made solution available, so we do not need to invent anything new:<\/p>\n
<parameter name=\"category\" xsi:type=\"block\" visible=\"true\" required=\"true\" sort_order=\"10\">\r\n\t<label translate=\"true\">Category<\/label>\r\n\t<block class=\"Magento\\Catalog\\Block\\Adminhtml\\Category\\Widget\\Chooser\">\r\n        <data>\r\n            <item name=\"button\" xsi:type=\"array\">\r\n                <item name=\"open\" xsi:type=\"string\" translate=\"true\">Select Category...<\/item>\r\n            <\/item>\r\n        <\/data>\r\n    <\/block>\r\n<\/parameter>\r\n<\/pre>\n
This solution I have applied for one of my widgets, but it is also possible to adapt it for configuring various form elements.<\/p>\n
<\/a>
\"groups_catalog\"
Groups Catalog for Magento 2<\/h3>
Take your online store to the next level with BelVG module<\/p>Download here<\/span><\/a><\/div><\/div><\/div>\n
Want to keep track of your store’s unregistered users? Download our free Magento Guests Catalog<\/a> extension.<\/p>\n\n","protected":false},"excerpt":{"rendered":"Let’s imagine, you need to create a category chooser for magento admin panel. For example, …","protected":false},"author":22,"featured_media":12641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389,524],"tags":[],"class_list":["post-12639","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","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