/   /   /  Magento 2 Some techniques about system configuration (part 1)

Note:

For more extensions and themes visit our store

Magento 2 Some techniques about system configuration (part 1)

in Magento2 the global architecture of  system configuration is changed but the vision is the same !
Add global configuration by website store(group) or store view and use inside your code for enable disable or other choices .
In the first course we introduce the creation if system configuration.
1 – How Create my system configuration ?
  A – System.xml
Inside your module open etc/adminhtml and create system.xml you can push for example :

  1.  
  2. <?xml version="1.0"?>
  3. <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
  4.     <system>
  5.         <tab id="ibnab_asterisk" translate="label" sortOrder="200">
  6.             <label>Ibnab</label>
  7.         </tab>
  8.         <section id="ibnab_asterisk_control" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
  9.             <class>separator-top</class>
  10.             <label>Ibnab Asterisk</label>
  11.             <tab>ibnab_asterisk</tab>
  12.             <resource>Ibnab_Asterisk::ibnab_asterisk_control</resource>
  13.             <group id="apioptions" translate="label comment" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="0">
  14.                 <label>API Access details</label>
  15.                 <field id="api_key" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
  16.                     <label>API Key</label>
  17.                     <comment><![CDATA[This is the  API key]]></comment>
  18.                 </field>
  19.                 <field id="check" translate="button_label"  sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="0">
  20.                     <label/>
  21.                     <attribute type="api_key_id">ibnab_asterisk_control_apioptions_api_key</attribute>                 
  22.                     <attribute type="load_config_url"><![CDATA[asterisk/apicontrol/loadconfig]]></attribute>
  23.                     <button_label><![CDATA[Check & load current settings]]></button_label>
  24.                     <button_url>
  25.                         <![CDATA[asterisk/apicontrol/check]]>
  26.                     </button_url>
  27.                     <frontend_model>Ibnab\Asterisk\Block\System\Config\Button\Check</frontend_model>
  28.                     <comment><![CDATA[Once you check you API access, please click Save Setting for begin use extension.]]></comment>
  29.                 </field>
  30.             </group>       
  31.            
  32.         </section>
  33.     </system>
  34. </config>
  35.  
  36.  

Ok we create our section of access with API inside menu path stores->configuration->ibnab(as horizontal tab)   
with two field text and button (vertical tab).
Field text : is simple create input text with id api_key in html you have result as (section_group_idField) : <input type='text' id='ibnab_asterisk_control_apioptions_api_key' and show in default and website but hide in store view , we want translate tag label and comment  translate="label comment".
Field Button : almost same technique but with new tags inside it , atrribute_type  button_label   button_url and  frontend_model :
 atrribute_type : we want use for getting the id of field text inside HTML
button_label and  button_url : use as custom label and usr for button
frontend_model: we give it a ptah to class responsible to analyze the preview custom tags beforre rendering the button

 B – Frontend Model
Ok we go now to class of frontend_model :
create inside code/Ibnab/Asterisk/Block/System/Config/Button class Check.php and put :

  1.  
  2. <?php
  3. namespace Ibnab\Asterisk\Block\System\Config\Button;
  4. use Magento\Framework\App\Config\ScopeConfigInterface;
  5. class Check extends \Magento\Config\Block\System\Config\Form\Field
  6. {
  7.     /**
  8.      * Path to block template
  9.      */
  10.     const CHECK_TEMPLATE = 'system/config/button/check.phtml';
  11.     /**
  12.      * Set template to itself
  13.      *
  14.      * @return $this
  15.      */
  16.     protected function _prepareLayout()
  17.     {
  18.         parent::_prepareLayout();
  19.         if (!$this->getTemplate()) {
  20.             $this->setTemplate(static::CHECK_TEMPLATE);
  21.         }
  22.         return $this;
  23.     }
  24.     /**
  25.      * Render button
  26.      *
  27.      * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
  28.      * @return string
  29.      */
  30.     public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
  31.     {
  32.         // Remove scope label
  33.         $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
  34.         return parent::render($element);
  35.     }
  36.     /**
  37.      * Get the button and scripts contents
  38.      *
  39.      * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
  40.      * @return string
  41.      */
  42.     protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
  43.     {
  44.         $originalData = $element->getOriginalData();
  45.         $this->addData(
  46.             [
  47.                 'api_key_id' => $originalData['api_key_id'],
  48.                 'api_domain_id' => $originalData['api_domain_id'],
  49.                 'intern_url' => $this->getUrl($originalData['button_url']),
  50.                 'load_config_url' => $this->getUrl($originalData['load_config_url']),
  51.                 'html_id' => $element->getHtmlId(),
  52.             ]
  53.         );
  54.         return $this->_toHtml();
  55.     }
  56. }
  57.  
  58.  

