UI Components in Magento 2 are painful. If you ever wanted to do something in these XML files, you know how hard is to add something new or debug it when something isn’t working. Making new UI components is hard but much harder is to customize core components.
Magento validates every XML file with a provided in the main tag scheme. The scheme is a XSD file that contains configuration for the validator with all allowed tags. When you want to override the UI component or add something to the existing one you need to fit all requirements provided by the schema.
Declaring the main tag at the beginning of XML file with the schema, for example, some <listing>
|
1 2 |
<?xml version="1.0" encoding="UTF-8"?> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> |
Why can you need it?
If you make a more complicated extension to the core UI components you will need to configure more options with XML tags and new kind or provider. To share data between backend and frontend or for some custom frontend features. There are a lot of possibilities and maybe you want to use one of them. But there is a problem when you add a custom tag to the XML file that extends the core file, you will have a validation error in your browser.
So… maybe add new conditions to the XSD file?
It will do the job but to do it properly you need to extend this XSD file in your custom module. Maybe you think “No problem!” but actually it is a problem. You cannot extend schema files easily and properly. Links in schemas are hardcoded and that’s why you need to modify core files to change the link to your custom scheme. Don’t modify core files! It’s bad.
There must be the way…
And it is! After lots of hours spent in UI components trying to figure it out. I finally find a way to and custom data to XMLs. You can’t use random tags but you can use standard tags like <argument> and <item> and with it and with the attributes name and type. You can define any data you need. It’s easy and it passes every Magento’s core schema validator.
|
1 2 3 4 5 6 7 8 9 10 |
<argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">custom_thing</item> <item name="label" xsi:type="string" translate="true">Custom</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Custom</item> <item name="message" xsi:type="string" translate="true">This is my custom UI Component</item> </item> </item> </argument> |
That’s it! Hope you find it useful.
Be First to Comment