Hi Team
In the Sales Order screen (SO301000), we have the Add Matrix Item popup, where the grid displays the quantity along with the UOM (for example, 10 EA).
In the Classic UI, this UOM display was removed in the aspx.cs file using the existing SetUOMFormat logic.
I’m trying to achieve the same behavior in the Modern UI. I found that the relevant logic appears to be in the SO301000_AddMatrixItems TypeScript file, specifically within matrix-grid-manager.
However, I am unable to extend or override this file from the development folder.
I’ve shared the relevant base code files below for reference.
import {
IGridColumn,
handleEvent,
CustomEventType,
RowCssHandlerArgs,
CellCssHandlerArgs,
PXViewCollection,
QpGridEventArgs,
} from "client-controls";
import { AddMatrixItemsBase, EntryMatrix } from "../../../IN/common/matrix-items/panel-add-matrix-items/panel-add-matrix-items";import { SO301000 } from "../SO301000";import { MatrixGridManager } from "./../../../IN/common/matrix-items/matrix-grid-manager";
export interface SO301000_AddMatrixItems extends SO301000, AddMatrixItemsBase { }export class SO301000_AddMatrixItems extends AddMatrixItemsBase {
public AdditionalAttributesOnFilterColumns(column: IGridColumn) {
return MatrixGridManager.AdditionalAttributesFilterColumns(column);
}
public MatrixOnFilterColumns(column: IGridColumn) {
return MatrixGridManager.MatrixFilterColumns(column);
}
public MatrixOnColumnsGenerated(columns: IGridColumn[]) {
return MatrixGridManager.MatrixColumnsGenerated(columns);
}
public MatrixItemsOnFilterColumns(column: IGridColumn) {
return MatrixGridManager.MatrixItemsFilterColumns(column);
}
public MatrixItemsOnColumnsGenerated(columns: IGridColumn[]) {
return MatrixGridManager.MatrixItemsColumnsGenerated(columns);
}
@handleEvent(CustomEventType.GetRowCss, { view: "Matrix" })
public getMatrixRowCss(args: RowCssHandlerArgs<PXViewCollection<EntryMatrix>>) {
return MatrixGridManager.GetRowCss(args?.selector?.row);
}
@handleEvent(CustomEventType.GetCellCss, { view: "Matrix", column: MatrixGridManager.ExtraColumn })
public getMatrixCellCss(args: CellCssHandlerArgs) {
return MatrixGridManager.GetCellCss(args?.selector?.row, MatrixGridManager.ExtraColumn);
}
public onGetMatrixCellText(args: QpGridEventArgs) {
return MatrixGridManager.GetMatrixCellText(args.activeColumn?.field, args.activeRow?.cells, args.activeCell?.cellText);
}
public onMatrixCellChanged(args: any) {
if (this.Header.ShowAvailable.value === true) {
MatrixGridManager.SetColumnName(this.screenService, args.activeColumn?.field);
}
}
}
import {
IGridColumn,
GridCell,
GridColumnDisplayMode,
ScreenService,
ServerCommand,
} from "client-controls";
export class MatrixGridManager {
public static readonly ExtraColumn = "Extra";
public static readonly AttributeValueTemplate = "AttributeValue";
private static readonly BaseUOMField = "BaseUOM";
private static readonly UOMsField = "UOMs";
private static readonly MatrixFields = ["RowAttributeValueDescr", this.ExtraColumn];
private static readonly MatrixItemsFields = [
"UOM",
"Qty",
"InventoryCD",
"Descr",
"New",
"StkItem",
"BasePrice",
"ItemClassID",
"TaxCategoryID"
];
private static readonly AttributesPlaceholderField = "AttributeValue0";
private static readonly FilesKey = "Files";
private static readonly NotesKey = "Notes";
private static matrixGridOldColumnName = null;
public static AdditionalAttributesFilterColumns(column: IGridColumn) {
column.commitChanges = true;
column.displayMode = GridColumnDisplayMode.Text;
column.hideViewLink = true;
return column.field !== MatrixGridManager.ExtraColumn;
}
public static MatrixFilterColumns(column: IGridColumn) {
column.commitChanges = true;
return column.field !== undefined &&
(column.field.startsWith(MatrixGridManager.AttributeValueTemplate) ||
MatrixGridManager.MatrixFields.includes(column.field));
}
public static MatrixColumnsGenerated(columns: IGridColumn[]) {
const totalIndex = columns.findIndex(v => v.field === MatrixGridManager.ExtraColumn);
if (totalIndex >= 0) {
columns.push(columns.splice(totalIndex, 1)[0]);
}
}
public static MatrixItemsFilterColumns(column: IGridColumn) {
column.commitChanges = true;
return column.field !== undefined &&
(column.field.startsWith(MatrixGridManager.AttributeValueTemplate) ||
MatrixGridManager.MatrixItemsFields.includes(column.field)) ||
column.generated === true &&
(column.key === this.FilesKey || column.key === this.NotesKey);
}
public static MatrixItemsColumnsGenerated(columns: IGridColumn[]) {
let templateFieldIndex = 0;
let columnCounter = 0;
for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
const column = columns[columnIndex];
if (column.field === MatrixGridManager.AttributesPlaceholderField) {
templateFieldIndex = columnIndex;
}
if (column.field !== undefined &&
column.field.startsWith(MatrixGridManager.AttributeValueTemplate)) {
column.hideViewLink = true;
columns.splice(columnIndex, 1);
columns.splice(templateFieldIndex + columnCounter++, 0, column);
}
}
}
public static GetRowCss(row) {
if (row?.IsTotal?.value === true) {
return "bold-row";
}
return undefined;
}
public static GetCellCss(row, column: string) {
if (column === MatrixGridManager.ExtraColumn) {
return "bold-row";
}
return undefined;
}
public static SetColumnName(screenService: ScreenService, columnName: string) {
if (!columnName || columnName === MatrixGridManager.matrixGridOldColumnName) return;
screenService.executeCommand(
new ServerCommand("MatrixGridCellChanged", [columnName])
);
MatrixGridManager.matrixGridOldColumnName = columnName;
}
public static GetMatrixCellText(
fieldName: string,
cells: { [k: string]: GridCell },
defaultText: string
): string {
if (
fieldName === undefined ||
fieldName == null ||
fieldName === "" ||
cells === undefined ||
cells == null ||
defaultText === undefined ||
defaultText == null ||
defaultText === ""
) {
return undefined;
}
let uom: string = undefined;
const isTotalField = fieldName === MatrixGridManager.ExtraColumn;
if (isTotalField) {
uom = cells[MatrixGridManager.BaseUOMField].value;
}
const attributeNumber = this.getAttributeNumber(fieldName);
if (attributeNumber !== undefined) {
uom = cells[MatrixGridManager.UOMsField].value[attributeNumber];
}
if (uom !== undefined) {
return `${defaultText} ${uom}`;
}
return undefined;
}
protected static getAttributeNumber(fieldName: string): number {
if (
fieldName === undefined ||
!fieldName.startsWith(MatrixGridManager.AttributeValueTemplate)
) {
return undefined;
}
const attributeNumber = fieldName.substring(
MatrixGridManager.AttributeValueTemplate.length
);
if (
attributeNumber === undefined ||
attributeNumber == null ||
attributeNumber === ""
) {
return undefined;
}
const value = parseInt(attributeNumber, 10);
if (isNaN(value)) {
return undefined;
}
return value;
}
}
The below code which i have extended and tried!
import { QpGridEventArgs } from "client-controls";
import { SO301000_AddMatrixItems } from "src/screens/SO/SO301000/extensions/SO301000_AddMatrixItems";
export interface SO301000_AddMatrixItems_Extension extends SO301000_AddMatrixItems { }
export class SO301000_AddMatrixItems_Extension extends SO301000_AddMatrixItems {
public onGetMatrixCellText(args: QpGridEventArgs): string {
return args?.activeCell?.cellText ?? "";
}
}Could someone please advise on the recommended approach for extending or customizing this logic in the Modern UI?
