Skip to main content
Question

Custom JavaScript for Modern UI Screens

  • February 25, 2026
  • 6 replies
  • 51 views

Forum|alt.badge.img

Hello Community,

How can I add my custom JavaScript code to a Modern UI screen?

 

Regards,

Vard

6 replies

darylbowman
Captain II
Forum|alt.badge.img+16

TypeScript gets compiled into JavaScript during a package publish. You'll need to rewrite it in TypeScript.


Forum|alt.badge.img+1
  • Jr Varsity I
  • February 25, 2026

Hi ​@Vard86,

You just need to rewrite the code in the TypeScript (.ts) file. It will work as expected since the code is compiled into JavaScript during the package publishing process. So simply implement the code in the TypeScript file.


Forum|alt.badge.img
  • Author
  • Varsity I
  • February 25, 2026

Hi ​@Vard86,

You just need to rewrite the code in the TypeScript (.ts) file. It will work as expected since the code is compiled into JavaScript during the package publishing process. So simply implement the code in the TypeScript file.

Hello ​@aryanjadhav50 ,

For example, I use this function in my customization for the Classic UI. For the Modern UI, do I need to create a .ts file and add this function there? And will it work after publishing, not just after building?

function DublClick(ds, context) {
var grid = document.getElementById("ctl00_phG_tab_t0_grid_scrollDiv");
function DBCLickLocal(event) {
if (context.cell.column.dataField != "ReceiptQty" && context.cell.column.dataField != "AllowComplete") { px_alls['ds'].executeCallback('POReceiptLineSplittingExtension_ShowSplits'); }
} grid.addEventListener('dblclick', DBCLickLocal());
grid.removeEventListener('dblclick', DBCLickLocal());
}

Regards,
Vard


darylbowman
Captain II
Forum|alt.badge.img+16

You won't be able to copy it as-is, no. For one thing, Modern UI screens are constructed differently, so even if it compiled it wouldn't find the same elements.

Building does the same thing.


Forum|alt.badge.img+1
  • Jr Varsity I
  • February 25, 2026

Hi ​@Vard86,

You just need to rewrite the code in the TypeScript (.ts) file. It will work as expected since the code is compiled into JavaScript during the package publishing process. So simply implement the code in the TypeScript file.

Hello ​@aryanjadhav50 ,

For example, I use this function in my customization for the Classic UI. For the Modern UI, do I need to create a .ts file and add this function there? And will it work after publishing, not just after building?

function DublClick(ds, context) {
var grid = document.getElementById("ctl00_phG_tab_t0_grid_scrollDiv");
function DBCLickLocal(event) {
if (context.cell.column.dataField != "ReceiptQty" && context.cell.column.dataField != "AllowComplete") { px_alls['ds'].executeCallback('POReceiptLineSplittingExtension_ShowSplits'); }
} grid.addEventListener('dblclick', DBCLickLocal());
grid.removeEventListener('dblclick', DBCLickLocal());
}

Regards,
Vard

If your screen is not a custom screen, the Modern UI files are already available for it. What you need to do is convert your JavaScript code snippet into TypeScript and add it to the screen’s .ts file. After that, rebuild the screen through the terminal. It should then work as expected.


Forum|alt.badge.img
  • Author
  • Varsity I
  • February 25, 2026

@darylbowman  and ​@aryanjadhav50  Thank you very much to both of you.

I will try this and let you know the result.

Regards,

Vard