Magento 2 System Configuration Field Types

Magento 2 system configuration provides below fields type.

List Field Types :

button
checkbox
checkboxes
column
date
editablemultiselect
editor
fieldset
file
gallery
hidden
image
imagefile
label
link
multiline
multiselect
note
obscure
password
radio
radios
reset
select
submit
text
textarea
time

Yes/No Field :

	<field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
	    <label>Module Enable</label>
	    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
	    <comment>System Config Enabled Yes/No</comment>
	</field>

<label>Module Enable</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

<comment>System Config Enabled Yes/No</comment>

</field>

Select (Drop down) Options :

    <field id="select_options" translate="label" type="select"
        sortOrder="7" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Select Options</label>
        <source_model>V4U\Helloworld\Model\Config\Source\SelectOptions</source_model>
        <comment>System Config Select Options</comment>
        <depends>
            <field id="enable">1</field>
        </depends>                      
    </field>

<field id="select_options" translate="label" type="select"

sortOrder="7" showInDefault="1" showInWebsite="1" showInStore="1">

<label>Select Options</label>

<source_model>V4U\Helloworld\Model\Config\Source\SelectOptions</source_model>

<comment>System Config Select Options</comment>

</depends>

</field>

Create Model file for drop down options

File Path : app/code/V4U/Helloworld/Model/Config/Source/SelectOptions.php

<?php

namespace V4U\Helloworld\Model\Config\Source;

class SelectOptions implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        $options = $this->toArray();
        $result = [];

        foreach($options as $value => $label){
            $result[] = [
                'value' => $value, 'label' => $label
            ];
        }

        return $result;
    }

    /**
     * Get options in "key-value" format
     *
     * @return array
     */
    public function toArray()
    {
        return [
            0 => __('Select the Options'),
            1 => __('A'),
            2 => __('B'),
            3 => __('C')
        ];
    }
}

<?php

namespace V4U\Helloworld\Model\Config\Source;

class SelectOptions implements \Magento\Framework\Option\ArrayInterface

{

/**

* Options getter

* @return array

public function toOptionArray()

{

$options = $this->toArray();

$result = [];

foreach($options as $value => $label){

$result[] = [

'value' => $value, 'label' => $label

];

}

return $result;

}

/**

* Get options in "key-value" format

* @return array

public function toArray()

{

return [

0 => __('Select the Options'),

1 => __('A'),

2 => __('B'),

3 => __('C')

];

}

Select (Drop down) Options Multiple:

	<field id="multiselect" translate="label" type="multiselect"
	    sortOrder="14" showInDefault="1" showInWebsite="1" showInStore="1">
	    <label>Multiselect</label>
	    <source_model>V4U\Helloworld\Model\Config\Source\MultiSelect</source_model>
	    <depends>
	        <field id="is_enabled">1</field>
	    </depends>     
	    <comment>System Config Multiple Select</comment>                 
	</field>

<field id="multiselect" translate="label" type="multiselect"

sortOrder="14" showInDefault="1" showInWebsite="1" showInStore="1">

<label>Multiselect</label>

<source_model>V4U\Helloworld\Model\Config\Source\MultiSelect</source_model>

</depends>

<comment>System Config Multiple Select</comment>

</field>

Create Model file for options

File Path : app/code/V4U/Helloworld/Model/Config/Source/MultiSelect.php

<?php

namespace V4U\Helloworld\Model\Config\Source;

class MultiSelect implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        $options = $this->toArray();
        $result = [];

        foreach($options as $value => $label){
            $result[] = [
                'value' => $value, 'label' => $label
            ];
        }

        return $result;
    }

    /**
     * Get options in "key-value" format
     *
     * @return array
     */
    public function toArray()
    {
        return [
            0 => __('Select Options'),
            1 => __('A'),
            2 => __('B'),
            3 => __('C'),
            4 => __('D'),
            5 => __('E'),
            6 => __('F')
        ];
    }
}

<?php

namespace V4U\Helloworld\Model\Config\Source;

class MultiSelect implements \Magento\Framework\Option\ArrayInterface

