Skip to content

Parsing `${ $.dataScope }` in UI Components

I am writing a module with a UI Component whose Modifier uses the ${ $.dataScope } construct to pass information to a Modal. Though I see that a purchased MageWorx module uses this exact construct and works, I cannot enable this functionality in my own module. The purchased module contains this code snippet (greatly simplified):

Ui/DataProvider/Product/Form/Modifier/Dependency.php

$params = [
    'dataScope' => '${ $.dataScope }',
];

$field[static::DEPENDENCY_BUTTON_NAME] = [
    'arguments' => [
        'data' => [
            'config' => [
                'component' => 'MageWorx_OptionBase/component/button',
                'actions' => [
                    [
                        'targetName' => 'ns='.$this->form.', index='.static::DEPENDENCY_MODAL_INDEX,
                        'actionName' => 'reloadModal',
                        'params' => [ $params ]
                    ],
                ],
            ],
        ],
    ],
];

view/adminhtml/web/component/modal-component.js

reloadModal: function (params) {
    // Here I can dump params.dataScope and it returns "data.product.options.1.values.0"
},

As the comment in the UI Component states, the string ${ $.dataScope } was parsed into data.product.options.1.values.0 in the MageWorx module. However when using this exact same setup in my own module, the string returned for params.dataScope is ${ $.dataScope }, i.e. the construct was not parsed.

What else must one configure so that ${ $.dataScope } will be parsed in the UI Component?

For that matter, where is this documented so that I might have found the answer myself? I cannot find it in the new Adobe docs nor in the old Magento docs. Where is the targetName key’s ns and index documented as well?