Frappe JavaScript Utils — Complete Guide (v15)

What are JavaScript Utilities in Frappe?

The JavaScript Utilities in Frappe are a set of helper functions that streamline client-side development. They are used in Desk, Form scripting, Pages, and Custom Apps to handle common UI, data formatting, HTTP requests, and convenience operations without writing repetitive logic.
These utilities are available globally under the namespace:

frappe.utils

When should you use JS Utils?

Use JS Utils when doing frontend scripting in:

• Client Scripts (*.js)
• Custom Form Scripts
• Page Scripts (page_name.js)
• Custom Reports
• Desk UI components
• Web Forms

Examples:

• Format dates for display
• Parse numbers safely
• Generate slugs
• Clone objects without mutation
• Create random IDs
• Encode/Decode HTML entities
• Browser clipboard access

How to use JS Utils?

Every utility is available through:

frappe.utils.methodName()

You must write scripts in:

<app>/public/js
OR
Custom Script via UI

The functions are loaded at runtime, no import is needed in Desk context.

Core JavaScript Utilities (v15)

Below are frequently used utilities in Frappe v15, verified from the official codebase.
(Names may differ from older versions because unused APIs were removed in v15.)

1. String Helpers

frappe.utils.is_null_or_empty(value)

Returns true if value is null, undefined, or empty.

frappe.utils.is_null_or_empty("");
// true

frappe.utils.slug(str)

Converts text into a URL-friendly slug.

frappe.utils.slug("Hello Frappe World");
// "hello-frappe-world"

Uses rules from the slug generator: lowercasing, space and punctuation handling.

frappe.utils.sanitize_html(str)

Removes unsafe HTML for safe display.

const safe_html = frappe.utils.sanitize_html(user_input);

2. Date & Time Helpers

frappe.utils.now_datetime()

Returns the current date and time in Frappe standard format.

const datetime = frappe.utils.now_datetime();

frappe.utils.nowdate()

Returns date (YYYY-MM-DD)

let today = frappe.utils.nowdate();

frappe.utils.now_time()

Returns time (HH:mm:ss)

let time = frappe.utils.now_time();

frappe.utils.user_date(dateStr)

Formats a date according to user’s regional preferences.

frappe.utils.user_date("2025-01-01");
// "01/01/2025" depending on locale

3. Number Helpers

frappe.utils.round(value, precision)
Rounds a number to the given decimal places.
frappe.utils.round(5.6789, 2);
// 5.68

frappe.utils.format_number(value, format)

Formats using locale number format.

frappe.utils.format_number(12345.678, "#,###.##");

4. Array/Object Helpers

frappe.utils.deep_clone(obj)

Clones deeply without changing the original object.

let copy = frappe.utils.deep_clone(obj);

frappe.utils.map_array(arr, key)

Extracts specific key values from array of objects.

const names = frappe.utils.map_array(users, "name");

5. Browser Helpers

frappe.utils.copy_to_clipboard(text)

Copies text to clipboard (Desk UI user permission required).

await frappe.utils.copy_to_clipboard("Hello World");

frappe.utils.get_url(arg)

Builds absolute URLs from parts.

frappe.utils.get_url("/api/resource/Item");
// "https://site.local/api/resource/Item"

6. Random Generators

frappe.utils.get_random(suffixLength)

Generates a random alphanumeric string.

let id = frappe.utils.get_random(6);

7. Promise Helpers

frappe.utils.sleep(ms)

Async delay utility for throttling UI actions.

await frappe.utils.sleep(300);

8. Miscellaneous Helpers

frappe.utils.escape_html(text)

Escapes unsafe HTML characters.

const escaped = frappe.utils.escape_html("<script>");

frappe.utils.unescape_html(text)

Restores escaped HTML.

frappe.utils.unescape_html("<div>");
// "<div>"

Realtime Integration Example

Using JS Utils in a Client Script:

frappe.ui.form.on('Sales Order', {
refresh(frm) {
const today = frappe.utils.nowdate();
frm.set_value("delivery_date", today);
}
});

Best Practices & Tips

• Prefer user_date() instead of manual formatting
• Avoid using browser new Date() for business logic
• Prefer deep_clone() for complex state changes
• Store sensitive text via sanitize_html()
• Always handle clipboard copying with await
• Use get_url() for robust hostname handling