{

/**

* Options getter

* @return array

public function toOptionArray()

{

$options = $this->toArray();

$result = [];

foreach($options as $value => $label){

$result[] = [

'value' => $value, 'label' => $label

];

}

return $result;

}

/**

* Get options in "key-value" format

* @return array

public function toArray()

{

return [

0 => __('Select Options'),

1 => __('A'),

2 => __('B'),

3 => __('C'),

4 => __('D'),

5 => __('E'),

6 => __('F')

];

}

Textarea :

    <field id="textarea" translate="label" type="textarea" sortOrder="12" showInDefault="1" showInWebsite="0" showInStore="0">
        <label>Textarea</label>
        <depends>
            <field id="enable">1</field>
        </depends>                     
        <comment>System Config Text Area</comment>
    </field>

<label>Textarea</label>

</depends>

<comment>System Config Text Area</comment>

</field>

Datepicker :

   <field id="datepicker" translate="label" type="date" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
       <label>Datepicker</label>
       <frontend_model>V4U\Helloworld\Block\DatePicker</frontend_model>
       <comment>System Config Datepicker</comment>
   </field>

<label>Datepicker</label>

<frontend_model>V4U\Helloworld\Block\DatePicker</frontend_model>

<comment>System Config Datepicker</comment>

</field>

For datepicker create block file.

File Path : app/code/V4U/Helloworld/Block/DatePicker.php

<?php
namespace V4U\Helloworld\Block;

class DatePicker extends \Magento\Config\Block\System\Config\Form\Field
{
   public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
   {
       $element->setDateFormat(\Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT);
       $element->setTimeFormat('HH:mm:ss'); //set date and time as per your need.
       $element->setShowsTime(true);
       return parent::render($element);
   }
}

<?php

namespace V4U\Helloworld\Block;

class DatePicker extends \Magento\Config\Block\System\Config\Form\Field

{

public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)

{

$element->setDateFormat(\Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT);

$element->setTimeFormat('HH:mm:ss'); //set date and time as per your need.

$element->setShowsTime(true);

return parent::render($element);

}

Note : If you want only Calendar then you can comment the code to remove time(Hour,Minute,Second).

File Path : app/code/V4U/Helloworld/Block/DatePicker.php

Line to comment :

$element->setTimeFormat('HH:mm:ss');

1	$element->setTimeFormat('HH:mm:ss');

Multiple Dates :

	 <field id="datepicker_list" translate="label" sortOrder="14" showInDefault="1" showInWebsite="1" showInStore="1">
	    <label>System Config Multiples Date</label>
	    <comment>System Config Multiples Date</comment>
	    <backend_model>V4U\Helloworld\Model\Config\Backend\DatePickerList</backend_model>
	    <frontend_model>V4U\Helloworld\Block\Adminhtml\Form\Field\DatePickerList</frontend_model>
	    <depends>
	        <field id="enable">1</field>
	    </depends>
	</field>

<label>System Config Multiples Date</label>

<comment>System Config Multiples Date</comment>

<backend_model>V4U\Helloworld\Model\Config\Backend\DatePickerList</backend_model>

<frontend_model>V4U\Helloworld\Block\Adminhtml\Form\Field\DatePickerList</frontend_model>

</depends>

</field>

Create Model File :

File Path : app/code/V4U/Helloworld/Model/Config/Backend/DatePickerList.php

<?php

namespace V4U\Helloworld\Model\Config\Backend;
 
class DatePickerList extends \Magento\Config\Model\Config\Backend\Serialized\ArraySerialized
{
    /**
     * On save convert front value format like "12/01/2018" to backend format "2018-01-12"
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = [];
        $values = $this->getValue();
        foreach ((array)$values as $key => $data) {
            if ($key == '__empty') continue;
            if (!isset($data['date'])) continue;
            try {
                $date = \DateTime::createFromFormat('d/m/Y', $data['date']);
                $value[$key] = [
                    'date' => $date->format('Y-m-d'),
                    'content' => $data['content'],
                ];
            } catch (\Exception $e) {
                // Just skipping error values
            }
        }
        $this->setValue($value);
        return parent::beforeSave();
    }
}

<?php

namespace V4U\Helloworld\Model\Config\Backend;

class DatePickerList extends \Magento\Config\Model\Config\Backend\Serialized\ArraySerialized

{

/**

* On save convert front value format like "12/01/2018" to backend format "2018-01-12"

* @return $this

public function beforeSave()

{

$value = [];

$values = $this->getValue();

foreach ((array)$values as $key => $data) {

if ($key == '__empty') continue;

if (!isset($data['date'])) continue;

try {

$date = \DateTime::createFromFormat('d/m/Y', $data['date']);

$value[$key] = [

'date' => $date->format('Y-m-d'),

'content' => $data['content'],

];

} catch (\Exception $e) {

// Just skipping error values

}

$this->setValue($value);

return parent::beforeSave();

}

Create Adminhtml block file :

File Path : app/code/V4U/Helloworld/Block/Adminhtml/Form/Field/DatePickerList.php

<?php

namespace V4U\Helloworld\Block\Adminhtml\Form\Field;
 
class DatePickerList extends \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray
{
    /**
     * Initialise form fields
     *
     * @return void
     */
    protected function _prepareToRender()
    {
        $this->addColumn('date', ['label' => __('Date'), 'class' => 'js-date-excluded-datepicker']);
        $this->addColumn('content', ['label' => __('Content')]);
        $this->_addAfter = false;
        $this->_addButtonLabel = __('Add Date');
        parent::_prepareToRender();
    }
 
