How to (correctly) add JavaScript code to a Customization Project Screen in Acumatica?

Question

I'm trying to add a button to a customization screen in Acumatica that will run a small JavaScript function when clicked.

I am able to type the function inside a JavaScript control, which will be called from the button's Click or MouseDown events. I can also directly type the function into any of these 2 button events, without the need of the JavaScript control.

Using a basic alert("test"); for testing, I can confirm the code runs, with any of the 2 methods I described above.

The problem:

Clicking on the button doesn't run the code. Instead, the message pops up right after the screen loads, and it actually does it 2 times, so it seems the function runs automatically twice on screen load.

• Is this possibly a bug? or am I doing something wrong?
• Is there a "correct" way or a specific set of steps to follow in order to include JavaScript code into a Customization Screen?

Notes:

• Currently testing on Acumatica 2022 R1.
• I have tested this prior to and after publishing the screen, getting the same results.

Answer 1

Add a Javascript function in Asp:Content block:

<script type="text/javascript">
    function Test() {
        alert("Test");
    }
</script>

Put the name of the Javascript function in PXButton ClientEvents property:

<px:PXButton ID="edTest" runat="server" CommandSourceID="ds">
    <ClientEvents Click="Test" />
</px:PXButton>

It's hard to tell why alert is showing many times without looking at your code.

Check the following:

1. is there a JS function in script block? or just JS alert statement?
2. are there multiple client events? perhaps you have hooked CommandPerformed
3. do you declare a document ready Javascript event that could execute alert?

I suggest trying on a new page to eliminate these potential mistakes. I tested code above by modifying Sales Order page directly (SO301000) and it does produce a single alert message when clicking test button.

Answer 2

One possible solution would be to define the function in the javascript object as you are doing. Then on the onclick event of the button you can call the function that you defined in the javascript block. A sample of this type of code can be found in the CS206020.aspx or OU201000.aspx page. It is imperative that you use the Client Events sub element of the PXButton to set the click event to the function that you defined.