Modern UI – How to Highlight Entire Row in Red on Sales Order (SO301000) using GetRowCss

Question

I am working on a customization in Acumatica 2025 R2 using the Modern UI framework for the Sales Order screen (SO301000).

I want to highlight the entire row in red whenever the CuryUnitPrice does not match my custom field UsrEDIPOPrice (which is defined in a SOLine extension).

I have implemented a TypeScript file and an SCSS file. However, the row styling is not being applied.

TypeScript Code (`SO301000.ts`)

import {
    RowCssHandlerArgs,
    handleEvent,
    CustomEventType
} from "client-controls";

import "./SO301000_CYBEDIWebService.scss";

export class SOOrderEntryExt {

    @handleEvent(CustomEventType.GetRowCss, { view: "Transactions" })
    getTransactionsRowCss(args: RowCssHandlerArgs) {

        const row = args?.selector?.row;
        if (!row) return "";

        // Unit Price
        const curyUnitPrice = row.CuryUnitPrice?.value;

        // 🔥 Equivalent of GetExtension<SOLineExt>()
        const usrEdiPoPrice = row?.extensions?.SOLineExt?.UsrEDIPOPrice?.value;

        // Apply red styling if mismatch
        if (
            curyUnitPrice != null &&
            usrEdiPoPrice != null &&
            curyUnitPrice !== usrEdiPoPrice
        ) {
            return "red-row";
        }

        return "";
    }
}

SCSS Code (`SO301000_CYBWebService.scss`)

.red-row {
    // Ensure styling persists when row is selected/focused
    --qp-highlight-color: rgba(255, 0, 0, 0.15) !important;
    --qp-highlight-hover-color: rgba(255, 0, 0, 0.25) !important;

    & > td {
        background-color: rgba(255, 0, 0, 0.15) !important;
    }

    & > td,
    & > td > span,
    & > td > .px-control,
    & > td > input {
        color: #ff0000 !important;
        font-weight: bold !important;
    }
}

Best answer by RohitRattan88

@purva59 Have you added reference to your SO301000_CYBWebService.scss to your html?

like:

<template>
	<require from="./SO301000_CYBWebService.scss"></require>
    .
</template>

I believe this is more relevant to your requirements

This thread helps you to achieve the same.

but I suggest testing on a SO with more than one line. As you might encounter issues for default css for selected row and might think your code is not working as highlighted in mentioned thread.

View original

RohitRattan88 · Accepted Answer

@purva59Have you added reference to yourSO301000_CYBWebService.scssto your html?like:I believe this is more relevant to your requirementsThisthread helps you to achieve the same.but I suggest testing on a SO with more than one line. As you might encounter issues for default css for selected row and might think your code is not working as highlighted in mentioned thread.

Dipak Nilkanth · Answer

Hi ​@purva59,Thisthread helps you to achieve the same.

TypeScript Code (SO301000.ts)

SCSS Code (SO301000_CYBWebService.scss)

Sign up

Social Login

Login to the community

Social Login

TypeScript Code (`SO301000.ts`)

SCSS Code (`SO301000_CYBWebService.scss`)