Magento 2 – Add Custom Section to Product Edit/Add Admin Form

magento2.1.5product-edituicomponent

I'm learning UI component.

I want to add custom section in product edit/add backend form so for that

I've created following files.

vendor/module/view/adminhtml/ui_component/product_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="mobile">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Time</item>
                    <item name="provider" xsi:type="string">product</item>
                    <item name="dataScope" xsi:type="string">data.product</item>
                    <item name="sortOrder" xsi:type="number">2</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="ns" xsi:type="string">product_form</item>
                </item>
            </argument>
            <container name="monday_time_group">
                <argument name="data" xsi:type="array">
                    <item name="type" xsi:type="string">group</item>
                    <item name="config" xsi:type="array">
                        <item name="additionalClasses" xsi:type="string">admin__control-grouped-date</item>
                        <item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
                        <item name="label" xsi:type="string" translate="true">Monday</item>
                        <item name="required" xsi:type="boolean">false</item>
                        <item name="sortOrder" xsi:type="number">220</item>
                        <item name="breakLine" xsi:type="boolean">false</item>
                        <item name="scopeLabel" xsi:type="string">[STORE VIEW]</item>
                    </item>
                </argument>
                <field name="monday_design_from">
                    <argument name="data" xsi:type="array">
                        <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\TimeSetup</item>
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string" translate="true">Monday</item>
                            <item name="additionalClasses" xsi:type="string">admin__field-date</item>
                            <item name="sortOrder" xsi:type="number">230</item>
                            <item name="dataType" xsi:type="string">string</item>
                            <item name="formElement" xsi:type="string">select</item>
                        </item>
                    </argument>
                </field>
                 <field name="monday_design_to">
                    <argument name="data" xsi:type="array">
                        <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\TimeSetup</item>
                        <item name="config" xsi:type="array">
                            <item name="additionalClasses" xsi:type="string">admin__field-date</item>
                            <item name="sortOrder" xsi:type="number">240</item>
                            <item name="dataType" xsi:type="string">string</item>
                            <item name="formElement" xsi:type="string">select</item>
                        </item>
                    </argument>
                </field>
            </container>
        </fieldset>
    </form>

Vendor\Module\Model\Config\Source\TimeSetup.php

<?php
namespace Vendor\Module\Model\Config\Source;

class TimeSetup extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
{

    protected $_optionsData;

    /**
     * getAllOptions
     *
     * @return array
     */
    public function getAllOptions()
    {
        if ($this->_options === null) {
            $this->_options = [
                ['value' => 'one', 'label' => __('one')],
                ['value' => 'two', 'label' => __('two')]
            ];
        }
        return $this->_options;
    }
    final public function toOptionArray()
    {
         return array(
            array('value' => 'one', 'label' => __('one')),
            array('value' => 'two', 'label' => __('two'))
         );
     }
}

It's showing in backend properly as I wanted but when try to save product it's not saving this field value.

Do I need to create Attribute "monday_time_group"?
Is this proper way to do so?
How can I get the value of this in frontend for Product?

UPDATE:

I've created attribute monday_time_group but still not working.

Best Answer

Okay finally I've resolved this by myself here is the full code of my module...

registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0"></module>
</config>

Setup/InstallData.php

<?php

namespace Vendor\Module\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
    private $eavSetupFactory;
    public function __construct(
        EavSetupFactory $eavSetupFactory
    )
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
          \Magento\Catalog\Model\Product::ENTITY,
          "testone",
          [
          'group' => "",
          'label' => "Test One",
          'is_html_allowed_on_front' => true,
          'default' => '1',
          'note' => '',
          'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_STORE,
          'visible' => true,
          'required' => false,
          'user_defined' => false,
          'searchable' => false,
          'filterable' => false,
          'comparable' => false,
          'visible_on_front' => true,
          'visible_in_advanced_search' => false,
          'unique' => false,
          "frontend_class" => "",
          "used_in_product_listing" => true,
          "input" => "select",
          "type" => "varchar",
          "source" => "Vendor\Module\Model\Config\Source\TimeSetup",
          'backend' => 'Magento\Eav\Model\Entity\Attribute\Backend\ArrayBackend'
          ]
      );
        $eavSetup->addAttribute(
          \Magento\Catalog\Model\Product::ENTITY,
          "testtwo",
          [
          'group' => "",
          'label' => "Test Two",
          'is_html_allowed_on_front' => true,
          'default' => '1',
          'note' => '',
          'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_STORE,
          'visible' => true,
          'required' => false,
          'user_defined' => false,
          'searchable' => false,
          'filterable' => false,
          'comparable' => false,
          'visible_on_front' => true,
          'visible_in_advanced_search' => false,
          'unique' => false,
          "frontend_class" => "",
          "used_in_product_listing" => true,
          "input" => "select",
          "type" => "varchar",
          "source" => "Vendor\Module\Model\Config\Source\TimeSetup",
          'backend' => 'Magento\Eav\Model\Entity\Attribute\Backend\ArrayBackend'
          ]
      );
    }
}

