Adobe Commerce 2.3 reached end of support in September 2022.

Container component

The Container UI component is used for wrapping fields or other ui-components with descriptive text. It may be used without any field to display a notice or description of a fieldset.

Configuration options

Component options are set in the UI-component’s configuration .xml file as follows:

Option Description Type Default
component Path to the component’s .js file. String ''
template Path to the component’s .html template. String ui/form/components/complex
sortOrder Sort order of the Container. Number 0
label Label displayed for the Container. String ''
additionalClasses CSS class(es) applied to the root node of the component’s .html template. String ''
text Description for the Container. String ''

Source files

Examples

Container with a component

The following sample is an example of the Container component contain a Select component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<container name="container_name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/form/components/complex</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="label" xsi:type="string">Container Label</item>
            <item name="additionalClasses" xsi:type="string">sample-additional-class</item>
            <item name="text" xsi:type="string" translate="true"><![CDATA[
                <p>
                    Container Text.
                </p>
            ]]></item>
        </item>
    </argument>
    <field name="sort_direction"
           sortOrder="20"
           formElement="select">
        <settings>
            <dataType>text</dataType>
            <label translate="true">Sort Direction</label>
            <dataScope>data.sort_direction</dataScope>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="Vendor\Module\Model\Source\Config\SortDirection" />
                    <caption translate="true">-- Please Select --</caption>
                </settings>
            </select>
        </formElements>
    </field>
</container>

Result

Container with a field

Container without any fields

The following sample is an example of the Container component only.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<container name="container_name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/form/components/complex</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="label" xsi:type="string">Container Label</item>
            <item name="additionalClasses" xsi:type="string">sample-additional-class</item>
            <item name="text" xsi:type="string" translate="true"><![CDATA[
                <p>
                    Change these settings if you do not want to apply the global display configurations.
                </p>
            ]]></item>
        </item>
    </argument>
</container>

Result

The text of this container is styled using the additionalClasses value, i.e. sample-additional-class.

Container with out any fields