magento 2

Magento 2How to create the configuration via backend for a custom module

How to create the configuration via backend for a custom module

Published at 21 Aug 2015
In this post, I will introduce you how to create the configurations via Magento 2 backend. We will continue using the Tutorial_SimpleNews module for this lesson.

Hi guys,

How are you today? Are you ready for our next lesson on Magento 2.0?

Let‘s see what we have learnt from last tutorials:

1. How to create a simple module in Magento 2
2. Create a module with custom database table in Magento 2
3. How to use Model and Collection in Magento 2

In this post, I will introduce you how to create the configurations via Magento 2 backend.

We will continue using the Tutorial_SimpleNews module for this lesson and the directory structure likes the last post:

 

Step 1: Create configuration in Magento system configuration.

– Create file: app/code/Tutorial/SimpleNews/etc/adminhtml/system.xml (Purpose: This file will declare your configurations in Stores > Settings > Configuration section) and insert this following code into it:

  1. <?xml version=“1.0”?>
  2.  
  3. <config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
  4. xsi:noNamespaceSchemaLocation=“../../../Backend/etc/system_file.xsd”>
  5. <system>
  6. <tab id=“tutorial” translate=“label” sortOrder=“1”>
  7. <label>Tutorial</label>
  8. </tab>
  9. <section id=“simplenews” translate=“label” sortOrder=“1” showInDefault=“1”
  10. showInWebsite=“1” showInStore=“1”>
  11. <label>Simple News</label>
  12. <tab>tutorial</tab>
  13. <resource>Tutorial_SimpleNews::system_config</resource>
  14. <group id=“general” translate=“label” type=“text” sortOrder=“1” showInDefault=“1”
  15. showInWebsite=“1” showInStore=“1”>
  16. <label>General Settings</label>
  17. <field id=“enable_in_frontend” translate=“label” type=“select” sortOrder=“1”
  18. showInDefault=“1” showInWebsite=“1” showInStore=“1”>
  19. <label>Enable in frontend</label>
  20. <source_model>MagentoConfigModelConfigSourceYesno</source_model>
  21. </field>
  22. <field id=“head_title” translate=“label comment” type=“text” sortOrder=“2”
  23. showInDefault=“1” showInWebsite=“1” showInStore=“1”>
  24. <label>Head title</label>
  25. <comment>Fill head title of news list page at here</comment>
  26. <validate>required-entry</validate>
  27. </field>
  28. <field id=“lastest_news_block_position” translate=“label” type=“select”
  29. sortOrder=“3” showInDefault=“1” showInWebsite=“1” showInStore=“1”>
  30. <label>Lastest news block position</label>
  31. <source_model>
  32. TutorialSimpleNewsModelSystemConfigLastestNewsPosition
  33. </source_model>
  34. </field>
  35. </group>
  36. </section>
  37. </system>
  38. </config>

As you see, I used a custom source model in this file (TutorialSimpleNewsModelSystemConfigLastestNewsPosition), we will learn more about it with the step 2.

 

Step 2: Create a custom source model.

– Create file: app/code/Tutorial/SimpleNews/Model/System/Config/LastestNews/Position.php and insert this following code into it:

  1. <?php
  2.  
  3. namespace TutorialSimpleNewsModelSystemConfigLastestNews;
  4.  
  5. use MagentoFrameworkOptionArrayInterface;
  6.  
  7. class Position implements ArrayInterface
  8. {
  9. const LEFT = 1;
  10. const RIGHT = 2;
  11. const DISABLED = 0;
  12.  
  13. /**
  14. * Get positions of lastest news block
  15. *
  16. * @return array
  17. */
  18. public function toOptionArray()
  19. {
  20. return [
  21. self::LEFT => __(‘Left’),
  22. self::RIGHT => __(‘Right’),
  23. self::DISABLED => __(‘Disabled’)
  24. ];
  25. }
  26. }
  27.  

This custom source model will return values (Left, Right, Disabled) for the select box.

 

Step 3: Create a role for this configuration section.

– Create file: app/code/Tutorial/SimpleNews/etc/acl.xml (Purpose: This file will create a role for your configuration section) and insert this following code into it:

  1. <?xml version=“1.0”?>
  2.  
  3. <config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
  4. xsi:noNamespaceSchemaLocation=“../../../../../lib/internal/Magento/Framework/Acl/etc/acl.xsd”>
  5. <acl>
  6. <resources>
  7. <resource id=“Magento_Backend::admin”>
  8. <resource id=“Magento_Backend::stores”>
  9. <resource id=“Magento_Backend::stores_settings”>
  10. <resource id=“Magento_Config::config”>
  11. <resource id=“Tutorial_SimpleNews::system_config”
  12. title=“Simple News Section” />
  13. </resource>
  14. </resource>
  15. </resource>
  16. </resource>
  17. </resources>
  18. </acl>
  19. </config>
  20.  

 

Step 4: Set default values for the configurations.

– Create file: app/code/Tutorial/SimpleNews/etc/config.xml and insert this following code into it:

  1. <?xml version=“1.0”?>
  2.  
  3. <config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
  4. xsi:noNamespaceSchemaLocation=“../../Core/etc/config.xsd”>
  5. <default>
  6. <simplenews>
  7. <general>
  8. <enable_in_frontend>1</enable_in_frontend>
  9. <head_title>Tutorial – Simple News</head_title>
  10. <lastest_news_position>1</lastest_news_position>
  11. </general>
  12. </simplenews>
  13. </default>
  14. </config>

These configurations are same in Magento 1.x.

 

Finally, access to the backend site and see your result in Stores > Settings > Configuration section:

And this is the additional role (System > Permissions > User Roles):

 

wang

Leave a Comment