How To Add Websites Dropdown in Magento 2.x Admin Form and Grid By UI Component

There are following below steps need to follow to add websites drop down in Magento 2 Custom module Admin Entry Form & Grid Listing by using UI Component.

Here we are considering you have already created custom module by using UI Component.

Step [1] – Create Store.php file inside Admin UI Component Listing Column

File Path as below

app/code/ Mage2db/John/Ui/Component/Listing/Column/Store.php

<?php
namespace Mage2db\John\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
use Magento\Cms\Block\Adminhtml\Page\Grid\Renderer\Action\UrlBuilder;
use Magento\Framework\Pricing\PriceCurrencyInterface;
use Magento\Store\Model\StoreManagerInterface;
/**
 * Class ProductActions
 */
class Store extends Column
{

    /**
     * @var UrlInterface
     */
    protected $urlBuilder;
    /**
     * @var PriceCurrencyInterface
     */
    protected $priceFormatter;
    /**
     * @var actionUrlBuilder
     */
    protected $actionUrlBuilder;
    /**
     * @var $_storeManager
     */
    protected $_storeManager;


    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        UrlBuilder $actionUrlBuilder,
        PriceCurrencyInterface $priceFormatter,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->actionUrlBuilder = $actionUrlBuilder;
        $this->priceFormatter = $priceFormatter;
        $this->_storeManager = $storeManager;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
			
            foreach ($dataSource['data']['items'] as & $item) {
	
 	            $Websites = $this->_storeManager->getWebsites();
				
                $WebsiteName="-";
			
                foreach ($Websites as $website) {
                    if($website->getId()==$item['website_id']){
                      /*put your custom column name instead of website_id */
                        $WebsiteName = $website->getName();
                    }
                }
                $item[$this->getData('name')] = $WebsiteName;
            }
        }
        return $dataSource;
    }
}

Step [2] – Add below code in Admin UI Component Grid Listing.

File Path as below

app/code/ Mage2db/John/view/adminhtml/ui_component/UIGridListing.xml

<column name="website_id" class="Mage2db\John\Ui\Component\Listing\Column\Store">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="component" xsi:type="string">Mage2db_John/js/ui/grid/columns/html</item>
<item name="align" xsi:type="string">left</item>
 <item name="sortable" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Store View</item>
<item name="sortOrder" xsi:type="number">60</item>
 </item>
 </argument>
</column>

Step [3] – Add below code in Admin UI Component Grid Entry Form

File Path as below

app/code/ Mage2db/John/view/adminhtml/ui_component/UIGridEntryForm.xml

<field name="website_id" formElement="select">
   <settings>
   <dataType>text</dataType>
    <label translate="true">Website</label>
    <dataScope>data_title</dataScope>
   </settings>
 <formElements>
  <select>
  <settings>
 <options>
 <option name="1" xsi:type="array">
    <item name="value" xsi:type="string">1</item>
    <item name="label" xsi:type="string">Main Website</item>
 </option>
 <option name="2" xsi:type="array">
 <item name="value" xsi:type="string">2</item>
 item name="label" xsi:type="string">Firstwebsite</item>
 </option>
 <option name="3" xsi:type="array">
 <item name="value" xsi:type="string">3</item>
 <item name="label" xsi:type="string">secondsite</item>
 </option>
 </options>
 <caption translate="true">-- Select Website --</caption>
 </settings>
 </select>
 </formElements>
 </field> 

Finally Website drop down has been added in Magento 2 Admin Grid Entry Form as well as It’s corressponding value displaying in Magento 2 Admin Grid Listing by using UI Component.

Leave a Reply

Your email address will not be published. Required fields are marked *