Dynamically Change Button Color

Question

I have added a PXAction to a custom Graph extension class. This places a "button" at the top of the screen. I want to dynamically change the color of the button in code. How can I do that? Is it possible?

I am using version 19.100.0122

TIA!

Answer 1

Note that those types of changes are not allowed by Acumatica ISV Certification program.

You can use JavaScript to change the CSS styles. Add a JavaScript element anywhere that the customization project editor will allow you:

Fill in script properties, set it as a startup script and put the following JavaScript in the script property (you'll need to change "Test" to the display name of your Action):

function setActionButtonColor(){  
   var x = document.getElementsByClassName("toolsBtn");
   var i;

   for (i = 0; i < x.length; i++) {
     // Replace "Test" by the display name of your action button
     if (x[i].getAttribute("data-cmd") === "Test")
        x[i].style.backgroundColor = "red";
   } 
} 

In DataSource ClientEvents->CommandPerformed property you put the name of the JavaScript method to call (setActionButtonColor):

When opening the page JavaScript method is executed and changes the background color of the Action button:

I tested with this graph extension:

public class SOOrderEntry_Extension : PXGraphExtension<SOOrderEntry>
{
 public PXAction<SOOrder> test;

 [PXUIField(DisplayName = "Test")]
 public virtual IEnumerable Test(PXAdapter adapter)
 {
   return adapter.Get();
 }
}