H5 Scripts migration from classic UI to New UI

Dear Community,

Does anyone already work on migrating H5 scripts from Classic UI to New UI ? I'm sure yes ! So, by chance, is there any documentation describing how we can migrate an "old" Classic UI script to be compatible with New UI ? I already know that we should use the following statement if (ScriptUtil.version >= 2.0) to detect if we are using new UI or not, but I'm wondering if any document explaining how to migrate scripts already exists somewhere ?

Many thanks for your help.

David.

Find more posts tagged with

Accepted answers

All comments

Rene Bottern

Look at this post: (+) Alias category 3 in order entry OIS101 - General Discussion - M3 - Customer & Partner Community - Infor Community

David Tollet

Hi @rene-bottern ,

Thanks for your reply, but unfortunately, I don't see any instructions on script migration tips in this post ? Am I missing sth ? there is a mention about a KB and an early announcment post but I don't find them.

Rene Bottern

The KB is supposed to be available shortly, but I haven't seen anything posted yet either.

Just make sure to subscribe (bookmark) that post, and I assume the KB will be posted there when available.

David Tollet

Does anyone have any update on this KB that should give some instructions on how to migrate H5 scripts from Classic UI to New UI ?

Thanks !

Legacy Contributor

The guide should be in the Infor M3 H5 Development Guide that can be found in KB 1909067. There is a Converting to Angular scripting framework chapter at the bottom part of the document.

Legacy Contributor

I've recently worked on H5 scripts extensively and had to go through the process of migrating the H5 script to the new portal UI. I couldn't find good resources on this topic so a lot of what I did was trial and error. If we already have an existing H5 script in the old UI, the process of adding support for the new UI involves the following steps.

1) Let us assume the following line of JavaScript code in the old UI which needs to be migrated to new UI. The goal is to implement a H5 script which works both in the old and new UI without having multiple script implementations for both of these.

ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight")[0].style.fontWeight = "550";

The above line of code fetches the label element named "ColemanAIPricingInsight" and adds a CSS style property to it, a font weight of "550" in this case. This line of code breaks in the new UI and needs to be fixed accordingly.

2) The first step in any H5 migration process is to log objects and understand the tree structure using Chrome developer tools. Sample log statements for old and new UI are follows.

if(ScriptUtil.version == "2.0") {

console.log('New UI: ScriptUtil.FindChild(this.host, ColemanAIPricingInsight)');

console.log(ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight"));

}

else {

console.log('Old UI: ScriptUtil.FindChild(this.host, ColemanAIPricingInsight)');

console.log(ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight"));

}

The above lines of code help us understand the tree structure of ColemanAIPricingInsight object and these structures are different in old UI(jQuery) and new UI(Angular)

3) Once we understand the nested tree structures, we need to identify the relevant nested object where the "style"

property is present in the new UI. For the old UI, this is mostly in the 0th index object, but for the new UI, this keeps changing on the scenario. For the above example, it is as follows.

ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight")[0].childNodes[1].childNodes[0].style.fontWeight = "550";

It can be inferred from the above line of code that the style property for ColemanAIPricingInsight in the new UI is nested in the path ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight")[0].childNodes[1].childNodes[0].

4) The final implementation for our example is as follows.

if(ScriptUtil.version == "2.0") {

console.log('New UI: ScriptUtil.FindChild(this.host, ColemanAIPricingInsight)');

console.log(ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight"));

ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight")[0].childNodes[1].childNodes[0].style.fontWeight = "550";

}

else {

console.log('Old UI: ScriptUtil.FindChild(this.host, ColemanAIPricingInsight)');

console.log(ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight"));

ScriptUtil.FindChild(this.host, "ColemanAIPricingInsight")[0].style.fontWeight = "550";

}

The above code works both in old and new UI and the statements executed will depend on the script version. If ScriptUtil.version returns "2.0", it can be inferred as new UI and if it returns any other value, it can be inferred as old UI.

TLDR: I know this can be a little confusing to read. It took me a while to figure this out. Please feel free to reach out to me and I can walk you through the process.

antonio-caria

Don't use if(ScriptUtil.version == "2.0") {

Use if(ScriptUtil.version >= 2) { (2.0 not needed)

Copyright © 2025 Infor. All rights reserved.