Client Script Doctype

This page provides detailed documentation for writing custom javascript code for doctypes.
Event triggers 
1. Setup (setup): setup is triggered on page load before any other trigger.
/**
* @param: {string} [tableField] - child table fieldname
* @param: {Object} handlers
*/
frm.onChange({
    "setup": (frm)=>{ 
        /* your code */ 
    }
})
2. Refresh (refresh): refresh is triggered whenever there is any change on the form.
/**
* @param: {string} [tableField] - child table fieldname
* @param: {Object} handlers
*/
frm.onChange({
    "refresh": (frm)=>{ 
        /* your code */ 
    }
})
3. Fields: you can subscribe to any field present in Doctype, you must use filed label in camel case eg. "Customer Name" "customerName". Fields of child table can also be subscribed. Check the example below for usage.
Field triggers can be used to perform validation as the value in the field is being changed or change the field properties.
/**
* Subscribe to field triggers
* 
* @param: {string} [tableField] - child table fieldname
* @param: {Object} handlers
*/
frm.onChange({
    "fieldname": (doc, value)=>{ 
        /* your code */ 
    },
    "childtable.fieldname": (doc, value) => {
        /* subscribe to triggers inside a table */
    }
})
4. On Save (onSave): onSave is executed every time user clicks on the save button. 
onSave is the perfect trigger to perform your client-side validation on the entire document before anything hits the server.
/**
* @param: {string} [tableField] - child table fieldname
* @param: {Object} handlers
*/
frm.onChange({
    "onSave": (frm)=>{ 
        /* your code */ 
    }
})
5. Submit (onSubmit): onSubmit is executed when the user submits the document by clicking on the submit button. onSave trigger is executed before onSubmit.
/**
* @param: {string} [tableField] - child table fieldname
* @param: {Object} handlers
*/
frm.onChange({
    "onSubmit": (frm)=>{ 
        /* your code */ 
    }
})
Field modification
1. Changing field property (setProp): There are the following field properties that can be changed programmatically using setProp method.
Is Read Only (readOnly)
Is Required (reqd)
Is Hidden (hidden)
Label (label)
Options (options)
/**
* @param: {string} fieldname
* @param: {string} property name [readOny, reqd, hidden, ...]
* @param: {boolean|string|Array} property value 
*/
frm.setProp('lead_name', 'hidden', true)
frm.setProp('lead_name', 'label', "New Label For Lead")
frm.setProp('lead_name', 'reqd', true)
frm.setProp('lead_name', 'readOnly', false)
​
// options can be used on Select and Link field types
frm.setProp('lead_source', 'options', ["Website","Blog", "Search"])
​
​
2. Changing field value (setValue): 
/*
* @param: {string} fieldname
* @param: {boolean|string|Object} value must be as per fieldtype
*/
​
// data, lookup, select
frm.setValue('lead_name','Github Inc.') 
​
// integer, float, currency
frm.setValue('lead_value', 10000)
​
// table
frm.setValue('fieldname',{fieldname:value})
​
Form actions
You can programmatically execute form actions as per your use case. These actions can be executed under any form trigger.
frm.save()
frm.submit()
frm.cancel()
frm.delete()
Getting Started
Server Script Doctype
Last updated 4 months ago