Magento 2 – Adding a design configuration setting issue

Apologies if this question has been asked and answered already, or documentation provides a solution, but I can’t seem to get my head around this.

My objective is to add a custom field within the design configuration settings, where an administrator can toggle enabling Christmas effects to the frontend store. From what I have read online, the best way to do this is via a custom module, though I may be wrong?

So I have created a module to add a design configuration setting (Set Christmas Theme). In the module’s etc/di.xml file, I have added the following:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

  <type name="MagentoThemeModelDesignConfigMetadataProvider">
    <arguments>
      <argument name="metadata" xsi:type="array">
        <item name="header_christmas_theme" xsi:type="array">
            <item name="path" xsi:type="string">design/header/christmas_theme</item>
            <item name="fieldset" xsi:type="string">other_settings/header</item>
            <item name="componentType" xsi:type="string">field</item>
        </item>
      </argument>
    </arguments>
  </type>
</config>

Within the module’s view/adminhtml/ui_component/design_config_form.xml file, I have added the following:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
  <field name="header_christmas_theme">
      <argument name="data" xsi:type="array">
          <item name="options" xsi:type="object">MagentoConfigModelConfigSourceYesno</item>
          <item name="config" xsi:type="array">
              <item name="label" xsi:type="string" translate="true">Set Christmas Theme</item>
              <item name="dataType" xsi:type="string">text</item>
              <item name="componentType" xsi:type="string">field</item>
              <item name="formElement" xsi:type="string">select</item>
              <item name="dataScope" xsi:type="string">header_christmas_theme</item>
              <item name="value" xsi:type="string">0</item>
          </item>
      </argument>
  </field>
</form>

When enabling the module, running setup:upgrade in console and clearing the cache, I get the error below. Can anyone assist on where I am going wrong with adding a custom field to the design configuration?

1 exception(s):
Exception #0 (MagentoFrameworkExceptionLocalizedException): The configuration parameter "componentType" is a required for "header_christmas_theme" component.

