How do I add row highlighting to a customization contained within a Base Acumatica BLC?

Question

I know how to highlight rows via editing the code behind file of the ASPX page for a BLC, but what if that BLC is a base Acumatica page? I don't believe there is a way to edit and store the edits for those files. If there is, how do I do that? I tried to add some JavaScript to set the backgroundColor to what I wanted, but I was unable to get it to work. Is there a specific syntax for doing that and if so, could I get an example?

EDIT: Solution below presented by Samvel is for 19R1. The CSS files contain the classes which it uses. If you are using an older version, you will have to edit your CSS files to use the color.

I am pretty sure that you can add highlighting using Acumatica Themes and CssClass property of the controls like I have shown in this answer https://stackoverflow.com/a/56465962/6064728 — Samvel Petrosov, Jun 13 '19 at 15:54
what if you just attached the code behind file for the base page into your project? My thoughts: make a small change to the page to force the publish to put your page and code behind into the \CstPublished (not \Pages) folder and in your project include that file in that file location? I am not sure who wins tho (the auto generated file or yours) but something to try. I would assume this is not a certified method however — Brendan, Jun 13 '19 at 16:49
Samvel Petrosov, it is going to be a conditional highlight, not a 100% highlight to all rows. I probably should have stated that. — EricP., Jun 13 '19 at 16:55
Can those conditions pull specific values from specific data fields from the BLC like can be done in the code behind when pulling a value from a grid cell? — EricP., Jun 13 '19 at 17:07
@EricP. here is an article about CSS selectors. If you can write your condition with them then yes. Otherwise, the addition of the JS script to the page can be considered as an alternative method. — Samvel Petrosov, Jun 13 '19 at 17:34
I can look into it, but do you know of any example using JavaScript and Acumatica that will highlight a specific row? I tried different ways, but was unable to force the row's background color to change. — EricP., Jun 13 '19 at 18:09
@EricP. should the whole row be highlighted or a specific column of the row? — Samvel Petrosov, Jun 13 '19 at 18:54
The entire row will be highlighted based on a certain criteria which will be checked within a cell in the row on that grid. — EricP., Jun 14 '19 at 13:50

Samvel Petrosov · Accepted Answer · 2020-10-15T21:05:48.517

You can highlight the line of the grid with some conditions using Javascript. The first thing to do is to get the actual Javascript for it, it will look like below:

function HighligthLines ()
{
    if(px_all && px_all["ctl00_phG_tab_t0_grid"] && px_all["ctl00_phG_tab_t0_grid"].rows)
    {
        let lines = px_all["ctl00_phG_tab_t0_grid"].rows.items;
        for(let i=0;i<lines.length;i++)
        {
            let currentLine=lines[i];
            if(currentLine.getCell("OrderQty").getValue() > 10)
            {
                currentLine.style = 'background-color: red';
                currentLine.repaint();
            }
        }
    }
}

We will use px_all object of Acumatica Javascript API. The script above is checking if the OrderQty is greater than 10 for SO Line and if it is then is setting the background of the line to red.

Now after you have the script you need to add it to Acumatica's Sales Orders page. Add Javascript control above the Grid control like is shown below

And set the properties of the Script control in the following way:

IsStartupScript - True
Script          - the script shown above.

Set EnableClientScript to True for the grid control

Set Client Events -> AfterRefresh , AfterRowChange and Initialize to HighligthLines

Set EnableClientScript to True for the datasource and Client Events -> Initialize , CommandPerformed to HighligthLines

After these steps are done and customization is published you should see the lines of Sales Order with Order Quantity more than 10 with Red background like below:

The suggested approach will work with Acumatica ERP 2019 R1 for lower versions also it is required to add CSS styles to Acumatica ERP CSS.

UPDATE:

In 2019R1 and higher Acumatica has the following predifined CSS styles and basically you don't need to set the style to 'background-color: red' more correct will be to set the style to red or good or red20. If you want to use some other styles you will need to overwrite the 00_Controls.css file.

