Adding Dynamic Ui Components on select value change

Question

I have a modal where I put a select ui component. I want than when the value of that select is changed I send an Ajax request to one of my controllers search in database an get a json response wich contains a list of fields (text inputs, radio buttons, ...) and then add (append) those fields to my modal in the fieldset.

Here is my select field :

<field name="type" formElement="select" component="Vendor_Module/js/form/components/action-type-select">
            <settings>
                <dataType>text</dataType>
                <label translate="true">Type</label>
                <dataScope>type</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Vendor\Module\ViewModel\Action\ActionList" />
                    </settings>
                </select>
            </formElements>
        </field>

and field JS component :

define([
    'Magento_Ui/js/form/element/select',
    'uiLayout'
], function(Select, layout) {
    'use strict';

    return Select.extend({

        initialize: function() {
            this._super();

            return this;
        },

        onUpdate: function(value) {
            console.log(value);
        },

        sendAjaxRequest: function() {

        }
    });
});

Answer 1

I have tried various methods to bring a URL dynamically into a UI component, but the standard and safe way I think is to add via metadata of the UI XML component itself.

To inject the dynamic data (not needed if you just want to add a static URL) in the component use the following code:

Form DataProvider.php https://stackoverflow.com/a/57431164