Modern UI: Custom Field Not Working on BOM and Stock Item Screens

Hello ​@SKV687,

For the added custom field on the Stock Item screen

TypeScript (TS)
 

import { ItemSettings } from "src/screens/IN/IN202500/IN202500";
import {
 PXFieldState,
 PXFieldOptions,
} from "client-controls";

export interface IN202500_GeneralRevision extends ItemSettings { }

export class IN202500_GeneralRevision {
    (Your Field Name): PXFieldState<PXFieldOptions.CommitChanges>; 
}

HTML

<template>
    <template modify="#divColumnA-General">
        <qp-fieldset id="StockItem1" wg-container="ItemSettings_tab" view.bind="ItemSettings" slot="A" caption="Item Revision">
            <field name="(Your Field Name)"></field> 
        </qp-fieldset>
    </template>
</template>

For the added custom field on the AM208000 screen

TypeScript(TS)
 

import { AMBomItem } from "src/screens/AM/AM208000/AM208000";
import {
    PXFieldState,
    PXFieldOptions,
} from "client-controls";

export interface AM208000_GeneralRevision extends AMBomItem { }

export class AM208000_GeneralRevision {
    (Your Field Name): PXFieldState<PXFieldOptions.CommitChanges>; 
}

HTML 
 

<template>
    <field name="Your Field Name" after="#Documents2 FIELD[name='InventoryID']"></field> 
</template>

Regards,
Vard

​@Vard86 Thanks for the response.

I tried the code you shared, but it’s not working on my end. I ran the build commands, added the package, published it, and verified everything, but I’m still not seeing any success

I tested the following commands:

npm run build-dev --- --env customFolder=development

npm run build-dev --- --env customFolder=development screenIds=IN202500

 npm run build-dev --- --env customFolder=development screenIds=AM208000

Unfortunately, none of these worked.

Hi ​@SKV687 here my sample code using Modern UI Editor Only.

Stock Item Screen

TS File

import { IN202500, InventoryItem } from "src/screens/IN/IN202500/IN202500";

export interface IN202500_CustomFieldBOMandStockItem_generated
  extends IN202500 {}
export class IN202500_CustomFieldBOMandStockItem_generated {}

export interface InventoryItem_CustomFieldBOMandStockItem_generated
  extends InventoryItem {}
export class InventoryItem_CustomFieldBOMandStockItem_generated {
  @fieldConfig({ caption: "Item Revision" })
  UsrItemRevision: PXFieldState;
}

BOM Screen

TS File

import { AM208000, AMBomItem } from "src/screens/AM/AM208000/AM208000";

export interface AM208000_CustomFieldBOMandStockItem_generated
  extends AM208000 {}
export class AM208000_CustomFieldBOMandStockItem_generated {}

export interface AMBomItem_CustomFieldBOMandStockItem_generated
  extends AMBomItem {}
export class AMBomItem_CustomFieldBOMandStockItem_generated {
  UsrItemRevision: PXFieldState;
}

hope above helps !!

​@SKV687 please try this. 

Stock Item:

TS:

import {

 PXFieldState,

 PXFieldOptions,

} from "client-controls";

import { ItemSettings } from "src/screens/IN/IN202500/IN202500";

export interface IN202500_GeneralRevision extends ItemSettings { }

export class IN202500_GeneralRevision {

    UsrItemRevision: PXFieldState<PXFieldOptions.CommitChanges>;

}

HTML:

<template>

    <qp-template modify id="form-General" name="1-1" wg-container="ItemSettings_tab">

    <div modify id="divColumnA-General" slot="A">

        <qp-fieldset id="StockItem1" wg-container="ItemSettings_tab" view.bind="ItemSettings" slot="A" caption="Item Revision">

            <field name="UsrItemRevision"></field>

        </qp-fieldset>

    </div>

    </qp-template>

</template>

I believe this is the case where your import path should get changed to relative instead of absolute.

Try using ./IN20250 and ./AM208000

I cannot remember which part of the path changes to be relative so also try putting the ./ in front of some of other parts if that doesn't fix it.