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.

Answer 1

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;
}