How to add custom field into the middle of an existing Modern UI grid?

Thank you for sharing your solution with the community ​@allisterchambers48!

If anyone has trouble with this, I managed to implement it using pure TypeScript without any HTML. Here is the code:

import { placeAfterProperty, PXFieldState } from 'client-controls'
import { CROpportunityProducts } from 'src/screens/CR/CR304500/CR304500'

export interface CROpportunityProducts_AddCustomField extends CROpportunityProducts {}
export class CROpportunityProducts_AddCustomField {

	@placeAfterProperty("InventoryID")
	UsrMyCustomField: PXFieldState
}

Hello,

I am trying to add a new filed on stock item Manufacturing TAB, it works in classic UI 

------------DAC----------------

public sealed class EWSFAMInventoryItemExt:PXCacheExtension<PX.Objects.AM.CacheExtensions.InventoryItemExt, PX.Objects.IN.InventoryItem> {

  #region UsrEWSFAPSDataSync

  public abstract class usrEWSFAPSDataSync:PX.Data.BQL.BqlBool.Field<usrEWSFAPSDataSync> { }

  [PXDBBool]

  [PXDefault(false, PersistingCheck = PXPersistingCheck.Nothing)]

  [PXUIField(DisplayName = "Opcenter APS Data Integration Sync", Enabled = true)]

  public bool? UsrEWSFAPSDataSync { get; set; }

  #endregion

in the Modern UI, it is not working and control not rendered with using decorator @placeAfterProperty("fieldname")

---------TS file-----------------

import {

  PXFieldState,

  placeBeforeProperty,

  placeAfterProperty

} from "client-controls";

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

import { ManufacturingSettings } from "src/screens/IN/IN202500/extensions/IN202500_Manufacturing";

export interface IN202500_EWPAAPS_generated extends IN202500 { }

export class IN202500_EWPAAPS_generated { }

export interface ManufacturingSettings_EWPAAPS_generated

  extends ManufacturingSettings {}

export class ManufacturingSettings_EWPAAPS_generated {

    @placeAfterProperty("AMCheckSchdMatlAvailability")

    UsrEWSFAPSDataSync: PXFieldState;

}
 

and If I use the following HTML with append =’#fsScheduling-Manufacturing’ without using decorator 

--------HTML------------

<template>    

        <field name="UsrEWSFAPSDataSync" append="#fsScheduling-Manufacturing"></field>

</template>

then getting error

-----------Manufacturing TAB where I want to add my control

<qp-fieldset id="fsScheduling-Manufacturing" view.bind="manufacturingSettings" caption="Scheduling">

                <field name="AMCheckSchdMatlAvailability"></field>

</qp-fieldset>

please let me know how we can do it

Hello,

I am trying to add a new filed on stock item Manufacturing TAB, it works in classic UI 

 

------------DAC----------------

public sealed class EWSFAMInventoryItemExt:PXCacheExtension<PX.Objects.AM.CacheExtensions.InventoryItemExt, PX.Objects.IN.InventoryItem> {

  #region UsrEWSFAPSDataSync   public abstract class usrEWSFAPSDataSync:PX.Data.BQL.BqlBool.Field<usrEWSFAPSDataSync> { }

  [PXDBBool]   [PXDefault(false, PersistingCheck = PXPersistingCheck.Nothing)]   [PXUIField(DisplayName = "Opcenter APS Data Integration Sync", Enabled = true)]   public bool? UsrEWSFAPSDataSync { get; set; }   #endregion

in the Modern UI, it is not working and control not rendered with using decorator @placeAfterProperty("fieldname")

---------TS file-----------------

import {   PXFieldState,   placeBeforeProperty,   placeAfterProperty } from "client-controls"; import { IN202500 } from "src/screens/IN/IN202500/IN202500"; import { ManufacturingSettings } from "src/screens/IN/IN202500/extensions/IN202500_Manufacturing";

export interface IN202500_EWPAAPS_generated extends IN202500 { } export class IN202500_EWPAAPS_generated { }

export interface ManufacturingSettings_EWPAAPS_generated   extends ManufacturingSettings {} export class ManufacturingSettings_EWPAAPS_generated {     @placeAfterProperty("AMCheckSchdMatlAvailability")     UsrEWSFAPSDataSync: PXFieldState; }
 

and If I use the following HTML with append =’#fsScheduling-Manufacturing’ without using decorator 

--------HTML------------

<template>             <field name="UsrEWSFAPSDataSync" append="#fsScheduling-Manufacturing"></field> </template>

then getting error

-----------Manufacturing TAB where I want to add my control

<qp-fieldset id="fsScheduling-Manufacturing" view.bind="manufacturingSettings" caption="Scheduling">                 <field name="AMCheckSchdMatlAvailability"></field> </qp-fieldset>

 

please let me know how we can do it

Hello ​@ashrivastava42 ,

Since this thread is already closed, could you post your question as a new topic? It’ll help you get more eyes on your problem, and it makes the fix easier for others to find in the future!