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?

  • How do you implement ui form without xml?
    – mrtuvn
    Aug 22, 2016 at 0:03
  • @mrtuvn It is not completely form without xml. You can see example at vendor/magento/module-catalog/view/adminhtml/ui_component/product_form.xml where the form has been declared in xml, but almost all fields are added in modifiers (vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier). Aug 22, 2016 at 5:42
  • Yes i have already viewed it. But seem i do not find example about form modal with custom field not define in xml. Can i do modal ui form by add it inside renderer block or something
    – mrtuvn
    Aug 22, 2016 at 6:28
  • @mrtuvn I don't know whether it is possible without definition of the UI form in xml. Try to ask a question, perhaps somebody already tried to make it. And if I have free time - I will try to check it. PS: I can share only an example of addition of a modal window in the existing UI form. Aug 22, 2016 at 6:38
  • 1
    @mrtuvn Here is example Aug 22, 2016 at 13:28

1 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>

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=""/>

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


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.