Modern UI: Adding custom fields to Line Splitting Grid (SO302000) using Shared Templates

<template>
    <qp-grid id="grid-LineSplitting" view.bind="{{splits-view}}" wg-container="{{splits-view}}_grid2">
        <columns>
            <field name="UsrMXFEPedimentoNbr" after="PickedQty"></field>
            <field name="UsrMXFEImportDate" after="UsrMXFEPedimentoNbr"></field>
        </columns>
    </qp-grid>
</template>

Update your HTML Like This

*************************

Instead of using the HTML Please Update like above

<field name="UsrMXFEPedimentoNbr" after="#grid-LineSplitting"></field>


for TS File
 

import { placeAfterProperty, PXFieldOptions, PXFieldState } from "client-controls";
import { SOShipLineSplit } from "src/screens/SO/SO302000/extensions/SO302000_LineSplitting";

export interface SOShipLineSplit_MyExtension extends SOShipLineSplit {}

export class SOShipLineSplit_MyExtension {
    @placeAfterProperty("PickedQty")
    UsrMXFEPedimentoNbr: PXFieldState<PXFieldOptions.CommitChanges>;

    @placeAfterProperty("UsrMXFEPedimentoNbr")
    UsrMXFEImportDate: PXFieldState;
}

I have tried to change html but, during build the terminal shows the next message 

ERROR in ./src/screens/SO/SO302000/SO302000.html
Module build failed (from ./node_modules/build-tools/html-merge-loader.js):
Error: Element ids are not unique: id=grid-LineSplitting tags=QP-GRID,QP-GRID

If you’re doing this, you shouldn’t need an HTML file

​@anahizentella94  please use modify in your HTML file to avoid the error. 

Ex: <qp-grid modify id=” ”>

<template>
    <field name="UsrMXFEPedimentoNbr" after="#grid-LineSplitting"></field>
    <field name="UsrMXFEImportDate" after="#grid-LineSplitting"></field>
</template>

You don't need this if you created on the grid.

​@anahizentella94 Could you provide an update or pick (or provide) an answer if you’ve figured it out so we can hopefully close this?

​@anahizentella94  Hi, thanks a lot for sharing this great post.

I have successfully added my custom fields to the Line Splitting grid in SO302000 by following your method.

Could you please advise how to add a custom display field to the panel header area of the same Line Details popup (not in the grid)? It’s just for showing a calculated total quantity, no database field required.

Hello ray20, according to T290 Course, you need to add the field with #after attribute.

For example, .ts file 

export class ItemSettings_PhoneRepairShop {
 UsrRepairItem: PXFieldState<PXFieldOptions.CommitChanges>;
 UsrRepairItemType: PXFieldState;
}

In html you need to know the fieldset ID to append the field:

<template>
  <field
    after="#fsItemDefaults-General [name='ItemType']"
    name="UsrRepairItem"
  ></field>
  <field
    after="#fsItemDefaults-General [name='UsrRepairItem']"
    name="UsrRepairItemType"
  ></field>
</template>

Please verify T290 PDF for futher details.

​@anahizentella94  Thank you, I finally did it with other’s guide, here are the take aways:

1. Looks like the original Acumatica Application would customize ShiplineSplitting panel itself with some files like SO302000_lineSplitting, so  I should name my customization files with SO302000_XXXX or SO302000_ZZZZ, to make it compile after the original customization files.
2. Instead of using name="SOShipmentHeader.Usrshippedqty", I should use name="Document.Usrshippedqty".
3. Simple npm the single screen=SO302000 does not work. Some other screen works, but of SO302000, only publish the whole project works. I don't know why.
4. The code in DAC must be changed from [PXUIField(DisplayName="shipped qty")] to [PXUIField(DisplayName="total qty")]. Very tricky point. Maybe there is a native field with the same UI display name "shipped qty". So if I did not change my UI label, it still would not show, maybe due to some conflicts.