In the Classic screen, I use an action to highlight (change the row color of) records in the grid based on the value of the UsrFRCanShip field. When I click the action, the row colors update as expected (see the screenshot below).
After migrating the screen using the conversion tools:
The screen loads correctly in Modern UI, but the action no longer applies the row coloring in the grid.
Could you please advise how to implement this grid row coloring behavior in Modern UI?
Hi
To implement row coloring in Modern UI:
Add an unbound DAC field (for example, UsrRowClass) that determines the row state based on UsrFRCanShip.
Set its value in RowSelected.
Bind that field to a CSS class or conditional formatting in the Modern UI grid.
Row styling in Modern UI must be data-driven, not applied dynamically through UI attribute calls like in Classic UI.
It requires manual reimplementation after conversion.
Hi jquintal63,
You can use the following example to implement grid row coloring in the Modern UI:
CSS→ IGXX5099.css
.green-row {
color: green !important;
}HTML→ IGXX5099.html
<template>
<require from="./IGXX5099.css"></require>
.................
</template>TS→ IGXX5099.ts
export class IGXX5099 extends PXScreen {
/*..........................*/
static getRowCss(args: RowCssHandlerArgs) {
const row = args?.selector?.row;
if (row && row?.IsColor?.value > 0) {
return "green-row";
}
return undefined;
}
@handleEvent(CustomEventType.GetRowCss, { view: "ResultPreview" })
getResultPreviewRowCss(args: RowCssHandlerArgs) {
return IGXX5099.getRowCss(args);
}
}// Views
In my example, IsColor is a boolean DAC field that determines whether the grid row should be highlighted
Hi jquintal63,
You can use the following example to implement grid row coloring in the Modern UI:
CSS→ IGXX5099.css
.green-row {
color: green !important;
}HTML→ IGXX5099.html
<template>
<require from="./IGXX5099.css"></require>
.................
</template>TS→ IGXX5099.ts
export class IGXX5099 extends PXScreen {
/*..........................*/
static getRowCss(args: RowCssHandlerArgs) {
const row = args?.selector?.row;
if (row && row?.IsColor?.value > 0) {
return "green-row";
}
return undefined;
}
@handleEvent(CustomEventType.GetRowCss, { view: "ResultPreview" })
getResultPreviewRowCss(args: RowCssHandlerArgs) {
return IGXX5099.getRowCss(args);
}
}// Views
In my example, IsColor is a boolean DAC field that determines whether the grid row should be highlighted
Hi, thank you for your help. I just have one more question regarding the custom CSS file that I want to include in my customization project.
Should I add it through the Files section in the Customization Project Browser? If so, what is the correct physical path where the file should be stored so that Acumatica recognizes and loads it properly?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.