Model\Config\Source\TimeSetup.php

<?php
namespace Vendor\Module\Model\Config\Source;

class TimeSetup extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
{

    protected $_optionsData;

    /**
     * getAllOptions
     *
     * @return array
     */
    public function getAllOptions()
    {
        if ($this->_options === null) {
            $this->_options = [
                ['value' => 'one', 'label' => __('one')],
                ['value' => 'two', 'label' => __('two')]
            ];
        }
        return $this->_options;
    }
    final public function toOptionArray()
    {
         return array(
            array('value' => 'one', 'label' => __('one')),
            array('value' => 'two', 'label' => __('two'))
         );
     }
}

view/adminhtml/ui_component/product_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="testingproduct">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Testing Group</item>
                <item name="provider" xsi:type="string">product</item>
                <item name="dataScope" xsi:type="string">data.product</item>
                <item name="sortOrder" xsi:type="number">2</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
                <item name="ns" xsi:type="string">product_form</item>
            </item>
        </argument>
        <container name="testing_group">
            <argument name="data" xsi:type="array">
                <item name="type" xsi:type="string">group</item>
                <item name="config" xsi:type="array">
                    <item name="formElement" xsi:type="string">container</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
                    <item name="label" xsi:type="string" translate="true">Testing Group</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">220</item>
                    <item name="breakLine" xsi:type="boolean">false</item>
                    <item name="scopeLabel" xsi:type="string">[STORE VIEW]</item>
                </item>
            </argument>
            <field name="testone">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\TimeSetup</item>
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">Testing Row</item>
                        <item name="sortOrder" xsi:type="number">230</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="formElement" xsi:type="string">select</item>
                    </item>
                </argument>
            </field>
             <field name="testtwo">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\TimeSetup</item>
                    <item name="config" xsi:type="array">
                        <item name="sortOrder" xsi:type="number">240</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="formElement" xsi:type="string">select</item>
                    </item>
                </argument>
            </field>
        </container>
    </fieldset>
</form>

Using above code, Data saving properly, Only issues I'm facing now is that These attributes are appearing in General section as well in my created custom section which is "Testing Group" so as of now I've hide them from General section using CSS.

Related Solutions

Magento – Add/Edit Product – Append selected attribute value to product title

I have Create An Module For This Purpose. It May be help full for you.

 app\etc\modules\Designo_Productname.xml

<?xml version="1.0"?>
    <config>
        <modules>
            <Designo_Productname>
                <active>true</active>
                <codePool>local</codePool>
                <version>0.1.0</version>
            </Designo_Productname>
        </modules>
</config>

app\code\local\Designo\Productname\etc\config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Designo_Productname>
             <version>0.1.0</version>
        </Designo_Productname>
    </modules>
    <global>
        <helpers>
            <productname>
                <class>Designo_Productname_Helper</class>
            </productname>
        </helpers>
    </global>
    <admin>
        <routers>
             <adminhtml>
                  <args>
                      <modules>
                          <Designo_Productname before="Mage_Adminhtml">Designo_Productname_Adminhtml</Designo_Productname>
                      </modules>
                 </args>
            </adminhtml>
         </routers>
     </admin>
  </config> 

 app\code\local\Designo\Productname\Helper\Data.php

<?php
 class Designo_Productname_Helper_Data extends Mage_Core_Helper_Abstract
 {
 }

