I have a UI form component, which contains a single child UI component that defines region, which in turn contains multiple form field components. When one of the form fields is updated by the user, I want to trigger some logic in the grandparent form component, this will require the form component having access to the value of the of the grandchild form field component.
How can I communicate the change in state of the form field component up to the form component itself? And how can I get the new value of the form field component in the form component?
So far I’ve found the bubble method of the Magento_UI/js/lib/element Component, which I can reimplement in my form component and then gets called whenever one of the form elements is updated. The problem with this is that the method just tells me that one of the grandchildren elements has been updated, but not which one and what its new value is. I can iterate and check values, but this seems a clumsy way of doing things.
I’ve been reading about UI components ‘imports’, ‘exports’ and ‘links’ (https://devdocs.magento.com/guides/v2.4/ui_comp_guide/concepts/ui_comp_linking_concept.html) which from what I understand could be a good solution. I think I’d like to define an import in the form for the onUpdate property of one of the child components. I’d like to define this relationship in the layout XML, but I don’t know how to reference the grandchild components.
