[Tutorial] Common Utilities API | JS Utility API

ERPNext
1

Summary

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

frappe.get_route

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

frappe.get_route()

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

image
image1523×619 100 KB

frappe.set_route

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
frappe.set_route('List/Event/Calendar')

// 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

image
image1521×538 62.5 KB

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"

frappe.provide

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

frappe.provide('frappe.ui.form');

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

frappe.require

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

utils.js


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

leave_application.js

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", {
    
    before_save(frm){
        myUtils.fun1()
        myUtils.fun2()
    }
})

Please share your comments and thoughts

Contact

Github : Antony-M1 · GitHub
Linkedin : Antony

7 Likes