{"id":419178,"date":"2024-01-25T06:35:34","date_gmt":"2024-01-25T06:35:34","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=419178"},"modified":"2024-07-10T06:07:22","modified_gmt":"2024-07-10T06:07:22","slug":"add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/","title":{"rendered":"Add UI-Select with search filter using the block method on the Admin form in Magento 2"},"content":{"rendered":"\n

Here we learn how to add or create a UI-Select field using the block method on the Admin form.<\/p>\n\n\n\n

Let\u2019s start step by step.
You must have installed Magento 2 custom Module<\/a> on which you are going to implement this.<\/p>\n\n\n\n

Step 1: <\/strong>We need to create the layout file to define the admin form in view\/adminhtml\/layout\/webkulblog_account_edit.xml<\/strong> :<\/p>\n\n\n\n

\n
<?xml version=\"1.0\"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"admin-2columns-left\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <update handle=\"styles\"\/>\n    <update handle=\"editor\"\/>\n    <body>\n        <referenceBlock name=\"menu\">\n            <action method=\"setActive\">\n               <argument name=\"itemId\" xsi:type=\"string\">\n                        Webkul_Custom:webkulblog\n                    <\/argument>\n        <\/action>\n        <\/referenceBlock>\n        <referenceBlock name=\"page.title\">\n            <action method=\"setTitleClass\">\n            <argument name=\"class\" xsi:type=\"string\">\n                        complex\n                    <\/argument>\n        <\/action>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n<\/div><\/div>\n\n\n\n
Step 2:<\/strong> Create the block file, Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit<\/code>.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Custom\\Block\\Adminhtml\\Account;\n\nclass Edit extends \\Magento\\Backend\\Block\\Widget\\Form\\Container\n{\n    \/**\n     * Initialize\n     *\n     * @return void\n     *\/\n    protected function _construct()\n    {\n        $this->_objectId = 'entity_id';\n        $this->_blockGroup = 'Webkul_Custom';\n        $this->_controller = 'adminhtml_account';\n        parent::_construct();\n        if ($this->_isAllowedAction('Webkul_Custom::accountedit')) {\n            $this->buttonList->update('save', 'label', __('Save Account'));\n        } else {\n            $this->buttonList->remove('save');\n        }\n        $this->buttonList->remove('delete');\n        $this->buttonList->remove('reset');\n    }\n\n    \/**\n     * Retrieve text for header element depending on loaded Group\n     *\n     * @return \\Magento\\Framework\\Phrase\n     *\/\n    public function getHeaderText()\n    {\n            return __('New Blog Account');\n    }\n\n    \/**\n     * Check permission for passed action\n     *\n     * @param string $resourceId\n     * @return bool\n     *\/\n    protected function _isAllowedAction($resourceId)\n    {\n        return $this->_authorization->isAllowed($resourceId);\n    }\n}<\/pre>\n\n\n\n
Step 3:<\/strong> Create the block file, Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit<\/code>\\Tabs.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit;\n\nclass Tabs extends \\Magento\\Backend\\Block\\Widget\\Tabs\n{\n    \/**\n     * @param \\Magento\\Backend\\Block\\Template\\Context $context\n     * @param \\Magento\\Framework\\Json\\EncoderInterface $jsonEncoder\n     * @param \\Magento\\Backend\\Model\\Auth\\Session $authSession\n     * @param array $data\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Framework\\Json\\EncoderInterface $jsonEncoder,\n        \\Magento\\Backend\\Model\\Auth\\Session $authSession,\n        array $data = []\n    ) {\n        parent::__construct($context, $jsonEncoder, $authSession, $data);\n    }\n\n    \/**\n     * Construct\n     *\n     * @return void\n     *\/\n    protected function _construct()\n    {\n        parent::_construct();\n        $this->setId('blog_account_tab');\n        $this->setDestElementId('edit_form');\n        $this->setTitle(__('Blog Account Information'));\n    }\n\n    \/**\n     * Prepare Layout\n     *\n     * @return $this\n     *\/\n    protected function _prepareLayout()\n    {\n        $block = \\Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit\\Tab\\BlogAccount::class;\n        $this->addTab(\n            'blog_account_info',\n            [\n                'label' => __('Blog Account'),\n                'content' => $this->getLayout()->createBlock($block, 'blog_account_info')->toHtml()\n            ]\n        );\n        return parent::_prepareLayout();\n    }\n}<\/pre>\n\n\n\n
Step 4:<\/strong> Create the block file, Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit<\/code>\\Tab\\BlogAccount.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit\\Tab;\n\nuse Magento\\Backend\\Block\\Widget\\Form\\Generic;\nuse Magento\\Backend\\Block\\Widget\\Tab\\TabInterface;\nuse Webkul\\Custom\\Block\\Adminhtml\\Widget\\Form\\Element\\FilterSelect;\n\nclass BlogAccount extends Generic implements TabInterface\n{\n\n    \/**\n     * @param \\Magento\\Backend\\Block\\Template\\Context $context\n     * @param \\Magento\\Framework\\Registry $registry\n     * @param \\Magento\\Framework\\Data\\FormFactory $formFactory\n     * @param array $data\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Framework\\Registry $registry,\n        \\Magento\\Framework\\Data\\FormFactory $formFactory,\n        array $data = []\n    ) {\n        parent::__construct($context, $registry, $formFactory, $data);\n    }\n\n    \/**\n     * Prepare form\n     *\n     * @return $this\n     *\/\n    protected function _prepareForm()\n    {\n        $model = $this->_coreRegistry->registry('business_list_model');\n        $form = $this->_formFactory->create();\n        $fieldset = $form->addFieldset(\n            'base_fieldset',\n            ['legend' => __('Blog Account'), 'class' => 'fieldset-wide']\n        );\n\n        $fieldset->addType('filterselect', FilterSelect::class);\n        if ($model->getId()) {\n            $fieldset->addField('entity_id', 'hidden', ['name' => 'entity_id']);\n        }\n\n        $fieldset->addField(\n            'user_name',\n            'text',\n            [\n                'name' => 'user_name',\n                'label' => __('User Name'),\n                'title' => __('User Name'),\n                'required' => true,\n                'note' => __('Set the unique name for account.')\n            ]\n        );\n        $fieldset->addField(\n            'access_data',\n            'filterselect', \/\/custom type\n            [\n                'name' => 'access_data',\n                'label' => __('Access data'),\n                'options' => $this->getOptions(),\n                'multiple' => true,\n                'required' => true,\n            ]\n        );\n\n        if (!empty($model->getData())) {\n            $data = $model->getData();\n            if (isset($data['access_data'])) {\n                $data['access_data'] = explode(',', $data['access_data'] ?? '');\n            }\n            $form->setValues($data);\n        }\n        $this->setForm($form);\n        return parent::_prepareForm();\n    }\n\n    \/**\n     * Get options\n     *\n     * @return array\n     *\/\n    public function getOptions()\n    {\n        return [\n            ["value" => "1", "label" => "Customer"],\n            ["value" => "2", "label" => "Admin"],\n            ["value" => "3", "label" => "Seller"],\n            ["value" => "4", "label" => "Guest"],\n        ];\n    }\n\n    \/**\n     * Prepare label for tab\n     *\n     * @return \\Magento\\Framework\\Phrase\n     *\/\n    public function getTabLabel()\n    {\n        return __('Blog Account');\n    }\n\n    \/**\n     * Prepare title for tab\n     *\n     * @return \\Magento\\Framework\\Phrase\n     *\/\n    public function getTabTitle()\n    {\n        return __('Blog Account');\n    }\n\n    \/**\n     * CanShowTab\n     *\n     * @return bool\n     *\/\n    public function canShowTab()\n    {\n        return true;\n    }\n\n    \/**\n     * IsHidden\n     *\n     * @param bool\n     *\/\n    public function isHidden()\n    {\n        return false;\n    }\n\n    \/**\n     * Check permission for passed action\n     *\n     * @param string $resourceId\n     * @return bool\n     *\/\n    protected function _isAllowedAction($resourceId)\n    {\n        return $this->_authorization->isAllowed($resourceId);\n    }\n}<\/pre>\n\n\n\n
Step-5:<\/strong>  Add the custom type in block form using $fieldset->addType(‘filterselect’, FilterSelect::class);<\/strong>, This custom type’s “filterselect<\/strong>” field data handling and rendering by block file :  Webkul\\Custom\\Block\\Adminhtml\\Widget\\Form\\Element\\FilterSelect.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Block\\Adminhtml\\Widget\\Form\\Element;\n\nuse Magento\\Framework\\Data\\Form\\Element\\AbstractElement;\nuse Magento\\Framework\\Data\\Form\\Element\\Factory as ElementFactory;\nuse Magento\\Framework\\Data\\Form\\Element\\CollectionFactory;\nuse Magento\\Framework\\Escaper;\nuse Magento\\Framework\\Serialize\\SerializerInterface;\n\n\/**\n * Class FilterSelect.\n *\/\nclass FilterSelect extends AbstractElement\n{\n    \/**\n     * @var \\Magento\\Framework\\View\\LayoutInterface\n     *\/\n    protected $layout;\n\n    \/**\n     * @var SerializerInterface\n     *\/\n    protected $serializer;\n\n    \/**\n     * Constructor.\n     *\n     * @param ElementFactory    $elementFactory\n     * @param CollectionFactory $collectionFactory\n     * @param Escaper           $escaper\n     * @param \\Magento\\Framework\\View\\LayoutInterface $layout\n     * @param SerializerInterface $serializer\n     * @param array             $data\n     *\/\n    public function __construct(\n        ElementFactory $elementFactory,\n        CollectionFactory $collectionFactory,\n        Escaper $escaper,\n        \\Magento\\Framework\\View\\LayoutInterface $layout,\n        SerializerInterface $serializer,\n        array $data = []\n    ) {\n        parent::__construct($elementFactory, $collectionFactory, $escaper, $data);\n        $this->layout = $layout;\n        $this->serializer = $serializer;\n        $this->setType('filterselect');\n    }\n\n    \/**\n     * @inheritdoc\n     *\/\n    public function getElementHtml()\n    {\n        $html = $this->layout->createBlock(\\Magento\\Framework\\View\\Element\\Template::class)\n        ->setTemplate('Webkul_Custom::business\/filterselect.phtml')\n        ->setTemplateConfiguration($this->getCustomConfiguration())\n        ->toHtml();\n        $html .= $this->getAfterElementHtml();\n        return $html;\n    }\n\n    \/**\n     * Get custom configuration\n     *\n     * @return string\n     *\/\n    public function getCustomConfiguration()\n    {\n        $data = $this->getData();\n        $defultConfiguration = $this->getDefaultConfiguration();\n        foreach($defultConfiguration as $key => $configuration){\n            if(isset($data[$key])) {\n                $defultConfiguration[$key] = $data[$key];\n            }\n        }\n        return $this->serializer->serialize($defultConfiguration);\n    }\n\n    \/**\n     * Get defaults configuration\n     *\n     * @return array\n     *\/\n    public function getDefaultConfiguration()\n    {\n        $data = $this->getData();\n        $configurationData =[\n            "options" => [],\n            "listVisible" => false,\n            "value" => [],\n            'filterOptions' => true,\n            "chipsEnabled" => true,\n            "multiple" => true,\n            "showFilteredQuantity" => true,\n            "showCheckbox" => false,\n            "filterRateLimit" => 500,\n            "closeBtn" => true,\n            "closeBtnLabel" => __('Done'),\n            "quantityPlaceholder" => __('options'),\n            "hoverClass" => '_hover',\n            "selectedPlaceholders" => [\n                "defaultPlaceholder" => __('Select...'),\n                "lotPlaceholders" => __('Selected')\n            ],\n            "component" => "Magento_Ui\/js\/form\/element\/ui-select",\n            "template" => "Webkul_Custom\/filterselect", \/\/ custom template file\n            "elementData" => [\n                "name" =>  $this->getName(),\n                "id" => $this->getHtmlId(),\n            ],\n            "required_entry" => isset($data['required']) ? $data['required'] : false\n       ];\n        return  $configurationData;\n    }\n}<\/pre>\n\n\n\n
Step 6:<\/strong> Create a phtml template file which is mentioned in getElementHtml() method of Step 5<\/strong>, view\/adminhtml\/templates\/business<\/strong>\/filterselect.phtml<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n?>\n                <div data-bind="scope: 'customFilterSelect'">\n                    <!-- ko template: getTemplate() --><!-- \/ko -->\n                <\/div>\n                <script type="text\/x-magento-init">\n                    {\n                            "*": {\n                                "Magento_Ui\/js\/core\/app": {\n                                    "components": {\n                                        "customFilterSelect": <?= \/* @noEscape *\/ $block->getTemplateConfiguration() ?>\n                                    }\n                                }\n                            }\n                        }\n                    <\/script><\/pre>\n\n\n\n
Step 7:<\/strong> Create a custom template<\/a> file which is mentioned in getDefaultConfiguration() method of Step 5<\/strong>, view\/adminhtml\/web\/template\/filterselect.html<\/strong><\/p>\n\n\n\n
<div\n class="admin__action-multiselect-wrap action-select-wrap"\n tabindex="0"\n data-bind="\n attr: {\n     id: uid\n },\n css: {\n     _active: listVisible,\n     'admin__action-multiselect-tree': isTree()\n },\n event: {\n     focusin: onFocusIn,\n     focusout: onFocusOut,\n     keydown: keydownSwitcher\n },\n outerClick: outerClick.bind($data)\n ">\n   <!-- ko if: (!hasData() && multiple) -->\n   <input type="hidden"\n   data-bind="\n   attr: {\n       id: elementData.id,\n       name: elementData.name+'[]',\n       value: null\n   }\n ">\n  <!-- \/ko -->\n <!-- ko ifnot: chipsEnabled -->\n <div\n     class="action-select admin__action-multiselect"\n     data-role="advanced-select"\n     data-bind="\n     css: {_active: multiselectFocus},\n     click: function(data, event) {\n         toggleListVisible(data, event)\n     }\n ">\n <div class="admin__action-multiselect-text"\n      data-role="selected-option"\n      data-bind="text: setCaption()">\n <\/div>\n<!-- ko foreach: { data: getSelected(), as: 'option'}  -->\n<input type="hidden"\n    data-bind="\n    attr: {\n        id: $parent.elementData.id + value,\n        name: $parent.elementData.name +'[]',\n        value: value\n    }\n">\n<!-- \/ko -->\n <\/div>\n <!-- \/ko -->\n <!-- ko if: chipsEnabled -->\n <div\n     class="action-select admin__action-multiselect"\n     data-role="advanced-select"\n     data-bind="\n     css: {_active: multiselectFocus},\n     click: function(data, event) {\n         toggleListVisible(data, event)\n     }\n ">\n <div class="admin__action-multiselect-text"\n      data-bind="\n         visible: !hasData(),\n         i18n: selectedPlaceholders.defaultPlaceholder\n ">\n <\/div>\n <!-- ko foreach: { data: getSelected(), as: 'option'}  -->\n     <span class="admin__action-multiselect-crumb">\n         <span data-bind="text: label">\n         <\/span>\n         <button\n                 class="action-close"\n                 type="button"\n                 data-action="remove-selected-item"\n                 tabindex="-1"\n                 data-bind="click: $parent.removeSelected.bind($parent, value)\n         ">\n             <span class="action-close-text" translate="'Close'"><\/span>\n         <\/button>\n     <\/span>\n     <input type="hidden"\n         data-bind="\n         attr: {\n             id: $parent.elementData.id + value,\n             name: $parent.elementData.name +'[]',\n             value: value\n         }\n     ">\n <!-- \/ko -->\n <\/div>\n <!-- \/ko -->\n <div class="action-menu"\n  data-bind="css: { _active: listVisible }\n ">\n <!-- ko if: filterOptions -->\n <div class="admin__action-multiselect-search-wrap">\n     <input\n             class="admin__control-text admin__action-multiselect-search"\n             data-role="advanced-select-text"\n             type="text"\n             data-bind="\n         event: {\n             keydown: filterOptionsKeydown\n         },\n         attr: {id: uid+2},\n         valueUpdate: 'afterkeydown',\n         value: filterInputValue,\n         hasFocus: filterOptionsFocus\n         ">\n     <label\n             class="admin__action-multiselect-search-label"\n             data-action="advanced-select-search"\n             data-bind="attr: {for: uid+2}\n     ">\n     <\/label>\n     <div if="itemsQuantity"\n          data-bind="text: itemsQuantity"\n          class="admin__action-multiselect-search-count">\n     <\/div>\n <\/div>\n <!-- \/ko -->\n <ul class="admin__action-multiselect-menu-inner _root"\n     data-bind="\n         event: {\n            scroll: function(data, event){onScrollDown($data, event)}\n         }\n     ">\n     <!-- ko foreach: { data: options, as: 'option'}  -->\n     <li class="admin__action-multiselect-menu-inner-item _root"\n         data-bind="css: { _parent: $data.optgroup }"\n         data-role="option-group">\n         <div class="action-menu-item"\n              data-bind="\n                 css: {\n                     _selected: $parent.isSelected(option.value),\n                     _hover: $parent.isHovered(option, $element),\n                     _expended: $parent.getLevelVisibility($data),\n                     _unclickable: $parent.isLabelDecoration($data),\n                     _last: $parent.addLastElement($data),\n                     '_with-checkbox': $parent.showCheckbox\n                 },\n                 click: function(data, event){\n                     $parent.toggleOptionSelected($data, event);\n                 },\n                 clickBubble: false\n         ">\n             <!-- ko if: $data.optgroup && $parent.showOpenLevelsActionIcon-->\n             <div class="admin__action-multiselect-dropdown"\n                  data-bind="\n                     click: function(event){\n                         $parent.openChildLevel($data, $element, event);\n                     },\n                     clickBubble: false\n                  ">\n             <\/div>\n             <!-- \/ko-->\n             <!--ko if: $parent.showCheckbox-->\n             <input\n                     class="admin__control-checkbox"\n                     type="checkbox"\n                     tabindex="-1"\n                     data-bind="attr: { 'checked': $parent.isSelected(option.value) }">\n             <!-- \/ko-->\n             <label class="admin__action-multiselect-label">\n                 <span data-bind="text: option.label"><\/span>\n                 <span\n                         if="$parent.getPath(option)"\n                         class="admin__action-multiselect-item-path"\n                         data-bind="text: $parent.getPath(option)"><\/span>\n             <\/label>\n         <\/div>\n         <!-- ko if: $data.optgroup -->\n         <!-- ko template: {name: $parent.optgroupTmpl, data: {root: $parent, current: $data}} -->\n         <!-- \/ko -->\n         <!-- \/ko-->\n     <\/li>\n     <!-- \/ko -->\n <\/ul>\n <!-- ko if: $data.closeBtn -->\n <div class="admin__action-multiselect-actions-wrap">\n     <button class="action-default"\n             data-action="close-advanced-select"\n             type="button"\n             data-bind="click: outerClick">\n         <span translate="closeBtnLabel"><\/span>\n     <\/button>\n <\/div>\n <!-- \/ko -->\n <\/div>\n <\/div>\n  <!-- ko if: ($data.getSelected().length == 0 && required_entry) -->\n  <input type="hidden"\n  data-bind="\n  attr: {\n    name: 'custom_required',\n    class: 'required-entry',\n    value: null\n  }\n">\n <!-- \/ko --><\/pre>\n\n\n\n
Step 8:<\/strong> Create a block file for form, Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit\\Form.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit;\n\nclass Form extends \\Magento\\Backend\\Block\\Widget\\Form\\Generic\n{\n    \/**\n     * Init form\n     *\n     * @return void\n     *\/\n    protected function _construct()\n    {\n        parent::_construct();\n        $this->setId('blog_account_form');\n        $this->setTitle(__('Blog Account Information'));\n    }\n\n    \/**\n     * Prepare form\n     *\n     * @return $this\n     *\/\n    protected function _prepareForm()\n    {\n        $model = $this->_coreRegistry->registry('business_list_model');\n        $form = $this->_formFactory->create(\n            [\n                'data' => [\n                    'id' => 'edit_form',\n                    'enctype' => 'multipart\/form-data',\n                    'action' => $this->getData('action'),\n                    'method' => 'post'\n                ]\n            ]\n        );\n        if (!empty($model->getData())) {\n            $data = $model->getData();\n            if (isset($data['access_data'])) {\n                $data['access_data'] = explode(',', $data['access_data'] ?? '');\n            }\n            $form->setValues($data);\n        }\n        $form->setUseContainer(true);\n        $this->setForm($form);\n        return parent::_prepareForm();\n    }\n}<\/pre>\n\n\n\n
Step 9:<\/strong> Create a controller file for layout webkulblog_account_edit.xml<\/strong> , Webkul\\Custom\\Controller\\Adminhtml\\Account\\Edit.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Controller\\Adminhtml\\Account;\n\nuse Magento\\Framework\\Controller\\ResultFactory;\nuse Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit as AccountEdit;\nuse Webkul\\Custom\\Block\\Adminhtml\\Account\\Edit\\Tabs;\n\nclass Edit extends \\Magento\\Backend\\App\\Action\n{\n    \/**\n     * @var string\n     *\/\n    public const ADMIN_RESOURCE = "Webkul_Custom::accountedit";\n\n    \/**\n     * @var \\Magento\\Framework\\Registry\n     *\/\n    private $registry;\n\n    \/**\n     * @var \\Webkul\\Custom\\Model\\BusinessListFactory\n     *\/\n    protected $businessListFactory;\n\n    \/**\n     * @param \\Magento\\Backend\\App\\Action\\Context $context\n     * @param \\Magento\\Framework\\Registry $registry\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Framework\\Registry $registry,\n        \\Webkul\\Custom\\Model\\BusinessListFactory $businessListFactory\n    ) {\n        $this->registry = $registry;\n        $this->businessListFactory = $businessListFactory;\n        parent::__construct($context);\n    }\n\n    \/**\n     * Execute\n     *\n     * @return \\Magento\\Backend\\Model\\View\\Result\\Page\n     *\/\n    public function execute()\n    {\n        try {\n            $params = $this->getRequest()->getParams();\n            $businessListModel = $this->businessListFactory->create();\n            if (isset($params['entity_id']) && $params['entity_id']) {\n                $businessListModel->load($params['entity_id']);\n                if (!$businessListModel->getId()) {\n                    $this->messageManager->addError(__('Requested account currently not available.'));\n                    $resultRedirect = $this->resultRedirectFactory->create();\n                    return $resultRedirect->setPath('*\/*\/');\n                }\n            }\n            $this->registry->register('business_list_model', $businessListModel);\n            $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);\n            $resultPage->setActiveMenu('Webkul_Custom::webkulblog');\n            $resultPage->getConfig()->getTitle()->prepend(__('Account'));\n            $resultPage->addContent($resultPage->getLayout()->createBlock(AccountEdit::class));\n            $resultPage->addLeft($resultPage->getLayout()->createBlock(Tabs::class));\n            return $resultPage;\n        } catch (\\Exception $e) {\n            $this->messageManager->addError($e->getMessage());\n            $this->_redirect('*\/*\/');\n        }\n    }\n    \/**\n     * Check for is allowed\n     *\n     * @return boolean\n     *\/\n    protected function _isAllowed()\n    {\n        return $this->_authorization->isAllowed(self::ADMIN_RESOURCE);\n    }\n}<\/pre>\n\n\n\n
Step 10:<\/strong> Create a controller file for the save selected option, Webkul\\Custom\\Controller\\Adminhtml\\Account\\Save.php<\/strong><\/p>\n\n\n\n
<?php\n\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Custom\n * @author    Webkul\n * @copyright Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Webkul\\Custom\\Controller\\Adminhtml\\Account;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Save extends Action\n{\n    \/**\n     * @var Magento\\Framework\\View\\Result\\PageFactory\n     *\/\n    protected $resultPageFactory;\n\n    \/**\n     * @var Webkul\\Custom\\Model\\BusinessListFactory *\/\n    protected $businessListFactory;\n\n    \/**\n     * @var \\Magento\\Framework\\Registry\n     *\/\n    protected $coreRegistry = null;\n\n    \/**\n     * @param Context $context\n     * @param PageFactory $resultPageFactory\n     * @param \\Webkul\\Custom\\Model\\BusinessListFactory $businessListFactory\n     * @param \\Magento\\Framework\\Registry $coreRegistry\n     *\/\n    public function __construct(\n        Context $context,\n        PageFactory $resultPageFactory,\n        \\Webkul\\Custom\\Model\\BusinessListFactory $businessListFactory,\n        \\Magento\\Framework\\Registry $coreRegistry\n    ) {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n        $this->businessListFactory = $businessListFactory;\n        $this->coreRegistry = $coreRegistry;\n    }\n\n    \/**\n     * Save User Data\n     *\n     * @return \\Magento\\Framework\\App\\Response\\Http\n     *\/\n    public function execute()\n    {\n        $resultRedirect = $this->resultRedirectFactory->create();\n        $data = $this->getRequest()->getParams();\n        if (isset($data['user_name'])) {\n            $userAcccessIds = '';\n            if (isset($data['access_data'])) {\n                $userAcccessIds = implode(',', $data['access_data']);\n            }\n            $data['access_data'] = $userAcccessIds;\n            $businessList = $this->businessListFactory->create();\n            $businessList->setData($data)->save();\n            $id = $businessList->getId();\n            $this->coreRegistry->register("entity_id", $id);\n            $this->messageManager->addSuccess("User data has been saved.");\n            return $resultRedirect->setPath('*\/*\/edit', ['entity_id' => $id]);\n        } else {\n            $this->messageManager->addError(\n                __('Something went wrong while saving the user data.')\n            );\n            return $resultRedirect->setPath('*\/*\/edit');\n        }\n    }\n}<\/pre>\n\n\n\n
After this, a ui-select with a search filter using the block method will be displayed on your form.<\/p>\n\n\n\n
\"Screenshot-2024-01-23T201658.071\"<\/figure>\n\n\n\n
Change custom type UI select  element configuration in Step 4<\/strong>: <\/p>\n\n\n\n
Note:<\/strong>  Custom field element configuration changed according to the mentioned configuration in getDefaultConfiguration()<\/strong> method of Step 5<\/strong> file.<\/p>\n\n\n\n
 $fieldset->addField(\n            'access_data', \/\/Element Id\n            'filterselect', \/\/custom type\n            [\n                'name' => 'access_data',\n                'label' => __('Access data'),\n                'options' => $this->getOptions(),\n                'multiple' => true,\n                'required' => true,\n            ] \/\/ In array mentioned configuration of element\n        );<\/pre>\n\n\n\n
Meanwhile Please try the above example and If you have any Queries then please ask in the comment section below.<\/p>\n\n\n\n
Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"
Here we learn how to add or create a UI-Select field using the block method on the Admin form. Let\u2019s start step by step.You must have installed Magento 2 custom Module on which you are going to implement this. Step 1: We need to create the layout file to define the admin form in view\/adminhtml\/layout\/webkulblog_account_edit.xml […]<\/a><\/p>\n","protected":false},"author":590,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[15264,3307,2070,15261,15263],"class_list":["post-419178","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-blog-form","tag-custom-type-field-in-form-magento-2","tag-magento2","tag-ui-select","tag-ui-select-with-filter-2"],"yoast_head":"\nAdd UI-Select with search filter using the block method<\/title>\n<meta name=\"description\" content=\"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add UI-Select with search filter using the block method\" \/>\n<meta property=\"og:description\" content=\"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-25T06:35:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-10T06:07:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png\" \/>\n<meta name=\"author\" content=\"Nitish Kumar Upadhyay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nitish Kumar Upadhyay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\"},\"author\":{\"name\":\"Nitish Kumar Upadhyay\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/dc2d643eb440a59aa7d72c1150b9ed09\"},\"headline\":\"Add UI-Select with search filter using the block method on the Admin form in Magento 2\",\"datePublished\":\"2024-01-25T06:35:34+00:00\",\"dateModified\":\"2024-07-10T06:07:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\"},\"wordCount\":292,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png\",\"keywords\":[\"Blog Form\",\"custom type field in form magento 2\",\"Magento2\",\"ui select\",\"Ui Select with filter\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\",\"name\":\"Add UI-Select with search filter using the block method\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png\",\"datePublished\":\"2024-01-25T06:35:34+00:00\",\"dateModified\":\"2024-07-10T06:07:22+00:00\",\"description\":\"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071.png\",\"width\":1398,\"height\":780,\"caption\":\"Screenshot-2024-01-23T201658.071\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add UI-Select with search filter using the block method on the Admin form in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/dc2d643eb440a59aa7d72c1150b9ed09\",\"name\":\"Nitish Kumar Upadhyay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/54d626b859687e935e7a2e6cee7e868245ab9b8d61c3961401c5ce665bbcc6b1?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/54d626b859687e935e7a2e6cee7e868245ab9b8d61c3961401c5ce665bbcc6b1?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nitish Kumar Upadhyay\"},\"description\":\"Nitish, a skilled Software Engineer, excels in Magento Commerce B2B development. Expertise in crafting custom solutions, optimizing workflows, and integrating seamless eCommerce features drives business growth and operational efficiency.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/nitishkumar-upadhyay742\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add UI-Select with search filter using the block method","description":"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Add UI-Select with search filter using the block method","og_description":"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.","og_url":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-01-25T06:35:34+00:00","article_modified_time":"2024-07-10T06:07:22+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png","type":"","width":"","height":""}],"author":"Nitish Kumar Upadhyay","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nitish Kumar Upadhyay","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/"},"author":{"name":"Nitish Kumar Upadhyay","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/dc2d643eb440a59aa7d72c1150b9ed09"},"headline":"Add UI-Select with search filter using the block method on the Admin form in Magento 2","datePublished":"2024-01-25T06:35:34+00:00","dateModified":"2024-07-10T06:07:22+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/"},"wordCount":292,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png","keywords":["Blog Form","custom type field in form magento 2","Magento2","ui select","Ui Select with filter"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/","name":"Add UI-Select with search filter using the block method","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071-1200x670.png","datePublished":"2024-01-25T06:35:34+00:00","dateModified":"2024-07-10T06:07:22+00:00","description":"Here we learn how to add or create a UI-Select field using the block method on the Admin form in Magento 2.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-23T201658.071.png","width":1398,"height":780,"caption":"Screenshot-2024-01-23T201658.071"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/add-ui-select-with-search-filter-using-the-block-method-on-the-admin-form-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add UI-Select with search filter using the block method on the Admin form in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/dc2d643eb440a59aa7d72c1150b9ed09","name":"Nitish Kumar Upadhyay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/54d626b859687e935e7a2e6cee7e868245ab9b8d61c3961401c5ce665bbcc6b1?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/54d626b859687e935e7a2e6cee7e868245ab9b8d61c3961401c5ce665bbcc6b1?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nitish Kumar Upadhyay"},"description":"Nitish, a skilled Software Engineer, excels in Magento Commerce B2B development. Expertise in crafting custom solutions, optimizing workflows, and integrating seamless eCommerce features drives business growth and operational efficiency.","url":"https:\/\/webkul.com\/blog\/author\/nitishkumar-upadhyay742\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/590"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=419178"}],"version-history":[{"count":19,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419178\/revisions"}],"predecessor-version":[{"id":452217,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419178\/revisions\/452217"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=419178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=419178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=419178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}