Client side dialog manipulation!

[dave-greeko]

Dear All,
How can I listen to the change event or even hide/show a field of a dialog created on the client side. In the example below I would like to manipulate the “sps” field (hide, clear, set to different value, etc…) based on selection from the first field “codec”.

var d = new frappe.ui.Dialog({
        fields: [
            {
                'fieldname': 'codec',
                'fieldtype': 'Select',
                'label': 'Codec',
                'options': 'G.729\nG.711\nOPUS',
            },
            {
                'fieldname': 'sps',
                'fieldtype': 'Data',
                'label': 'Samples per Second',
            }
        ]
    });
     d.show();

[avc]

Hi @dave-greeko:

@dave-greeko

d = new frappe.ui.Dialog({
        fields: [
            {
                'fieldname': 'codec',
                'fieldtype': 'Select',
                'label': 'Codec',
                'options': 'G.729\nG.711\nOPUS',
            },
            {
                'fieldname': 'sps',
                'fieldtype': 'Data',
                'label': 'Samples per Second',
                 onchange: function(e) {
                    if(this.value){
                        console.log(this.value)
                }
            }
            }]
    });
     d.show();

Hope this helps.

[corentin]

@dave-greeko

hide/show a field of a dialog

You can do this with the depends_on property.

const dialog = new frappe.ui.Dialog({
    fields: [
        {
            label: "x",
            fieldname: "x",
            fieldtype: "Check",
        },
        {
            label: "y",
            fieldname: "y",
            fieldtype: "Int",
            depends_on: "x", // simple expression
        },
        {
            label: "z",
            fieldname: "z",
            fieldtype: "Data",
            depends_on: "eval: doc.x && doc.y > 10", // JS
        },
    ],
});
dialog.show();