app\code\local\Designo\Productname\controllers\Adminhtml\Catalog\ProductController.php

 <?php
 require_once 'Mage/Adminhtml/controllers/Catalog/ProductController.php';
 class Designo_Productname_Adminhtml_Catalog_ProductController extends Mage_Adminhtml_Catalog_ProductController
 {

 public function editAction()
 {
    $productId  = (int) $this->getRequest()->getParam('id');
    $product = $this->_initProduct();
    $productName = $product->getData('name');
    Mage::register('previous_name',$productName);
    $productColor = $product->getAttributeText('color');
    $productBrand = $product->getAttributeText('computer_manufacturers');
    $ProductCompleteName = $productName.' '.$productBrand.' '.$productColor;

    $product->setData('name',$ProductCompleteName);
    if ($productId && !$product->getId()) {
        $this->_getSession()->addError(Mage::helper('catalog')->__('This product no longer exists.'));
        $this->_redirect('*/*/');
        return;
    }

    $this->_title($product->getName());

    Mage::dispatchEvent('catalog_product_edit_action', array('product' => $product));

    $_additionalLayoutPart = '';
    if ($product->getTypeId() == Mage_Catalog_Model_Product_Type::TYPE_CONFIGURABLE
        && !($product->getTypeInstance()->getUsedProductAttributeIds()))
    {
        $_additionalLayoutPart = '_new';
    }

    $this->loadLayout(array(
        'default',
        strtolower($this->getFullActionName()),
        'adminhtml_catalog_product_'.$product->getTypeId() . $_additionalLayoutPart
    ));

    $this->_setActiveMenu('catalog/products');

    if (!Mage::app()->isSingleStoreMode() && ($switchBlock = $this->getLayout()->getBlock('store_switcher'))) {
        $switchBlock->setDefaultStoreName($this->__('Default Values'))
            ->setWebsiteIds($product->getWebsiteIds())
            ->setSwitchUrl(
                $this->getUrl('*/*/*', array('_current'=>true, 'active_tab'=>null, 'tab' => null, 'store'=>null))
            );
    }

    $this->getLayout()->getBlock('head')->setCanLoadExtJs(true);

    $block = $this->getLayout()->getBlock('catalog.wysiwyg.js');
    if ($block) {
        $block->setStoreId($product->getStoreId());
    }

    $this->renderLayout();
}
/**
 * Save product action
 */
public function saveAction()
{
    $storeId        = $this->getRequest()->getParam('store');
    $redirectBack   = $this->getRequest()->getParam('back', false);
    $productId      = $this->getRequest()->getParam('id');
    $isEdit         = (int)($this->getRequest()->getParam('id') != null);

    $data = $this->getRequest()->getPost();
    $data['name'] = Mage::registry('previous_name');
    if ($data) {
        $this->_filterStockData($data['product']['stock_data']);

        $product = $this->_initProductSave();

        try {
            $product->save();
            $productId = $product->getId();

            /**
             * Do copying data to stores
             */
            if (isset($data['copy_to_stores'])) {
                foreach ($data['copy_to_stores'] as $storeTo=>$storeFrom) {
                    $newProduct = Mage::getModel('catalog/product')
                        ->setStoreId($storeFrom)
                        ->load($productId)
                        ->setStoreId($storeTo)
                        ->save();
                }
            }

            $this->_getSession()->addSuccess($this->__('The product has been saved.'));
        } catch (Mage_Core_Exception $e) {
            $this->_getSession()->addError($e->getMessage())
                ->setProductData($data);
            $redirectBack = true;
        } catch (Exception $e) {
            Mage::logException($e);
            $this->_getSession()->addError($e->getMessage());
            $redirectBack = true;
        }
    }

    if ($redirectBack) {
        $this->_redirect('*/*/edit', array(
            'id'    => $productId,
            '_current'=>true
        ));
    } elseif($this->getRequest()->getParam('popup')) {
        $this->_redirect('*/*/created', array(
            '_current'   => true,
            'id'         => $productId,
            'edit'       => $isEdit
        ));
    } else {
        $this->_redirect('*/*/', array('store'=>$storeId));
    }
}

}

Before Install this Module Create Backup of your site and Database. After Install this Module Flush All Cache.

It May be helpfull for you.

Magento – how to add Category tree structure like product edit/add in custom module

You can add Category tree if you use UI form.

<field name="parent">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Parent Category</item>
                    <item name="componentType" xsi:type="string">field</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="dataScope" xsi:type="string">data.parent</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="showCheckbox" xsi:type="boolean">false</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="listens" xsi:type="array">
                        <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                    </item>
                </item>
            </argument>
        </field>

Best Answer

Related Solutions

Magento – Add/Edit Product – Append selected attribute value to product title

Magento – how to add Category tree structure like product edit/add in custom module

Related Topic