Skip to content

Adding Dynamic Ui Components on select value change

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.

enter image description here

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="VendorModuleViewModelActionActionList" />
                    </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() {

        }
    });
});