Custom JavaScript for Modern UI Screens

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

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

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.

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());
}

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.

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

I will try this and let you know the result.

Regards,

Vard