1

In Magento 1.x I could use the included color picker by using the following form element:

$fieldset->addField('title_color', 'text', array(
      'label'     => Mage::helper('categorybanner')->__('Title Color'),
      'class'  => 'color {hash:true,required:false}',
      'required'  => false,
      'name'      => 'title_color',
  ));

Is there an included color picker element in Magento 2? If not how would I go about including a custom JS file on an admin grid?

|improve this question|||||
3

Check out JSColor:

http://jscolor.com/

Its an open source and very easy to use Javascript library. All you have to do is import the library somewhere in your application, than you can simply create an input with the class "jscolor".

Get jscolor.js from above site and add inside Vendor/Modulename/view/adminhtml/web/js/jscolor.js

define js in your module xml head tag or create default.xml file inside Vendor/Modulename/view/adminhtml/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>      
        <script src="Vendor_Modulename::js/jscolor.js"/>
    </head>
</page>

Now set color picker in input like below:

$fieldset->addField('title_color', 'text', array(
      'label'     => __('Title Color'),
      'class'  => 'jscolor {hash:true,refine:false}',
      'required'  => false,
      'name'      => 'title_color',
  ));

This is working fine in magento 2.

|improve this answer|||||
  • Is it possible in store configuration page? – Mike Nov 27 '15 at 16:35
  • @Dmitry, yes, its possible, ask your question separately, its a good one for all of us – amit_game Jan 1 '16 at 4:36
  • How to add color picker in admin configuration? – Arvind07 Feb 24 '16 at 16:49
  • We can add color picker in Magento 2 admin configuration page as: webspeaks.in/2016/03/… – Arvind07 Mar 21 '16 at 9:20
0

Follow below step

Create System.xml at Below Path

app/code/Emizentech/Newsletter/etc/adminhtml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">


<system>
    <tab id="emizentechnewsletter" translate="label" sortOrder="700">
        <label>Emizentech Newsletter Pop-up</label>
    </tab>
    <section id="emizentechnewsletter" translate="label" sortOrder="500" showInDefault="1" showInWebsite="1" showInStore="1">
        <class>separator-top</class>
        <label>Emizentech Newsletter Configuration</label>
        <tab>emizentechnewsletter</tab>
        <resource>Emizentech_Newsletter::config</resource>


        <group id="txt" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">


            <label>Emizentech</label>


            <field id="colorsample" translate="label" type="text" sortOrder="4" showInDefault="1" showInWebsite="0" showInStore="1">
                <label>Font color for newsletter popup</label>
                <comment><![CDATA[Text color]]></comment>
                <frontend_model>Emizentech\Newsletter\Block\Color</frontend_model> <!-- Our block for attaching color picker to text box -->
            </field>
        </group>


    </section>
</system>

</config>

Create Color.php File at below Path

<?php

namespace Emizentech\Newsletter\Block;
class Fontcolor extends \Magento\Config\Block\System\Config\Form\Field {

/**
 * @param \Magento\Backend\Block\Template\Context $context
 * @param Registry $coreRegistry
 * @param array $data
 */
public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
) {
    parent::__construct($context, $data);
}

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
    $html = $element->getElementHtml();
    $value = $element->getData('value');

    $html .= '<script type="text/javascript">
        require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {


            $(document).ready(function () {
                var $el = $("#' . $element->getHtmlId() . '");
                $el.css("backgroundColor", "'. $value .'");

                // Attach the color picker
                $el.ColorPicker({
                    color: "'. $value .'",
                    onChange: function (hsb, hex, rgb) {
                        $el.css("backgroundColor", "#" + hex).val("#" + hex);
                    }
                });
            });
        });
        </script>';
    return $html;
}
}

Add color picker CSS library:

Create adminhtml_system_config_edit.xml at Below Path

app/code/Emizentech/Newsletter/view/adminhtml/layout

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
    <css src="jquery/colorpicker/css/colorpicker.css"/>
</head>

|improve this answer|||||

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.