/*--------------- Styles for the grid cells ---------------*/
.GridRow {
  border-bottom: 1px solid #9FA8DA;
  border-bottom: 1px solid var(--activerow-color, #9FA8DA);
  border-right: 1px solid transparent;
  overflow: hidden;
  background-color: White;
  padding: 7px 8px 5px;
  line-height: 16px;
  min-height: 17px;
}

.GridRow .sprite-icon {
  margin-top: -4px;
}

.GridRow .sprite-icon.control-icon {
  overflow: visible;
}

.GridRow.bad {
  background-color: RGBA(255, 140, 155, 0.5) !important;
  color: #9c2d75 !important;
  border-bottom-color: RGBA(255, 140, 155, 0.5) !important;
}

.GridRow.good {
  background-color: RGBA(156, 237, 171, 0.5) !important;
  color: #007b74 !important;
  border-bottom-color: RGBA(156, 237, 171, 0.5) !important;
}

.GridRow.neutral {
  background-color: RGBA(255, 216, 79, 0.5) !important;
  color: #9c7258 !important;
  border-bottom-color: RGBA(255, 216, 79, 0.5) !important;
}

.GridRow.red {
  color: white !important;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.9) !important;
  border-bottom-color: rgba(255, 0, 0, 0.9) !important;
}

.GridRow.red60 {
  background-color: rgba(255, 0, 0, 0.6) !important;
  border-bottom-color: rgba(255, 0, 0, 0.6) !important;
}

.GridRow.red40 {
  background-color: rgba(255, 0, 0, 0.4) !important;
  border-bottom-color: rgba(255, 0, 0, 0.4) !important;
}

.GridRow.red20 {
  background-color: rgba(255, 0, 0, 0.2) !important;
  border-bottom-color: rgba(255, 0, 0, 0.2) !important;
}

.GridRow.red0 {
  color: red !important;
  font-weight: bold;
}

.GridRow.orange {
  color: white;
  font-weight: bold;
  background-color: rgba(255, 140, 0, 0.9) !important;
  border-bottom-color: rgba(255, 140, 0, 0.9) !important;
}

.GridRow.orange60 {
  background-color: rgba(255, 140, 0, 0.6) !important;
  border-bottom-color: rgba(255, 140, 0, 0.6) !important;
}

.GridRow.orange40 {
  background-color: rgba(255, 140, 0, 0.4) !important;
  border-bottom-color: rgba(255, 140, 0, 0.4) !important;
}

.GridRow.orange20 {
  background-color: rgba(255, 140, 0, 0.2) !important;
  border-bottom-color: rgba(255, 140, 0, 0.2) !important;
}

.GridRow.orange0 {
  color: darkorange !important;
  font-weight: bold;
}

.GridRow.green {
  color: white !important;
  font-weight: bold;
  background-color: rgba(112, 173, 71, 0.9) !important;
  border-bottom-color: rgba(112, 173, 71, 0.9) !important;
}

.GridRow.green60 {
  background-color: rgba(112, 173, 71, 0.6) !important;
  border-bottom-color: rgba(112, 173, 71, 0.6) !important;
}

.GridRow.green40 {
  background-color: rgba(112, 173, 71, 0.4) !important;
  border-bottom-color: rgba(112, 173, 71, 0.4) !important;
}

.GridRow.green20 {
  background-color: rgba(112, 173, 71, 0.2) !important;
  border-bottom-color: rgba(112, 173, 71, 0.2) !important;
}

.GridRow.green0 {
  color: #70ad47 !important;
  font-weight: bold;
}

.GridRow.blue {
  color: white !important;
  font-weight: bold;
  background-color: rgba(91, 155, 213, 0.9) !important;
  border-bottom-color: rgba(91, 155, 213, 0.9) !important;
}

.GridRow.blue60 {
  background-color: rgba(91, 155, 213, 0.6) !important;
  border-bottom-color: rgba(91, 155, 213, 0.6) !important;
}

.GridRow.blue40 {
  background-color: rgba(91, 155, 213, 0.4) !important;
  border-bottom-color: rgba(91, 155, 213, 0.4) !important;
}

.GridRow.blue20 {
  background-color: rgba(91, 155, 213, 0.2) !important;
  border-bottom-color: rgba(91, 155, 213, 0.2) !important;
}

.GridRow.blue0 {
  color: #5b9bd5 !important;
  font-weight: bold;
}

.GridRow.yellow {
  color: black !important;
  font-weight: bold;
  background-color: rgba(255, 255, 0, 0.9) !important;
  border-bottom-color: rgba(255, 255, 0, 0.9) !important;
}

.GridRow.yellow60 {
  background-color: rgba(255, 255, 0, 0.6) !important;
  border-bottom-color: rgba(255, 255, 0, 0.6) !important;
}

.GridRow.yellow40 {
  background-color: rgba(255, 255, 0, 0.4) !important;
  border-bottom-color: rgba(255, 255, 0, 0.4) !important;
}

.GridRow.yellow20 {
  background-color: rgba(255, 255, 0, 0.2) !important;
  border-bottom-color: rgba(255, 255, 0, 0.2) !important;
}

