Issues with registering custom UI components.

[danslo]

I am trying to register my own UI components. The first problem is the following:

We can only use view/base/ui_component/etc directory because Magento checks for files in $theme->getArea() but this value is NULL when component definition files are read.

Ok, not a big issue, I just place the definition.xml file in base directory for now:

<?xml version="1.0" encoding="UTF-8"?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../etc/ui_definition.xsd">
    <someUniqueName class="NameSpace\Module\Ui\Component\Listing\Column\Some\Class\Here">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/some/template/path</item>
            </item>
        </argument>
    </someUniqueName>
</components>

And as you can see I define my own ui_definition.xsd file, which contains something like the following:

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
    <xs:include schemaLocation="../../../Magento/Ui/etc/ui_definition.xsd" />

    <!-- Create element. -->
    <xs:complexType name="someUniqueName">
        <xs:complexContent>
            <xs:extension base="ui_element">
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:group ref="configurable"/>
                </xs:choice>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>

    <!-- Registering it in the system.-->
    <xs:complexType name="definition">
        <!-- xs:all already seems like a problem to me, shouldn't this be an xs:sequence? -->
        <xs:all>
            <xs:element type="someUniqueName" name="someUniqueName" />
        </xs:all>
    </xs:complexType>
</xs:schema>

But it seems like Magento\Framework\View\Element\UiComponent\Config\DomMerger::createDomDocument is always validating against app/code/Magento/Ui/etc/ui_definition.xsd instead of the one referenced in XML file. This causes validation to always fail and not being able to add custom UI component.

Message: Element 'someUniqueName': This element is not expected. Expected is one of ( tab, dataSource, paging, massaction, listing, form, fieldset, field, filters, columns ). Line: 4

I also found this definition.xml reference in devdocs, but it's simply an XML dump, it doesn't help me.

Maybe I'm doing something wrong. Hope someone can provide input here on how to add a UI component from a custom module.

[danslo]

Addition to the above:

The fact that ui_definition.xsd always comes from Magento_Ui is not that weird considering the following DI for uiDefinitionDomMerge:

<argument name="schemaFileType" xsi:type="string">etc</argument>
<argument name="schemaFileModule" xsi:type="string">Magento_Ui</argument>
<argument name="schemaFileName" xsi:type="string">ui_definition.xsd</argument>

So how the hell do we add our own?! :)

[akaplya]

Hi, can you give more context, do you want introduce new independent component (like a grid) or simply add new render type for grid column?
which Magento version do you use ? merchant-beta or current mainline?

[danslo]

Actually want two things:

• Render type for grid column, I will show some kind of table here
• Custom formElement type for forms (will dynamically generate a list of dropdowns)

Magento version is current master, but I'm willing to work on any branch.

[danslo]

And actually a third thing that I would like to be able to do using UI components:

• Adding a grid to a fieldset.

As far as I can tell we can only do this by adding block classes (example is product reviews tab in customer module).

[danslo]

By the way, I have now added my own component by using plugin on Magento\Framework\View\Element\UiComponent\Config\Provider\Component::prepareComponentData. Probably not the best way but I can at least register components for now.

[akaplya]

Render type for grid column, I will show some kind of table here
Custom formElement type for forms (will dynamically generate a list of dropdowns)

For this task you may use attribute "class" of uiComponent. With using this attribute you can declare your own renderer class directly in column/field definition.
You may find example here

[danslo]

@akaplya I found that example too, but it looks like it builds the HTML just in the class file. I was trying to use my own cell template, but have no idea how to properly give back an array and iterate through it.

[vkorotun]

Hi all,
also you can use standard <container> component with some valid configuration to introduce you custom one (yes, it won't be that much semantic approach, but still may work):
Something like

<container name="someUniqueName" class="NameSpace\Module\Ui\Component\Listing\Column\Some\Class\Here">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/grid/some/template/path</item>
        </item>
    </argument>
</container>

... and concerning rendering grid to fieldset (actually any combination of UI components in hierarchy), we are working on this, and soon you'll be able to do that.

[danslo]

Thanks for all the answers guys. This mostly satisfies my questions but could you point to a relatively simple example where this "template" iterates through an array / builds a list.

I can get it working when building HTML in the component class just like the above example (store column) does... But I prefer to have the markup in template.

[daim2k5]

@danslo please feel free to reopen the issue if you have still questions