:::: MENU ::::
Posts tagged with: system configration

Magento 2 Color Picker in system configuration

This tutorial is about addingColor Picker in Magento 2 admin configuration. In this article I will show how to add jquery color picker in Magento 2 system configuration. You can use following step to use this jquery color picker on frontend too. Magento 2 have default lib/web/jquery/colorpicker/js/colorpicker library so you don’t have to add any external library for that. Below are the steps of how to do it:

Lets start with the Image to demonstrate you what it looks like:

Magento 2 color picker

Magento 2 color picker

Here my Module Namespace is QaisarSatti.
And my module name is: HelloWorld

Lets have have a look at different steps below:

1. Create system.xml at app/code/QaisarSatti/HelloWorld/etc/adminhtml/system.xml
All admin config options for your module will go in this file. For color picker we will create a text field as below. Just for your information i have not added complete code here for sake of readability.

    <field id="color_background" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
         <label>Background Color</label>
         <frontend_model>QaisarSatti\HelloWorld\Block\ColorPicker</frontend_model> <!-- block for adding color picker on text box -->
     </field>

2. Create the QaisarSatti\HelloWorld\Block\ColorPicker.php
This code will enable color picker options with the text box.

<?php

namespace QaisarSatti\HelloWorld\Block;

class Color extends \Magento\Config\Block\System\Config\Form\Field {

   
    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 $currentelement = $("#'
. $element->getHtmlId() . '");
                    $currentelement.css("backgroundColor", "'
. $value .'");  //adding already selected value

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

}

Now
3. Add the color picker JavaScript library.
Now finally we need to add color picker JavaScript library to admin config pages. Magento 2 by default is shipped with Color picker jQuery plugin. This plugin is present in lib/web/jquery/colorpicker/ folder.
Create the app/code/QaisarSatti/HelloWorld/view/adminhtml/layout/adminhtml_system_config_edit.xml. This layout file will be called on all admin configuration pages. We will add our color picker JavaScript and CSS to this layout.

<!-- File: app/code/QaisarSatti/HelloWorld/view/adminhtml/layout/adminhtml_system_config_edit.xml -->

<?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>
</page>

Now clear the cache and refresh the page. You will see the color picker enabled in config option.

That’s it from this tutorial. I strongly believe there is always room for improvement.So i am open for any suggestion and feed back. Please feel free to leave hat you are thinking in the comments section below. Cheers.

Author: Qaisar Satti
Category: Magento 2
Last Modified: December 27, 2018


Magento 2 default value system configuration

Today we discuss about Magento 2 default value system configuration.This tutorial include how you can add your default value for system configuration in input, dropdwon, multiselect and other field too. So let’s start with our example.

Create system.xml

First step is create system.xml in following directory.

QaisarSatti/HelloWorld/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="qaisarsatti_helloworld" translate="label" sortOrder="200">
                <label>QaisarSatti HelloWorld</label>
            </tab>
        <section id="helloworld" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>HelloWorld COnfiguration</label>
            <tab>qaisarsatti_helloworld</tab>
            <resource>qaisarsatti_helloworld::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="enabled" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enabeld </label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                </field>                                            
            </group>
        </section>
    </system>
</config>

Create Config.xml

Create config.xml in following directory.

QaisarSatti\HelloWorld\etc\config.xml

Use section id than group id and at the end field id.

<?xml version="1.0"?>
     <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
        <default>
            <helloworld>
                <general>
                    <enabled>1</enabled>
                </general>
            </helloworld>
        </default>
    </config>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 6, 2018


Magento2 Add Validation in System Configuration

Today we talk about magento 2 add validation system configuration. In this tutorial we focus on how to add validation in system configuration like required entry, number validation email validation and other validation too. There are already tutorial available about Magento 2 create retrieve system configuration. You can follow that for creating field in system configuration. In this tutorial our focus is how to add validation in system configuration. Now let’s start with our example.

Single Validation class in system configuration

You can add single validation class with required-entry
node.

<field id="title" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                   <validate>required-entry</validate>
   </field>

Multiple Validation class in system configuration

You can add single validation class with required-entry validate-digits
Adding the space between two classes.

<field id="title" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <validate>required-entry validate-digits</validate>
   </field>

Available Validation Class

Here is list of available validation classes.

'required-entry'                => 'This is a required field.'
'validate-number'               => 'Please enter a valid number in this field.'
'validate-email'                => 'Please enter a valid email address. For example
johndoe@domain.com.'

'validate-date'                 => 'Please enter a valid date.'
'validate-select'               => 'Please select an option.'
'validate-no-html-tags'         => 'HTML tags are not allowed'
'validate-digits'               => 'Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.'
'validate-url'                  => 'Please enter a valid URL. Protocol is required (http://, https:// or ftp://)'
'validate-not-negative-number'  => 'Please enter a number 0 or greater in this field.'
'validate-zero-or-greater'      => 'Please enter a number 0 or greater in this field.'
'validate-state'                => 'Please select State/Province.'
'validate-cc-number'            => 'Please enter a valid credit card number.'
'validate-data'                 => 'Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.'
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 17, 2018


Magento 2 create retrieve system configuration

Today we talk about how in Magento 2 create retrieve system configuration. This tutorial includes the knowledge of get value of system configuration, how to add your custom configurations in system configurations and also how to retrieve their values too. Configuration values are saved in core_config_data table , in this table you can see the path and value of your configuration settings. So let’s start with our example.

Create system.xml

First step is create system.xml in following directory.

QaisarSatti/HelloWorld/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="qaisarsatti_helloworld" translate="label" sortOrder="200">
                <label>QaisarSatti HelloWorld</label>
            </tab>
        <section id="helloworld" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>HelloWorld COnfiguration</label>
            <tab>qaisarsatti_helloworld</tab>
            <resource>qaisarsatti_helloworld::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="enabled" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enabeld </label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                </field>                                            
            </group>
        </section>
    </system>
</config>

Retrieve System configuration

For retrieving the values we create the helper file Data.php in following directory

QaisarSatti/HelloWorld/Helper/Data.php

First thing you need to know for retrieving the values in is combination of sestionid/groupid/fieldid to get value.

<?php

namespace QaisarSatti\HelloWorld\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    const HELLOWORLD_MODULE_ENABLED    = 'helloworld/general/enabled';
    const HELLOWORLD_LABEL             = 'helloworld/general/title';



    public function __construct(
        \Magento\Framework\App\Helper\Context $context
    ) {
   
   
   
   
        parent::__construct($context);
    }
    public function getEnabled()
    {
        return $this->scopeConfig->getValue(
            self::HELLOWORLD_MODULE_ENABLED,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
    public function getLabel()
    {
        return$this->scopeConfig->getValue(
            self::HELLOWORLD_LABEL,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
}

Now: Following you can retrieve system configuration.

Author: Qaisar Satti
Category: Magento 2
Last Modified: August 6, 2018


Magento 2 image upload system configuration

Today we talk about how in Magento 2 image upload system configuration. This tutorial include image upload in system configuration. Sometime you need to add general image for a module, a company logo , a marker or a custom theme. With the help of following code you would be able to add a single image in system configurations.

Add the image field in system configuration.

<field id="image" translate="label comment" type="image" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Store Image</label>
                    <backend_model>QaisarSatti\HelloWorld\Model\Config\Backend\Image</backend_model>
                      <base_url type="media" scope_info="1">image</base_url>
 </field>

Now create model for image upload.

<?php

namespace QaisarSatti\HelloWorld\Model\Config\Backend;

class Image extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     *
     */

    const UPLOAD_DIR = 'store'; // Folder save image

    /**
     * Return path to directory for upload file
     *
     * @return string
     * @throw \Magento\Framework\Exception\LocalizedException
     */

    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
    }

    /**
     * Makes a decision about whether to add info about the scope.
     *
     * @return boolean
     */

    protected function _addWhetherScopeInfo()
    {
        return true;
    }

    /**
     * Getter for allowed extensions of uploaded files.
     *
     * @return string[]
     */

    protected function _getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
    }
}
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018