Exception #0 (MagentoFrameworkExceptionLocalizedException): The configuration parameter "componentType" is a required for "header_christmas_theme" component.
#0 /vendor/magento/framework/View/Element/UiComponentFactory.php(361): MagentoFrameworkViewElementUiComponentFactory->mergeMetadataItem(Array, Array, false)
#1 /vendor/magento/framework/View/Element/UiComponentFactory.php(361): MagentoFrameworkViewElementUiComponentFactory->mergeMetadataItem(Array, Array, false)
#2 /vendor/magento/framework/View/Element/UiComponentFactory.php(361): MagentoFrameworkViewElementUiComponentFactory->mergeMetadataItem(Array, Array, false)
#3 /vendor/magento/framework/View/Element/UiComponentFactory.php(272): MagentoFrameworkViewElementUiComponentFactory->mergeMetadataItem(Array, Array, false)
#4 /vendor/magento/framework/View/Element/UiComponentFactory.php(164): MagentoFrameworkViewElementUiComponentFactory->mergeMetadata('design_config_f...', Array, false)
#5 /vendor/magento/framework/View/Layout/Generator/UiComponent.php(124): MagentoFrameworkViewElementUiComponentFactory->create('design_config_f...', NULL, Array)
#6 /vendor/magento/framework/View/Layout/Generator/UiComponent.php(93): MagentoFrameworkViewLayoutGeneratorUiComponent->generateComponent(Object(MagentoFrameworkViewLayoutDataStructure), 'design_config_f...', Array, Object(MagentoFrameworkViewLayoutInterceptor))
#7 /vendor/magento/framework/View/Layout/GeneratorPool.php(86): MagentoFrameworkViewLayoutGeneratorUiComponent->process(Object(MagentoFrameworkViewLayoutReaderContext), Object(MagentoFrameworkViewLayoutGeneratorContext))
#8 /vendor/magento/framework/View/Layout.php(327): MagentoFrameworkViewLayoutGeneratorPool->process(Object(MagentoFrameworkViewLayoutReaderContext), Object(MagentoFrameworkViewLayoutGeneratorContext))
#9 /var/generation/Magento/Framework/View/Layout/Interceptor.php(89): MagentoFrameworkViewLayout->generateElements()
#10 /vendor/magento/framework/View/Layout/Builder.php(129): MagentoFrameworkViewLayoutInterceptor->generateElements()
#11 /vendor/magento/framework/View/Page/Builder.php(55): MagentoFrameworkViewLayoutBuilder->generateLayoutBlocks()
#12 /vendor/magento/framework/View/Layout/Builder.php(65): MagentoFrameworkViewPageBuilder->generateLayoutBlocks()
#13 /vendor/magento/framework/View/Layout.php(244): MagentoFrameworkViewLayoutBuilder->build()
#14 /vendor/magento/framework/View/Layout.php(859): MagentoFrameworkViewLayout->build()
#15 /var/generation/Magento/Framework/View/Layout/Interceptor.php(414): MagentoFrameworkViewLayout->getBlock('menu')
#16 /vendor/magento/module-backend/Model/View/Result/Page.php(59): MagentoFrameworkViewLayoutInterceptor->getBlock('menu')
#17 /var/generation/Magento/Backend/Model/View/Result/Page/Interceptor.php(24): MagentoBackendModelViewResultPage->setActiveMenu('Magento_Theme::...')
#18 /vendor/magento/module-theme/Controller/Adminhtml/Design/Config/Edit.php(69): MagentoBackendModelViewResultPageInterceptor->setActiveMenu('Magento_Theme::...')
#19 /var/generation/Magento/Theme/Controller/Adminhtml/Design/Config/Edit/Interceptor.php(24): MagentoThemeControllerAdminhtmlDesignConfigEdit->execute()
#20 /vendor/magento/framework/App/Action/Action.php(102): MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor->execute()
#21 /vendor/magento/module-backend/App/AbstractAction.php(226): MagentoFrameworkAppActionAction->dispatch(Object(MagentoFrameworkAppRequestHttp))
#22 /vendor/magento/framework/Interception/Interceptor.php(74): MagentoBackendAppAbstractAction->dispatch(Object(MagentoFrameworkAppRequestHttp))
#23 /vendor/magento/framework/Interception/Chain/Chain.php(70): MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor->___callParent('dispatch', Array)
#24 /vendor/magento/framework/Interception/Chain/Chain.php(63): MagentoFrameworkInterceptionChainChain->invokeNext('Magento\Theme\C...', 'dispatch', Object(MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor), Array, 'adminAuthentica...')
#25 /vendor/magento/module-backend/App/Action/Plugin/Authentication.php(143): MagentoFrameworkInterceptionChainChain->MagentoFrameworkInterceptionChain{closure}(Object(MagentoFrameworkAppRequestHttp))
#26 /vendor/magento/framework/Interception/Chain/Chain.php(67): MagentoBackendAppActionPluginAuthentication->aroundDispatch(Object(MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor), Object(Closure), Object(MagentoFrameworkAppRequestHttp))
#27 /vendor/magento/framework/Interception/Interceptor.php(138): MagentoFrameworkInterceptionChainChain->invokeNext('Magento\Theme\C...', 'dispatch', Object(MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor), Array, 'adminMassaction...')
#28 /vendor/magento/module-backend/App/Action/Plugin/MassactionKey.php(33): MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor->MagentoFrameworkInterception{closure}(Object(MagentoFrameworkAppRequestHttp))
#29 /vendor/magento/framework/Interception/Interceptor.php(142): MagentoBackendAppActionPluginMassactionKey->aroundDispatch(Object(MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor), Object(Closure), Object(MagentoFrameworkAppRequestHttp))
#30 /var/generation/Magento/Theme/Controller/Adminhtml/Design/Config/Edit/Interceptor.php(39): MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor->___callPlugins('dispatch', Array, Array)
#31 /vendor/magento/framework/App/FrontController.php(55): MagentoThemeControllerAdminhtmlDesignConfigEditInterceptor->dispatch(Object(MagentoFrameworkAppRequestHttp))
#32 /vendor/magento/framework/Interception/Interceptor.php(74): MagentoFrameworkAppFrontController->dispatch(Object(MagentoFrameworkAppRequestHttp))
#33 /vendor/magento/framework/Interception/Chain/Chain.php(70): MagentoFrameworkAppFrontControllerInterceptor->___callParent('dispatch', Array)
#34 /vendor/magento/framework/Interception/Interceptor.php(138): MagentoFrameworkInterceptionChainChain->invokeNext('Magento\Framewo...', 'dispatch', Object(MagentoFrameworkAppFrontControllerInterceptor), Array, 'install')
#35 /vendor/magento/framework/Module/Plugin/DbStatusValidator.php(69): MagentoFrameworkAppFrontControllerInterceptor->MagentoFrameworkInterception{closure}(Object(MagentoFrameworkAppRequestHttp))
#36 /vendor/magento/framework/Interception/Interceptor.php(142): MagentoFrameworkModulePluginDbStatusValidator->aroundDispatch(Object(MagentoFrameworkAppFrontControllerInterceptor), Object(Closure), Object(MagentoFrameworkAppRequestHttp))
#37 /var/generation/Magento/Framework/App/FrontController/Interceptor.php(26): MagentoFrameworkAppFrontControllerInterceptor->___callPlugins('dispatch', Array, Array)
#38 /vendor/magento/framework/App/Http.php(135): MagentoFrameworkAppFrontControllerInterceptor->dispatch(Object(MagentoFrameworkAppRequestHttp))
#39 /vendor/magento/framework/App/Bootstrap.php(258): MagentoFrameworkAppHttp->launch()
#40 /index.php(39): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppHttp))
#41 {main}