Touch UI dialog

[Vineethakolipaka]

In Component I have three fields, Image height and Image width in one tab and dropdown in another tab and dropdown has options like left, center, right and inline. If author mentions the value of image height and image width then in dropdown inline option should get automatically applied. 

Thanks & Regards,

Vineetha Kolipaka.

[arunpatidar]

Hi,

You need to write javascript event listener to set the dropdown values.

check javascript logic at https://stackoverflow.com/questions/36850805/change-dropdown-values-based-on-input-in-textfield  

[Aditya_Chabuku · Accepted solution]

Hi @Vineethakolipaka , 

As Arun said, you have to write JS on your dialog to change field values based on author inputs.

Write something like this based on your requirements. 

(function ($, $document, Coral) {
    var selectfield = {};
    $document.on("dialog-ready", function () {

        selectdata = [];
        const form = document.querySelector('form.cq-dialog');

        init();

        /*Start of Functions**/
        function init() {
            try {
                selectfield.actionPath = form.action;
                 // console.log(selectfield.actionPath);
                processData();
            } catch (err) {
                 // console.log(err.message + ', Component not available');
            }
        }

        function processData() {
            $.ajax({
                url: `/bin/design_dialog?path=${form.action}`,
                async: false,
                dataType: 'json',
                success: function (data) {
                    selectdata = data.groups;
                    readInputValues(selectdata);
                }
            });
        }
function readInputValues(selectdata) { 
/*Write your own logic as required*/. 
 setDropDownValue(data);
 }


 function setDropDownValue(data) {
  /*Write your own logic as required*/.
}
// then apply your desired output values back into dialog
$(document).on("click", ".cq-dialog-submit", function (e) {
/* proces & apply your data here*/
});
 $('input[data-class^="**youridentifier**"]').change(function () {
/* change selector values*/
});

})($, $(document), Coral);

Regards,
Aditya.Ch