UI Component templates & definitions

Looking at the file:

view/adminhtml/ui_component/macademy_minerva_faq_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
</form>

This templates/form/collapsible template is defined as the template to use for an admin form, but we don’t really know where it is defined or what’s going on with it, so let’s dig into it.

This template is one of those weird bizarre templates, so let’s find out a bit more about it. We will go to the “UI” module at vendor/magento/module-ui, since this is the module that contains just about everything relate to UI Components in Magento. Then go to the view/base/ui_component directory.

In this directory is where we will find two subdirectories: one named etc and another named templates. The etc directory has a root definition.xml file, which contains default configurations & definitions for all of the core UI Components in Magento. You can use this file to look up what default UI component configuration values are available, and the default values for each. This etc directory also contains a definition subdirectory. If we open that up, we will see XSD files for each UI Component, that defines the spec and format for each UI Component XML file available in Magento.

If we open up one of these files, for example checkbox, this is the file that validates the XML for the Checkbox UI Component. xs is the XML namespace, and following it is just the name of each of these nodes that defines all of the available aspects of this component. If we also scroll down a bit, for example this componentCheckboxSetting, it also contains documentation for each of the elements, which will help explain to you how each of these UI Component elements works and how to implement them.

Let's go back to the macademy_minerva_faq_form.xml UI Component we created, and lets now find this template. It is currently set to templates/form/collapsible. So let’s now go back to the Magento UI module and back up to the ui_component directory, and we can find this value at templates/form/collapsible.

What’s interesting about this template is that it is an XHTML file. This is basically an HTML file, but with the stricter formatting of XML. This ensures that all HTML tags need to be closed up and that it’s pure & valid HTML. We’ll also notice it has an XML prolog, and it also defines a noNamespaceSchemaLocation attribute, so this is ensuring this file follows a stricter guideline than a regular HTML file.

Looking at the CSS classes defined in this file, we can see that this is intended to be an admin-specific component template. This is a bit odd, because it is located in the view/base directory. I guess that even though they are referencing this as an admin form, they are providing you with a bit of flexibility if you ever wished to use this file in the frontend.

Something interesting about this specific file is that it defines a scope with the name of the UI Component defined twice as the name. This segments out the data scope of this component, and this tidbit will help you understand a bit more about why & how scopes are defined for admin form UI Components.