How to create the configuration via backend for a custom module

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
3How 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:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="../../../Backend/etc/system_file.xsd">
    <system>
        <tab id="tutorial" translate="label" sortOrder="1">
            <label>Tutorial</label>
        </tab>
        <section id="simplenews" translate="label" sortOrder="1" showInDefault="1" 
showInWebsite="1" showInStore="1">
            <label>Simple News</label>
            <tab>tutorial</tab>
            <resource>Tutorial_SimpleNews::system_config</resource>
            <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" 
showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <field id="enable_in_frontend" translate="label" type="select" sortOrder="1" 
showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable in frontend</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="head_title" translate="label comment" type="text" sortOrder="2" 
showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Head title</label>
                    <comment>Fill head title of news list page at here</comment>
                    <validate>required-entry</validate>
                </field>
                <field id="lastest_news_block_position" translate="label" type="select" 
sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Lastest news block position</label>
                    <source_model>
                        Tutorial\SimpleNews\Model\System\Config\LastestNews\Position
                    </source_model>
                </field>
            </group>
        </section>
    </system>
</config>

As you see, I used a custom source model in this file (Tutorial\SimpleNews\Model\System\Config\LastestNews\Position), 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:

<?php

namespace Tutorial\SimpleNews\Model\System\Config\LastestNews;

use Magento\Framework\Option\ArrayInterface;

class Position implements ArrayInterface
{
    const LEFT      = 1;
    const RIGHT     = 2;
    const DISABLED  = 0;

    /**
     * Get positions of lastest news block
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [
            self::LEFT => __('Left'),
            self::RIGHT => __('Right'),
            self::DISABLED => __('Disabled')
        ];
    }
}

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:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Tutorial_SimpleNews::system_config"
title="Simple News Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

 

Step 4: Set default values for the configurations.

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

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="../../Core/etc/config.xsd">
    <default>
        <simplenews>
            <general>
                <enable_in_frontend>1</enable_in_frontend>
                <head_title>Tutorial - Simple News</head_title>
                <lastest_news_position>1</lastest_news_position>
            </general>
        </simplenews>
    </default>
</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):

 

I hope this tutorial is useful for you. In next tutorials, I will introduce you “Adding new menu item via backend in custom module”. See you again in our next Magento 2 tutorial.

If you have any problem or ideas don’t hesitate to discuss with us through our Facebook fanpage.

Related Posts

How to use Model and Collection in Magento 2

How to use Model and Collection in Magento 2

18 Aug 2015
In this post, we will go deeper into the usage of Module and Collection in Magento 2. After this post, you can insert some sample data on the custom database table and display them on frontend. Let’s start!
Create a module with custom database table in Magento 2

Create a module with custom database table in Magento 2

14 Aug 2015
Today, we will continue with our Magento 2 tutorial series. In this second blog post, I will introduce you how to create a module with custom database table in Magento 2. Let’s do it!
How to create a simple module in Magento 2.0

How to create a simple module in Magento 2.0

10 Aug 2015
Let’s get started with the first post: “How to create a simple module in Magento 2.0” In this blog post, we use the Magento 2 version 1.0.0-beta, which is the newest beta version released in middle of July, 2015.
Lesson 3 - The Model, collections & layout

Lesson 3 - The Model, collections & layout

18 Dec 2014
In the last lesson, I have introduced you how to create and call a model. In this third lesson, I will show you about collections and layout displays.