in this class you injected the .phtml responsible of final rendering :

  1.  
  2.     const CHECK_TEMPLATE = 'system/config/button/check.phtml';
  3.     /**
  4.      * Set template to itself
  5.      *
  6.      * @return $this
  7.      */
  8.     protected function _prepareLayout()
  9.     {
  10.         parent::_prepareLayout();
  11.         if (!$this->getTemplate()) {
  12.             $this->setTemplate(static::CHECK_TEMPLATE);
  13.         }
  14.         return $this;
  15.     }
  16.  
  17.  

In _prepareLayout()   function we injected  static::CHECK_TEMPLATE (const CHECK_TEMPLATE = 'system/config/button/check.phtml') the physical path is code/Ibnab/Asterisk/view/adminhtml/templates/system/config/button/check.phtml

  1.  
  2.     protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
  3.     {
  4.         $originalData = $element->getOriginalData();
  5.         $this->addData(
  6.             [
  7.                 'button_label' => __($originalData['button_label']),
  8.                 'api_key_id' => $originalData['api_key_id'],
  9.                 'intern_url' => $this->getUrl($originalData['button_url']),
  10.                 'load_config_url' => $this->getUrl($originalData['load_config_url']),
  11.                 'html_id' => $element->getHtmlId(),
  12.             ]
  13.         );
  14.         return $this->_toHtml();
  15.     }
  16. }
  17.  
  18.  

And inside _getElementHtml function you add data to block for use inside .phtml  (HTML id of field api_key
url of button and label)....

We go now to content of .phtml:

  1.  
  2. <div class="pp-buttons-container">
  3.     <button id="<?php echo $block->getHtmlId() ?>" onclick="return false;">
  4.         <span><span><span><?php echo $block->escapeHtml($block->getButtonLabel()); ?></span></span></span>
  5.     </button>
  6. </div>
  7. <script>
  8.  var params = {internUrl:"<?php echo $block->getInternUrl() ?>",  apiKeyId: "#<?php echo $block->getApiKeyId() ?>", htmlId: "#<?php echo $block->getHtmlId() ?>", loadConfigUrl: "<?php echo $block->getLoadConfigUrl() ?>"};  
  9.          $("#<?php echo $block->getHtmlId() ?>").on( "click", function() {
  10.             someFunction(params);
  11.          });       
  12. </script>
  13.  
  14.  

See the the button HTML  tag we get all params  of button with block->get...(button_label equal $block->getButtonLabel() ) , and you can use javascript …

 C – ACL
Ok now we create our system but for complete all work we need create the ACL is you go to system.xml and explore the section you will find <resource>Ibnab_Asterisk::ibnab_asterisk_control</resource>  , we tell to system this configuration section can used just by admin with resource  Ibnab_Asterisk::ibnab_asterisk_control now go to etc inside module and create acl.xml and fill with :

  1.  
  2. <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
  3.     <acl>
  4.         <resources>
  5.             <resource id="Magento_Backend::admin">
  6.                 <resource id="Magento_Backend::stores">
  7.                     <resource id="Magento_Backend::stores_settings">
  8.                         <resource id="Magento_Config::config">
  9.                             <resource id="Ibnab_Asterisk::ibnab_asterisk_control" title="Asterisk Control Section" />
  10.                         </resource>
  11.                     </resource>
  12.                 </resource>
  13.             </resource>
  14.         </resources>
  15.     </acl>
  16. </config>
  17.  
  18.  

 C – Default Config Value For system.xml:

we created our fields but we want fill with default value like enbale by default , you need create config.xml inside Ibnab/Asterisk/etc and put :

  1.  
  2. <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
  3.     <default>
  4.             <ibnab_asterisk_control>
  5.                 <apioptions>
  6.                     <api_key>default api</api_key>
  7.                 </apioptions>
  8.             </ibnab_asterisk_control>
  9.     </default>
  10. </config>
  11.  
  12.  

ibnab_asterisk_control ->section  , apioptions->group , api_key->field

now all is done …

in the next course we introduce how set and get the value ….

 

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter