Where can I put code to customize the POS form?

Frappe Framework Custom Script
1

Hello!

I am just starting with ERPNext and I am very happy with it so far. I am a developer, so naturally I want to know how I can start tweaking things. I have been able to add a custom button to the Sales Invoice form by following the samples on the custom script page. However, I would really like to customize the POS form (which I think is also a Sales Invoice?). I can’t figure out what I need to do to customize that page.

I have found this file in the Git Hub repo which seems to control most of the page: erpnext/pos.js at 2b9c95a9404bf4b59235700c874aa7674638a196 · frappe/erpnext · GitHub

However, I am not sure how to write a custom script to interact with this page. I could just add my code to the bottom of the file, but customizing a file that will be replaced by an update doesn’t seem like the best way to apply my customizations. Is there a better way?

Just for a simple example, lets say I wanted to add a new custom button next to the “Pay” button on the POS form and have it run some custom javascript. How can I go about this?

Thank you for the help!

2

Hi @daniel1

Either you can add the html button in the below file
https://github.com/frappe/erpnext/blob/develop/erpnext/public/js/pos/pos.html
Or add controller in the pos.js file, for example check below code
https://github.com/frappe/erpnext/blob/develop/erpnext/accounts/page/pos/pos.js#L390-L399

But making changes in the core file is not a good way because while updating you may get the conflicts in the changed files.

3

Thanks for the reply! Is there a better way to do this without changing the core files?

4

Make your customization codes…copy original codes, modify it and put it under your custom app…so you’ll not get conflicts every time you do bench update

2 Likes
5

Hi @daniel1

You need to create your custom page and used the same code from the pos.js file and make changes according to your requirement.
To make custom page Goto Setup > Developer > Page > New Page > select custom app’s module