Where can I put code to customize the POS form?

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: https://github.com/frappe/erpnext/blob/2b9c95a9404bf4b59235700c874aa7674638a196/erpnext/accounts/page/pos/pos.js

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!

Hi @daniel1

Either you can add the html button in the below file


Or add controller in the pos.js file, for example check below code

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

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

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

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