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 :
1 2 3 4 5 |
<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> |
Select (Drop down) Options :
1 2 3 4 5 6 7 8 9 |
<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> |
Create Model file for drop down options
File Path : app/code/V4U/Helloworld/Model/Config/Source/SelectOptions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?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:
1 2 3 4 5 6 7 8 9 |
<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> |
Create Model file for options
File Path : app/code/V4U/Helloworld/Model/Config/Source/MultiSelect.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?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 :
1 2 3 4 5 6 7 |
<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> |
Datepicker :
1 2 3 4 5 |
<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> |
For datepicker create block file.
File Path : app/code/V4U/Helloworld/Block/DatePicker.php
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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 :
1 |
$element->setTimeFormat('HH:mm:ss'); |
Multiple Dates :
1 2 3 4 5 6 7 8 9 |
<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> |
Create Model File :
File Path : app/code/V4U/Helloworld/Model/Config/Backend/DatePickerList.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?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; } } |
Time Picker :
1 2 3 4 5 6 7 8 |
<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> |
Button :
1 2 3 4 5 |
<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> |
Create frontend model file.
File Path : app/code/V4U/Helloworld/Block/System/Config/Button.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Happy Coding. Keep Liking & Sharing