How is the «Save Config» backend button implemented?

Development UI Components

dmitry_fedyuk (Dmitrii Fediuk) July 18, 2017, 1:23pm 1

Magento\Config\Block\System\Config\Edit::_prepareLayout()

github.com

magento/magento2/blob/2.2.0-RC1.4/app/code/Magento/Config/Block/System/Config/Edit.php#L73-L84


$this->getToolbar()->addChild(
    'save_button',
    \Magento\Backend\Block\Widget\Button::class,
    [
        'id' => 'save',
        'label' => __('Save Config'),
        'class' => 'save primary',
        'data_attribute' => [
            'mage-init' => ['button' => ['event' => 'save', 'target' => '#config-edit-form']],
        ]
    ]
);

The button’s initial HTML

<button
	class="action-default scalable save primary" 
	data-mage-init="{&quot;button&quot;:{&quot;event&quot;:&quot;save&quot;,&quot;target&quot;:&quot;#config-edit-form&quot;}}" 
	data-ui-id="page-actions-toolbar-save-button"
	id="save"
	title="Save Config"
	type="button"
><span>Save Config</span></button>

The button’s final HTML

<button
	class="action-default scalable save primary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
	data-ui-id="page-actions-toolbar-save-button" role="button" aria-disabled="false"
	id="save"
	title="Save Config"
	type="button"
><span class="ui-button-text"><span>Save Config</span></span></button>

lib/web/mage/backend/button::_click()

github.com

magento/magento2/blob/2.2.0-RC1.4/lib/web/mage/backend/button.js#L49-L57


/**
 * Button click handler.
 * @protected
 */
_click: function () {
    var options = this.options;


    $(options.target).trigger(options.event, [options.eventData]);
}

$.ui.button (the base class)

How is the jQuery's «ui.button» widget implemented in Magento 2?

How is a backend button widget implemented?

The fields with type='checkbox' are not saved in the backend «Stores» → «Configuration» section

dmitry_fedyuk (Dmitrii Fediuk) July 18, 2017, 1:24pm 2

See also:

The fields with type='checkbox' are not saved in the backend «Stores» → «Configuration» section