Adding javascript and css libraries for a doctype using custom script

Frappe Framework
1

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

Thank You

2

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

3

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

1 Like
4

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.
});
5 
frappe.ui.form.on("Sales Order Item", {
	onload: function (frm, cdt, cdn) {
		frappe.require([
			"assets/erpnext/js/myTables.js",
			"assets/erpnext/css/myTable.css"
		]);

	}
})
6

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

7

Hi @Maheshwari_Bhavesh ,

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

8

make sure your path which you added in script

9

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

10

may be yes

11

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

12
13 
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
14 
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)

15

@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
16

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

Thanks in advance

17

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

18

Where you abe to achieve importing of csss like JS library

19

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

20

yes I was

1 Like