Adding an ID to the UI-form element

Question

I have the element inside the UI-form:

return [
    'arguments' => [
        'data' => [
            'config' => [
                'componentType' => Modal::NAME,
                'dataScope' => '',
                'provider' => static::FORM_NAME . '.product_form_data_source',
                'id' => 'unique-id-html-attribute',
                'options' => [
                    'title' => __('Select Options'),
                    'buttons' => [
                        [
                            'text' => __('Save'),
                            'class' => 'action-primary',
                            'actions' => [
                                [
                                    'targetName' => 'index = create_something_form',
                                    'actionName' => 'save',
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
    'children' => [],
];

But I can not add the ID-attribute to the element. Line 'id' => 'unique-id-html-attribute' does not work:

So question is: How to add the ID-attribute to the UI-form element?

Answer 1

The configuration of your component defined using config array. In this array there is componentType attribute, which defined in etc/definition.xml file (Magento/Ui/view/base/ui_component/etc/definition.xml for modal component).

The definition.xml configurations used for setting predefined configuration of components.

<modal class="Magento\Ui\Component\Container">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/modal/modal-component</item>
            <item name="options" xsi:type="array">
                <item name="type" xsi:type="string">slide</item>
            </item>
        </item>
    </argument>
</modal>

This configuration will be merged with custom component configurations, defined in your module. If you dont define component parameter, then Magento_Ui/js/modal/modal-component will be used by default (defined in definition.xml).

Base Magento_Ui/js/modal/modal-component ui component use ui/modal/modal-component (Magento/Ui/view/base/web/templates/modal/modal-component.html) template.

return Collection.extend({
        defaults: {
            template: 'ui/modal/modal-component',
            title: '',
            subTitle: '',

In this template there are no any id bindings, thus id argument, defined in your configuration, does not appear on frontend.

<div css="modalClass" hasFocus="focused">
    <each if="state() || $data.modal" args="data: elems, as: 'element'" render=""/>
</div>

In your case you can use already existed modalClass option or write custom template for modal component:

template.html

<div data-bind="attr: {id: id}" css="modalClass" hasFocus="focused">
    <each if="state() || $data.modal" args="data: elems, as: 'element'" render=""/>
</div>

Modifier.php

'componentType' => Modal::NAME,
'template' => 'Custom_Module/modal/template',
'dataScope' => '',