Solved

Change text colour on a form


Userlevel 4
Badge +1

 

Hello, I’m trying to change the colour of some text on a form. Specifically on screen PM.30.10.00 Projects. This contains a field called Status and I would like to set the colour to red when the status is Active.
By following the article below, I’ve been able to change the colour of the status field when the description field is updated! 
https://asiablog.acumatica.com/2016/12/client-events-using-javascript.html
 


To do this I have added a JavaScript control to the form and entered a Javascript function, shown below.

 

The script is called on the ValueChanged event on the Description field.

Having the colour of the status value set when the description value changes isn’t much use. I’d like to use the ValueChanged event on the Status field, however, because Status is a readonly field the ValueChanged event doesn’t fire. 
The other event I have attempted to use is the CommandPerformed client event on the DataSource:ProjectEntry object. But this event fires before the Status value is written to the form, so I cannot use this event. 
Can anyone suggest which of the ClientEvents could/should be used? I guess I’m looking for an event which fires just after the status value is written to the form.

icon

Best answer by mehdihasanov 15 March 2023, 16:27

View original

10 replies

Userlevel 3
Badge +2

Perhaps you could try the “SelectMethod” property of the Form object. This should trigger whenever there is a select operation, which is on every redraw when a value changes.

 

Userlevel 4
Badge +1

Hi Marco, 
Thanks for taking the time to reply.
I’ve added the method name to the SelectMethod property but it hasn’t worked. The Javascript method didn’t fire and the text didn’t turn red. 

It did affect the Projects lists page, the projects are no longer listed and an error is returned. 


I’m not sure that the SelectMethod is the correct property to use but I cannot find any documentation on it so I’m not exactly sure what it is meant to be used for. I expected that properties which could call a Javascript method would all be listed under the ClientEvents group.

Any other ideas?

Userlevel 7
Badge +17

Hi, @stephenward03  I did this requirement for one of my projects. Please find the steps below.

 

  • Created a .css file with the style and placed this file in the App_Themes → Default folder
  • Added this CssClass to the field. Please find the screenshot for reference.

 

 

 

.css file code


.CustomAMIClassRed {
    color: red;
    font-weight: bold;
}

 

 

 

 

Userlevel 4
Badge +1

Hi Naveen, 
Thanks for your message. I’ve had a look at adding to the ccs code but I don’t think it will work in my case. I need to change the text colour based on the value in the Status field.

e.g. If Status=Active then set colour=red else set colour=black

I think your solution makes the text in the Notes field red regardless of the value. Unless I’ve misunderstood. 

Thanks
Steve

Userlevel 7
Badge +17

Hi, @stephenward03  That is correct!

It seems there is only one way to achieve this with the javascript and below is the comment from Sergey on this article. https://asiablog.acumatica.com/2016/12/using-colors-in-acumatica.html

 

Please reach out to him, he might help you with your requirement.

 

hope this info is helpful.

Userlevel 4
Badge +1

Hi Naveen, 

I’m not sure how I could reach out to Sergey. Is there a recommended way? 

Also, do you know if the ClientEvents are documented anywhere? I have the Javascript code ready and working, I just cannot figure out which ClientEvent should be used to invoke the Javacript code.

Thanks

Steve

Userlevel 7
Badge +17

Hi, @stephenward03  You can post the comment in the above article, and he will respond to you.

You can always check with @Chris Hackett and he may help you to reach out to Sergey on this.

Userlevel 7
Badge

Hi @smarenich - might you be able to assist @stephenward03 ? Thank you!

Userlevel 4
Badge +1

Hello everyone, after seeing another online article I’ve taken a new approach to this problem, moving away from Javascript and putting the code in the page graph. 

If the code below is copied to the Projects page, PM301000, then the contents of the Status field will appear in red.

public override void Initialize()
        {
            //Access page via http context current handler
            Page page = HttpContext.Current?.Handler as PXPage;
            if (page != null)
            {
                page.Load += Page_Load;
            }
        }

        private void Page_Load(object sender, EventArgs e)
        {
            Page page = (Page)sender;
            PX.Web.UI.PXDropDown myBox = (PX.Web.UI.PXDropDown)ControlHelper.FindControl("edStatus", page);
            if (myBox != null)
            {
                myBox.DataBinding += (object boxsender, EventArgs boxargs) =>
                {
                    PX.Web.UI.PXDropDown box = boxsender as PX.Web.UI.PXDropDown;
                    PXTrace.WriteInformation("About to set colour");
                    box.ForeColor = System.Drawing.Color.Red;
                    PXTrace.WriteInformation("Colour is set");
                };
            }
        }

 

The screenshot below shows the result - the Status of Active is displayed in red text. This is good but I want to change the colour depending on the value of the status field. 

 

So the Page_Load code is updated a little to add an if condition.

private void Page_Load(object sender, EventArgs e)
        {
            Page page = (Page)sender;
            PX.Web.UI.PXDropDown myBox = (PX.Web.UI.PXDropDown)ControlHelper.FindControl("edStatus", page);
            if (myBox != null)
            {
                myBox.DataBinding += (object boxsender, EventArgs boxargs) =>
                {
                    PX.Web.UI.PXDropDown box = boxsender as PX.Web.UI.PXDropDown;
                    if (box.Value != null)
                    {
                        PXTrace.WriteInformation(box.Value.ToString());
                        if (box.Value.ToString() == "A")
                        {
                            PXTrace.WriteInformation("About to set colour");
                            box.ForeColor = System.Drawing.Color.Red;
                            PXTrace.WriteInformation("Colour is set");
                        }
                    }
                };
            }
        }

Unfortunately this doesn’t appear to work and the text is displayed in black.

 

I assumed my if condition was wrong but if I step through the code in visual studio I can see that the condition is met and the line box.ForeColor = System.Drawing.Color.Red; code is being run.  Also, the messages I write to PXTrace have been created too.  

It does appear that the command to update the colour has been run but this isn’t applying to the html in the browser. Can anyone explain what is happening here, and suggest a solution?

Userlevel 2

The approach mentioned here (Is there anyway to change Acumatica Screen UI element color conditionally? | Community) by Nayan helped me with a similar problem.

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved