I am learning to develop H5 Client scripts for a customer; see my previous post for the beginning.

To give back

My customer Chris Bullock thought client side scripts are pretty awesome, and said it would be cool if there was a library of what other M3 users have done. I proposed to post the script here with his permission, and he agreed for the love to give back.

Functional requirement

The requirement is to develop a script for M3. Purchase Order. Receive Goods – PPS300/E in H5 Client that pulls values from a related field in M3 and populates it in another field. Basically getting attribute values from purchase order line, concatenating their values, then populate that in the Lot number field on the purchase order receipt screen.

More specifically, when the user is receiving goods for a purchase order in PPS300/E, the script should automatically set the Location (WHSL) and Lot number (BANO) with the correct values to not let the user enter incorrect values by accident even with the F4-Browse:

Script

Here is the preliminary script I developed:

var PPS300E_BANO = new function () {
	var color = 'rgb(250, 255, 189)';
	this.Init = function (scriptArgs) {
		var controller = scriptArgs.controller;
		var content = controller.GetContentElement();
		var IBITNO = content.GetElement('IBITNO')[0]; // Item number
		var IBPUNO = content.GetElement('IBPUNO')[0]; // Purchase order number
		var IBPNLI = content.GetElement('IBPNLI')[0]; // Purchase order line
		var WLWHSL = content.GetElement('WLWHSL')[0]; // Location
		var WRBANO = content.GetElement('WRBANO')[0]; // Lot number
		// ensure the Item group is MAT
		ScriptUtil.ApiRequest('/execute/MMS200MI/Get;returncols=ITGR?ITNO=' + encodeURIComponent(IBITNO.value), response => {
			var ITGR = response.MIRecord[0].NameValue[0].Value.trim();
			if (ITGR !== 'MAT') {
				return;
			}
			if (!WLWHSL.readOnly && WLWHSL.value === '') {
				// hard-code the Location to YARD
				WLWHSL.value = 'YARD';
				// color the field
				WLWHSL.style.backgroundColor = color;
				WLWHSL.nextElementSibling.style.backgroundColor = color;
			}
			// get the Attribute number
			ScriptUtil.ApiRequest('/execute/PPS200MI/GetLine;returncols=ATNR?PUNO=' + encodeURIComponent(IBPUNO.value) + '&PNLI=' + encodeURIComponent(IBPNLI.value), response => {
				var ATNR = response.MIRecord[0].NameValue[0].Value.trim();
				// get the attributes
				ScriptUtil.ApiRequest('/execute/ATS101MI/LstAttributes;returncols=AALF?ATNR=' + encodeURIComponent(ATNR), response => {
					// calculate the Lot number
					var BANO = '';
					response.MIRecord.forEach(e => BANO += e.NameValue[0].Value.trim());
					if (!WRBANO.readOnly && WRBANO.value === '') {
						// set the Lot number
						WRBANO.value = BANO;
						// color the field
						WRBANO.style.backgroundColor = color;
						WRBANO.nextElementSibling.style.backgroundColor = color;
					}
				}, (error, message) => MainController.Current.ShowDialog([error, message]));
			}, (error, message) => MainController.Current.ShowDialog([error, message]));
		}, (error, message) => MainController.Current.ShowDialog([error, message]));
	};
};

Development time

When I develop the script, I alternate between pieces of code in Chrome’s JavaScript console and debugger, and the assembled script in a text editor, iteratively until it’s ready, testing along the way with ScriptName.Init({ 'controller': getActiveController() }):

Result

The result is the following, the script sets the Location and Lot number, and highlights them in yellow with the same color as the web browser’s autofill color to indicate that it autofilled the values:

At this point, the user can verify the values and click Next (or press ENTER) to persist the values in M3.

Problems

There are several problems with this script:

1. The script is not able to tell apart whether the user entered the record with Option 1-Create or with Option 2-Change. In the former case, the script should set the values because the values have never been set; but in the latter case, the script should not set the values because they have already been set. I tried controller.Response.ControlData.Bookmark.Opt but it returns "2" for both Options 1-Create and 2-Change which is wrong. We are running M3 UI Adapter version 10.3.1.0.147. In a thread with Reah, she said if we upgrade M3 UI Adapter to version 10.3.1.0.161, I will be able to use controller.GetMode() instead. To be continued.
2. To make M3 API calls, I use ScriptUtil.ApiRequest. But as of M3 UI Adapter version 10.3.1.0.195, that method is deprecated and replaced by MIService. See my thread with Reah. To be continued.

Usability

There is this corner case in usability, unrelated to H5 Client scripts:

Initially, the customer wanted me to set the fields and disable them, no matter what. That works if the user creates a new record with Option 1-Create. But if the user enters an existing record with Option 2-Change and there are already values that another user has previously set, what should the script do? Should the script assume the values are correct and let it be? In which case the script could have guessed incorrectly and leave incorrect values behind (false negative). Or should the script assume the values are incorrect and reset them? In which case the script could have guessed incorrectly and contradict the intention of the previous user (false positive). Furthermore, if the script does reset the values, how will the user know those are new values to persist? Will highlighting in yellow be enough? Or will the user incorrectly assume those are the values currently persisted in M3? I have to read more about WebKit’s autofill design decisions and learn from it. For now, I apply the weakest enforcement: if the field is blank, set it; otherwise, do not; and never disable it.

PENDING

There are several pending issues:

• Upgrade M3 UI Adapter to the latest version
• Use controller.GetMode() to tell apart Option 1-Create and 2-Change
• Replace ScriptUtil.ApiRequest by MIService
• Usability: disable the two fields while calling the M3 API, indicate activity (spinning wheel), revert when done, cancel if gone (ENTER, F3, F5, F12)
• Add exception handling: if == null, try/catch, if response.Message, if !response.MIRecord
• Compose the promises sequentially with request1.then(request2).then(request3) or Promise.all([request1, request2, request3]) instead of nesting them with request1({ request2({ request3() }) })
• Use JavaScript async/await for ease of source code reading
• Use Visual Studio and TypeScript as recommended by the M3 H5 Development Guide (H5 Script SDK)

Conclusion

That was my preliminary script for H5 Client while I am learning how to develop them. I still have to learn more about H5 scripts and autofill, solve current problems, and address pending issues.

Special thanks to my customer Chris Bullock.

The day came I have to develop a script for Infor M3 H5 Client with M3 API calls for a customer. This post will add to my previous post, to Scott’s three previous posts, and to Karin’s previous post.

Disambiguation

Scripts for H5 Client are written in the JavaScript programming language (ECMAScript). Scripts for Infor Smart Office are written in the JScript.NET programming language. Programs for M3 are written in the Java programming language. Despite the similarities, the three languages are different. Smart Office scripts will NOT execute in H5 Client; you will have to re-write most of the code and be familiar with functional programming, jQuery, Deferred, Promises, etc.; it is like back in the days of IBrix.

Documentation

Here is the M3 H5 Development Guide:

Conversion

Here are some tips to convert a Smart Office script to an H5 Client script:

Example of a minimal script for Smart Office:

package MForms.JScript {
	class Test {
		public function Init(element: Object, args: Object, controller : Object, debug : Object) {
			debug.WriteLine('Hello, World!');
		}
	}
}

The equivalent script for H5 Client:

var Test = new function () {
	this.Init = function (scriptArgs) {
		console.log('Hello, World!');
    };
};

Various ways to get a field and its value compared to norpe’s guide for Smart Office:

var controller = scriptArgs.controller;
var host = controller.ParentWindow;
controller.FieldMap.WRCUNM[0]
controller.GetElement('WRCUNM')[0]
H5ControlUtil.GetFieldValue('WRCUNM')
ScriptUtil.FindChild($, 'WRCUNM')[0]
ScriptUtil.FindChild(host, 'WRCUNM')[0]

UPDATE 2017-06-06: According to the H5 Development Guide, the above is not the recommended API, but controller.GetContentElement().GetElement("WRCUNM") instead.

Example to call an M3 API in H5 script:

ScriptUtil.ApiRequest('/execute/CRS610MI/LstByNumber', result => console.log(result), (error, message) => console.log([error, message]))

UPDATE 2017-06-06: According to the H5 Development Guide, the above is not the recommended API, but MIService.Current.execute|executeRequest instead, but I get error ‘MIService is not defined’; perhaps I do not have the latest version of H5 Client.

Chrome Developer tools

Use the Google Chrome Developer tools:

Use it for the list of global variables, code completion, type reflection, console, dynamic execution, debugger, network monitor, DOM, styles:

Pause execution to introspect global variables:

UPDATE 2017-06-06: In the JavaScript console, you can get the current controller with getActiveController() or MainController.Current.Instances.host_X where X is the controller number.

Administrative tool

Use the administrative tool to import/export H5 scripts:

UPDATE 2017-06-06: To update a script, simply re-import it, click Yes to override, and refresh the M3 panel with Actions > Refresh-F5; there is no cache thus no need to add the version number in the script file name unlike Smart Office.

Execute

Attach the script to the panel as usual at Tools > Personalize > Scripts:

Select Actions > Refresh-F5 to load the script:

Use the JavaScript debugger statement in your script to pause execution and invoke the Chrome debugger:

Call M3 API, and refer to my previous post:

Conclusion

That was a quick look at how to develop scripts for Infor M3 H5 Client including calls to M3 API.

Thanks to Scott Campbell of Potato IT for the first look.

Please like, comment, subscribe, share, come author with us, or look at other ways to contribute.

Related documentation

• H5 Client
• H5 Client Scripting – First Look
• M3 API Calls with the H5 Client
• H5 – Requesting, Requested, RequestCompleted Events
• H5 Scripting
• Chrome DevTools Overview
• Getting values from M3 panels with Jscript
• Infor M3 H5 Development Guide
• How to call M3 API with REST & JSON
• How to call M3 API from JavaScript