1

I want to call the categories into my custom admin form for admin. How can I call that?

enter image description here

I want to show all categories into my custom form in admin and it will allow selecting only one category.

I used the below code but it is showing nothing in my form what is wrong here?

<referenceContainer name="content">
    <block class="Name\Module\Block\Adminhtml\Category\DuplicateForm\Categories" name="name.dupcat.categorydropdown">
        <uiComponent name="categories_form"/>
    </block>
</referenceContainer>

-- view/adminhtml/ui_component/categories_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">
    <fieldset name="general">
        <field name="categories" component="Name/Module/js/select-category" sortOrder="20" formElement="select" >            
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="showCheckbox" xsi:type="boolean">true</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
                <label translate="true">Select Category</label>
                <dataScope>categories</dataScope>
                <componentType>field</componentType>
                <listens>
                    <link name="${ $.nametdupcat }.${ $.nametdupcat }:responseData">setParsed</link>
                </listens>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Name\Module\Ui\Component\Form\Category\Options"/>
                    </settings>
                </select>
            </formElements>
        </field>
    </fieldset>        
</form>

-- \Ui\Component\Form\Category\Options.php

<?php
namespace Name\Module\Ui\Component\Form\Category;

use Magento\Framework\Data\OptionSourceInterface;
use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory as CategoryCollectionFactory;
use Magento\Framework\App\RequestInterface;

class Options implements OptionSourceInterface
{
    protected $categoryCollectionFactory;
    protected $request;
    protected $categoryTree;

    public function __construct(
        CategoryCollectionFactory $categoryCollectionFactory,
        RequestInterface $request
    ) {
        $this->categoryCollectionFactory = $categoryCollectionFactory;
        $this->request = $request;
    }

    public function toOptionArray()
    {
        return $this->getCategoryTree();
    }

    protected function getCategoryTree()
    {
        if ($this->categoryTree === null) {
            $collection = $this->categoryCollectionFactory->create();

            $collection->addAttributeToSelect('name');

            foreach ($collection as $category) {
                $categoryId = $category->getEntityId();
                if (!isset($categoryById[$categoryId])) {
                    $categoryById[$categoryId] = [
                        'value' => $categoryId
                    ];
                }
                $categoryById[$categoryId]['label'] = $category->getName();
            }
            $this->categoryTree = $categoryById;
        }
        return $this->categoryTree;
    }
}

-- view\adminhtml\web\js\select-category.js

define([
'Magento_Ui/js/form/element/ui-select'
], function (Select) {
'use strict';
return Select.extend({
    setParsed: function (data) {
        var option = this.parseData(data);
        if (data.error) {
            return this;
        }
        this.options([]);
        this.setOption(option);
        this.set('newOption', option);
    },

    parseData: function (data) {
        return {
            value: data.category.entity_id,
            label: data.category.name
        };
    }
});
});

Your Answer

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

Browse other questions tagged or ask your own question.