.GridRow.yellow0 {
  color: yellow !important;
  font-weight: bold;
}

.GridRow.purple {
  color: white !important;
  font-weight: bold;
  background-color: rgba(128, 0, 128, 0.9) !important;
  border-bottom-color: rgba(128, 0, 128, 0.9) !important;
}

.GridRow.purple60 {
  background-color: rgba(128, 0, 128, 0.6) !important;
  border-bottom-color: rgba(128, 0, 128, 0.6) !important;
}

.GridRow.purple40 {
  background-color: rgba(128, 0, 128, 0.4) !important;
  border-bottom-color: rgba(128, 0, 128, 0.4) !important;
}

.GridRow.purple20 {
  background-color: rgba(128, 0, 128, 0.2) !important;
  border-bottom-color: rgba(128, 0, 128, 0.2) !important;
}

.GridRow.purple0 {
  color: purple !important;
  font-weight: bold;
}

Would this logic be much different for a custom grid? Would it be much different for a custom grid in a smart panel? I'm assuming no, but I can't get it to work for my smart panel custom grid. — EricP., Jun 24 '19 at 17:43
@EricP. the only difference will be the keys which you use to select the grid control. — Samvel Petrosov, Jun 24 '19 at 17:48
@EricP. try to add the function to Client Events of the grid on smart panel — Samvel Petrosov, Jun 24 '19 at 17:53
I've changed the key to what it's supposed to be. I'm assuming by key you mean the HTML id. I've also added the function to the Client Events of the grid in the smart panel. I have another Javascript function which successfully fires within the grid. Any suggestions on what to double check on which key I need to use? I know there is a key for the table, but an inner table that has _dataT0 attached to it. I'm not sure if that means anything. — EricP., Jun 24 '19 at 18:13
@EricP. can you please add the codes of the smart panel and aspx part to the question? — Samvel Petrosov, Jun 24 '19 at 18:18
I have added the ASPX code for the smart panel along with the two PX Javascripts. — EricP., Jun 24 '19 at 18:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195478/discussion-between-ericp-and-samvel-petrosov). — EricP., Jun 24 '19 at 18:35
@SamvelPetrosov You misspelled ``HighlightLines`` in your script. — Deetz, Oct 15 '20 at 19:34
@Deetz yeah, nice catch! But I am too lazy to take all these screenshots again :D — Samvel Petrosov, Oct 15 '20 at 19:36
@SamvelPetrosov No judgement here. May be worth noting though. — Deetz, Oct 15 '20 at 19:44
@SamvelPetrosov Also, still checking all angles, but this is not working for me. — Deetz, Oct 15 '20 at 19:46
@SamvelPetrosov Is it possible to use a hex color instead? I can only get the standard colors to work. — Deetz, Oct 15 '20 at 20:26

score 2 · Answer 2 · answered Jan 09 '21 at 18:38

For base Acumatica pages, another approach you may want to consider is to access the page in graph extension and subscribe to event handlers for styling.

Below is an example

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PX.Data;
using PX.Web.UI;

namespace MyExtModule
{
    public class MyGraphExt : PXGraphExtension<MyGraph>
    {
        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;
            Style rowStyle1 = new Style();
            rowStyle1.BackColor = System.Drawing.Color.FromArgb(255, 0, 0);
            page.Header.StyleSheet.CreateStyleRule(rowStyle1, page, ".CssRowStyle1");

            Style rowStyle2 = new Style();
            rowStyle2.BackColor = System.Drawing.Color.LightYellow;
            page.Header.StyleSheet.CreateStyleRule(rowStyle2, page, ".CssRowStyle2");

            PX.Web.UI.PXGrid grdMyGridControl = (PX.Web.UI.PXGrid)ControlHelper.FindControl("MyGridControl", page);
            if (grdMyGridControl != null)
            {
                grdMyGridControl.RowDataBound += (object grdsender, PXGridRowEventArgs erdb) =>
                {
                    var data = erdb.Row.DataItem as YourDAC;
                    if (data == null) { return; }
                    if (data.YourDACField == [Your_Value_To_Compare])
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle1";
                    }
                    else
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle2";
                    }
                };
            }
        }
    }
}

This approach worked for me in general, but if the row in the grid is selected, then my row style is being overridden and the color specified in this code isn't being applied. In Generic Inquiry row styling, the color still applies to the selected row. Do you know what needs to be done to allow the colors here to still be applied when the row is selected? — abulger, Jan 17 '22 at 19:52

How do I add row highlighting to a customization contained within a Base Acumatica BLC?

2 Answers2

Linked