How to play sound in response to a user action or button in Acumatica?

Question

We need to play the sound file on the grid cell, for this we used the <audio> control below, similar to how Acumatica is used by default on some screens to scan a barcode, etc. We did the same, but when we register the script, and the control code changes to <PXControl> , and the methods for playback, etc. unavailable. This only happens when we try to insert this audio control inside the configuration package. On ASPX, all functionality works fine.

Before creating a script in a package

 <audio id="audiobeep" preload="auto" src="http://www.soundjay.com/button/beep-07.wav" style="visibility: hidden" /> 

After generating the script in the package

 <px:Control runat="server" ID="audiobeep" /> 

Since the "audio" tag is converted to a "px: control" tag, it does not support properties such as Preload, Src, Style.

Can you direct us to this approach?

Answer 1

When using the Aspx editor with the Create Custom Script button, the only supported way to embed custom HTML tags, such as <audio> , is to use the PXLiteral control. Here is an example of how you will use the PXLiteral control when entering directly into the Aspx editor:

 <px:PXLiteral runat="server" Text="&lt;h1>Test!&lt;/h1>" /> 

After creating the script, it becomes possible to edit the properties of the control from the layout editor.

For this particular scenario, I would suggest a slightly different approach, involving only the use of JavaScript code associated with the PXDataSource control. The first step is to create a PXAction in your chart, which will be called when the button is clicked:

 public PXAction<Customer> test; [PXUIField(DisplayName = "Test", MapEnableRights = PXCacheRights.Update, MapViewRights = PXCacheRights.Select, Enabled = false)] [PXButton(ImageKey = PX.Web.UI.Sprite.Main.Process)] public virtual IEnumerable Test(PXAdapter adapter) { //TODO: Do something useful return adapter.Get(); } 

For simplicity, suppose you have a button on the toolbar of the main screen, but you can also map it to a PXButton control somewhere on your page.

Then, using the layout editor, we will add a JavaScript control by dragging it into the form.

After adding the JavaScript control, go to the properties section and install the script. The script should be installed as a one-liner, but for readability here is a well-formatted version of the script that we will use:

 function commandResult(ds, context) { if (context.command == 'Test') // Test is the name of the PXAction we created earlier { var audio = new Audio('../../Sounds/Ding.wav'); audio.play(); } } 

Note. The Ding.wav file comes with Acumatica, but you can use the sound from a different URL or send it with customization. If you are using an external URL, be sure to use the correct HTTP / HTTPS protocol.

The final step is to bind the data source to your JavaScript function. To do this, click the DataSource section of the layout editor, open the Client Events group from the property editor and set the CommandPerformed event to commandResult , which is the name of the JavaScript function we created.

After publishing, you will see the Test button on the form toolbar. If you click on it, you will hear a nice ding!

The sound will play unconditionally, no matter what happens to your PXAction delegate. If you want to play sound only under certain conditions, one way to achieve this is to read the contents of the field on the screen specified by your delegate, similar to what was done on page IN305000:

 var description = px_alls["edDescriptionPnl"]; if (description != null && description.getValue() != null) { var audio = new Audio('../../Sounds/Ding.wav'); audio.play(); }