    /**
     * Prepare existing row data object
     * Convert backend date format "2018-01-12" to front format "12/01/2018"
     *
     * @param \Magento\Framework\DataObject $row
     * @return void
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    protected function _prepareArrayRow(\Magento\Framework\DataObject $row)
    {
        $key = 'date';
        if (!isset($row[$key])) return;
        $rowId = $row['_id'];
        try {
            $sourceDate = \DateTime::createFromFormat('Y-m-d', $row[$key]);
            $renderedDate = $sourceDate->format('d/m/Y');
            $row[$key] = $renderedDate;
            $columnValues = $row['column_values'];
            $columnValues[$this->_getCellInputElementId($rowId, $key)] = $renderedDate;
            $row['column_values'] = $columnValues;
        } catch (\Exception $e) {
            // Just skipping error values
        }
    }
 
    /**
     * Get the grid and scripts contents
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $html = parent::_getElementHtml($element);
 
        $script = <<<JS
            <script type="text/javascript">
                // Bind click to "Add" buttons and bind datepicker to added date fields
                require(["jquery", "jquery/ui"], function (jq) {
                    jq(function(){
                        function bindDatePicker() {
                            setTimeout(function() {
                                jq(".js-date-excluded-datepicker").datepicker( { dateFormat: "dd/mm/yy" } );
                            }, 50);
                        }
                        bindDatePicker();
                        jq("button.action-add").on("click", function(e) {
                            bindDatePicker();
                        });
                    });
                });
            </script>
JS;
        $html .= $script;
        return $html;
    }
 
}

<?php

namespace V4U\Helloworld\Block\Adminhtml\Form\Field;

class DatePickerList extends \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray

{

/**

* Initialise form fields

* @return void

protected function _prepareToRender()

{

$this->addColumn('date', ['label' => __('Date'), 'class' => 'js-date-excluded-datepicker']);

$this->addColumn('content', ['label' => __('Content')]);

$this->_addAfter = false;

$this->_addButtonLabel = __('Add Date');

parent::_prepareToRender();

}

/**

* Prepare existing row data object

* Convert backend date format "2018-01-12" to front format "12/01/2018"

* @param \Magento\Framework\DataObject $row

* @return void

* @SuppressWarnings(PHPMD.UnusedFormalParameter)

protected function _prepareArrayRow(\Magento\Framework\DataObject $row)

{

$key = 'date';

if (!isset($row[$key])) return;

$rowId = $row['_id'];

try {

$sourceDate = \DateTime::createFromFormat('Y-m-d', $row[$key]);

$renderedDate = $sourceDate->format('d/m/Y');

$row[$key] = $renderedDate;

$columnValues = $row['column_values'];

$columnValues[$this->_getCellInputElementId($rowId, $key)] = $renderedDate;

$row['column_values'] = $columnValues;

} catch (\Exception $e) {

// Just skipping error values

}

/**

* Get the grid and scripts contents

* @param \Magento\Framework\Data\Form\Element\AbstractElement $element

* @return string

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)

{

$html = parent::_getElementHtml($element);

$script = <<<JS

// Bind click to "Add" buttons and bind datepicker to added date fields

require(["jquery", "jquery/ui"], function (jq) {

jq(function(){

function bindDatePicker() {

setTimeout(function() {

jq(".js-date-excluded-datepicker").datepicker( { dateFormat: "dd/mm/yy" } );

}, 50);

}

bindDatePicker();

jq("button.action-add").on("click", function(e) {

bindDatePicker();

});

</script>

JS;

$html .= $script;

return $html;

}

Time Picker :

	<field id="time" translate="label" type="time"
	    sortOrder="18" showInDefault="1" showInWebsite="1" showInStore="1">
	    <label>Time</label>
	    <depends>
	        <field id="enable">1</field>
	    </depends>  
	    <comment>System Config Time</comment>                    
	</field>

<field id="time" translate="label" type="time"

sortOrder="18" showInDefault="1" showInWebsite="1" showInStore="1">

</depends>

<comment>System Config Time</comment>

</field>

Button :

	<field id="button" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
		<button_label>Button</button_label>
		<frontend_model>V4U\Helloworld\Block\System\Config\Button</frontend_model>
		<comment>System Config Button</comment>   
	</field>

<button_label>Button</button_label>

<frontend_model>V4U\Helloworld\Block\System\Config\Button</frontend_model>

<comment>System Config Button</comment>

</field>

Create frontend model file.

File Path : app/code/V4U/Helloworld/Block/System/Config/Button.php

<?php
namespace V4U\Helloworld\Block\System\Config;

class Button 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 _prepareLayout()
    {
        parent::_prepareLayout();
        if (!$this->getTemplate()) {
            $this->setTemplate('system/config/custom_button.phtml');
        }

        return $this;
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        return $this->_toHtml();
    }
}

<?php

namespace V4U\Helloworld\Block\System\Config;

class Button 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 _prepareLayout()

{

parent::_prepareLayout();

if (!$this->getTemplate()) {

$this->setTemplate('system/config/custom_button.phtml');

}

return $this;

}

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)

{

return $this->_toHtml();

}

Create PHTML file

File Path : app/code/V4U/Helloworld/view/adminhtml/templates/system/config/custom_button.phtml

<input type="button" name="google_button" id="test_button" value="Button">

<script type="text/javascript">  
(function  () {    
    require(["jquery"], function($) {
        $(document).ready(function($) {
            $("#test_button").on("click", function(e){
                window.open('https://vrajeshpatel.in/', '_blank');
            })
        }); 
    });
})();
</script>