How do I play a sound in response to a custom action or button in Acumatica?

Question

We have a need to play a sound file on grid cell, for this we have used the below control <audio> similar to how the default Acumatica used in some of the screens for Barcode scanning, etc. We did the same, but when we register the script and control code is changing to <PXControl> and the methods for Play etc., are not not accessible. This is happening only when we try to insert this audio control inside a customization package. On the ASPX all the functionality works fine.

Before Generating Script in the package

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

After Generating Script in the package

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

As “audio” tag is converting into “px: control” tag, it doesn’t support properties like as Preload, Src, Style.

Can you please guide us on this approach?

Answer 1

When using the Aspx Editor with the "Generate Customization Script" button, the only supported way to embed arbitrary HTML tags like <audio> is to use the PXLiteral control. Here's an example of how you would use the PXLiteral control if typing directly into the Aspx Editor:

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

Once the script has been generated, it becomes possible to edit the properties of the control from the layout editor.

For this specific scenario, I would suggest a slightly different approach, involving only the use of JavaScript code connected to the PXDataSource control. The first step is creating a PXAction in your graph that will be invoked when you click on your button:

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, let's assume that you're ok having the button in the main screen toolbar - but you could also map it to a PXButton control somewhere on your page.

Then, using the layout editor, we're going to add a JavaScript control by dragging it to the form.

After the JavaScript control has been added, head over to the properties section and set the script. The script needs to be set as a single-line, but for readability here's a nicely formatted version of the script we're going to 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 is shipped with Acumatica, but you are free to use a sound from another URL, or ship one with your customization. If using an external URL, make sure to use the right protocol, HTTP/HTTPS.

The last step is hooking the data source to your JavaScript function. To do that, click on 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'll see the Test button in the toolbar of the form. If you click on it, you'll hear a nice ding!

The sound will be played unconditionally, no matter what happens in your PXAction delegate. If you wanted to play the sound under specific conditions only, one way to achieve that would be to read the content of a field on the screen that is set by your delegate, similar to what is done in the IN305000 page:

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