The system.xml file is essentially the Stores | Configuration interface builder. Entries we define in our module's system.xml file will render certain parts of the Stores | Configuration interface under the Magento admin area.

Unlike the previous two XML files, this configuration file is located under an additional subfolder, so its full path goes like app/code/Foggyline/Helpdesk/etc/adminhtml/system.xml, with content as follows:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module: Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="foggyline" translate="label" sortOrder="200">
            <label>Foggyline</label>
        </tab>
        <section id="foggyline_helpdesk" translate="label" type="text" sortOrder="110" showInDefault="1"
                 showInWebsite="1" showInStore="1">
            <label>Helpdesk</label>
            <tab>foggyline</tab>
            <resource>Foggyline_Helpdesk::helpdesk</resource>
            <group id="email_template" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Email Template Options</label>
                <field id="customer" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>
                        Store Owner to Customer Email Template
                    </label>
                    <source_model>
                        MagentoConfigModelConfigSource EmailTemplate
                    </source_model>
                </field>
                <field id="store_owner" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>
                        Customer to Store Owner Email Template
                    </label>
                    <source_model>
                        MagentoConfigModelConfigSource EmailTemplate
                    </source_model>
                </field>
            </group>
        </section>
    </system>
</config>

Even though we have a lot going on in this file, it can all be summed up in a few important bits.

system.xml defines one tab, as noted by the tab element assigned id attribute value of foggyline. We can have multiple tabs defined under a single system.xml file. The tab element attribute id needs to be unique under all tabs, not just those defined within our module. Within the tab element, we have a label element with the value of Foggyline. This value is what shows up under the Magento admin Stores | Configuration area.

The final results should be as shown in the following image:

Next to the tab element, we have the config | system | section element. This is the element within which we further define what are to become HTML input fields for accepting configuration options, as visible on the previous image.

We can have multiple sections defined within a single system.xml file. The actual section element attributes require us to specify the id attribute value, which in our example is set to foggyline_helpdesk. Other important section element attributes are showInWebsite and showInStore. These can have either 0 or 1 as a value. Depending on our module business logic, we might find a good reason for choosing one value over the other.

Looking further, the elements contained within our section element are:

We defined two fields, customer and store_owner. Similar to section and group, field elements also have id, sortOrder, showInWebsite, and showInStore attributes.

Notice how field further contains child elements that define its options. Given that our field element type attribute was set to select with both fields, we needed to define the source_model element within each field. Both fields have the same source_model value which points to the Magento core class, MagentoConfigModelConfigSourceEmailTemplate. Looking into that class, we can see it implements MagentoFrameworkOptionArrayInterface and defines the toOptionArray method. During rendering the admin Stores | Configuration area, Magento will call this method to fill in the values for the select HTML element.

As noted previously, our system.xml has a resource element that points to the app/code/Foggyline/Helpdesk/etc/acl.xml file, which we will now look into.