Adding javascript and css libraries for a doctype using custom script

I want to include some libraries (that of javascript and css) for a doctype. Any help for doing this via custom script.

Thank You

Put your files in a ‘public’ folder in your app, then bench build

Any way to do the same using custom script because i dont have the access to back-end

1 Like

you can try using jQuery getScript.

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});
frappe.ui.form.on("Sales Order Item", {
	onload: function (frm, cdt, cdn) {
		frappe.require([
			"assets/erpnext/js/myTables.js",
			"assets/erpnext/css/myTable.css"
		]);

	}
})

:+1: if it loads file from url as the OP does not have access to backend

Hi @Maheshwari_Bhavesh ,

The script of yours, on using with external library’s url gives error “Invalid path”

make sure your path which you added in script

@Maheshwari_Bhavesh, I’m giving the url path not the path related to assets. Thats what is prompting the error

may be yes

thats what i’m asking exactly. I want to load js libraries via url not from backend

Put your files in a ‘public’ folder in your app, then bench build

Can you explain this in detail regarding the public folder that I just need to put it in public folder. Also how to call it once placed (will frappe.require work) and also there will be no issue at core level in future (especially when updating)

2 Likes
frappe.require([
			"assets/erpnext/js/myTables.js",
			"assets/erpnext/css/myTable.css"
		]);

Need the method to do the same as directly making the file in assets/erpnext/… will cause problem at core level (when doing bench update)

@schilgod

is the correct way to use jQuery to include JS libraries ?

frappe.ui.form.on(“Lead”, {
refresh: function (frm) {
var all_data = ;
var data = ;
$.getScript(‘//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js’, function () {
frappe.call({
method: “frappe.client.get_list”,
args: {
doctype: “Risk Profile”,
fields: [‘*’],
filters: {
lead: frm.doc.name,
},
order_by: ‘name’
},
callback: function (r) {
data = r.message;
var options = data[0];
all_data = Array.from(Object.keys(options), k => options[k]);
console.log(all_data);
var headhtml = “

”;
$(“[data-fieldname=‘risk_profile’]”).html(headhtml);
}
});
$(document).ready(function () {
$(‘#dell’).DataTable({
ajax: all_data
});
});
});
}
});

Name

JS Libraries are imported but not the CSS Library via $.getScript . Any way to achieve so ?

Thanks in advance

why jquery isn’t importing external css library although it is importing js one

Where you abe to achieve importing of csss like JS library

Please refer this post, I can get the CSS file and load $.getScript together in Custom Script.
Hope that it will help you

Adding jQuery Datatable javascript and CSS style with client-side custom script

yes I was

1 Like