How to add JS to custom button

Frappe Framework App Development
1

Hello there,

I need to know in which .js file in which folder I have to place code to add a event to a custom button, which is not in one of any custom app, but in the Time Log App of ERPNext.

I have added the button already, but I can’t figure out where to place the JavaScript / jQuery Code properly to make it work.

Thank you in advance.

2

Hi,
You can do it easily withou using jQuery or other things.
https://frappe.github.io/erpnext/user/manual/en/customize-erpnext/custom-scripts/custom-script-examples/custom-button.html

3

Hi mostafa,

thank you, but this doesn’t solve my problem. I already know that snippet, which actually is written in jQuery.

I need to know, where to place code for custom fields, which are not in any custom apps.

4

You can do one of three things:

  1. Include it in that doc’s [docname].js file. You can use the same syntax of frappe.ui.form.on(“Doctype”, “your_button”, function(…){});

  2. Include it in a custom script bound to that doctype. cur_frm.cscript.your_button = function(…

  3. Include it in a custom app somewhere in appname/public/js/[your file here], with the same exact function you’d use above. Then, in that app’s hooks, in app_include_js, either hook it directly, or create a build.json in your public folder including that file. The js file will be included in the page head and the event will run. More detail on the build process here: Calendar view for sales opportunity? - #8 by ericmachine88

The third way is more setup but provides you much more flexibility - you don’t have to manage a bunch of custom scripts through the UI, you don’t have to edit a Frappe/ERPNext document and therefore avoid merge conflicts, and so on. It’s more setup up front but it’s what I use now for any js that executes on a standard doc.

Good luck!

4 Likes