[Tutorial] Common Utilities API | JS Utility API


In this tutorial, I delve into ERPNext’s common utility APIs, with a particular focus on JavaScript. Throughout the guide, you’ll find a wealth of information complemented by an array of images for enhanced clarity. Let’s embark on this insightful journey together.

Common Utilities API


Basically, this function Returns the current route as an array.


Out Put

["List", "Task", "List"]
  • The First index denotes the Type of the View like List or Form
  • The Second index denotes the Doctype
  • The Third index denotes the Type of View like Reports, Kanban, Tree, Dashboard, Gantt, Calander, List

Here the sample example image


Basically, this function is used to move one page to another page like if I am in Employee List View I can move to Task doctype List or so many views.

Here the example

// route in parts
frappe.set_route('List', 'Task', 'List')

// route as array
frappe.set_route(['List', 'Task', 'Gantt'])

// route as string

// route with options
frappe.set_route(['List', 'Task', 'Task'], { status: 'Open' })
  • First Index List or Form
  • Second Index Doctype
  • Third Index Type OF View like
    • List
    • Report
    • Kanban
    • Gantt
    • Dashboard
    • Image

Here the example

frappe.format(value, df, options, doc)

Format a raw value into user presentable format.

frappe.format('2019-09-08', { fieldtype: 'Date' })
// "09-08-2019"

frappe.format('2399', { fieldtype: 'Currency', options: 'currency' }, { inline: true })
// "₹ 2,399.00"


Creates a namespace attached to the window object if it doesn’t exist.


// has the same effect as
window.frappe = {}
window.frappe.ui = {}
window.frappe.ui.form = {}


I personally feel this function helps lot you can import or load the existing or custom js files
for example i have the utils.js in my custom app I wrote some custom functions i want to use it other doctype js I can use with help of this funtion.
for example


const fun1 = () => {
    alert('Funtion 1')

const fun2 = () => {
    alert('Funtion 2')

I want to use it these function in my custom_app for example I want to add extra funtions in the Leave Application doctype I added a js file in the public I can access like this. note whenever you create a js file in public folder that file store in the assets folder as well automatically so you have to access from the assets folder. like this


var myUtils = Object()
frappe.require('/assets/custom_app/js/utils.js', () => {
    myUtils.fun1 = fun1;
    myUtils.fun2 = fun2;
    // I can access those functionalities in through myUtils Object

frappe.ui.form.on("Leave Application", {

Please share your comments and thoughts


Github : Antony-M1 · GitHub
Linkedin : Antony