Progress indicator adorner

Last week in Stockholm norpe showed me how to add a progress indicator Adorner to a ListView when I call an M3 API in a background thread in a Personalized Script for Lawson Smart Office. When I execute a time consuming operation I like to maintain good usability by indicating activity to the user. For that, I used to display a message to the user in a Label like “Loading please wait…”, but that doesn’t catch the eye very well, and/or I used to changed the mouse cursor to Cursor.Wait. but I think that’s a shared resource. So I prefer this new technique.

It’s only two lines of code from Mango.UI.Controls:

ProgressIndicatorAdorner.AddAdorner(element, useOpacity, scaleFactor);
ProgressIndicatorAdorner.RemoveAdorner(element);

Here’s the method’s signature:
Reflector

Here’s the result:
1_ 2_

That’s it.

H5 Client

H5 Client is a new web-based user interface in Infor Workspace that brings Infor M3 to modern web browsers.

H5 Client is built using standard HTML5/JavaScript, and uses jQuery as one of the JavaScript libraries. It can potentially run on any major browser (Microsoft Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, etc.), on potentially any operating system (Microsoft Windows, Mac OS, Linux, etc.), on potentially any device (PC, Mac, iPhone, iPad, Android, etc.). It’s a major milestone since the old Movex Workplace.

Movex Workplace had been built solely for Internet Explorer 6 over 10 years ago with non-standard IE-only features to optimize development and maintenance after Internet Explorer had emerged winner of the first browser war. Despite having been mono-browser, Movex Workplace had been praised by IDC as “the most technologically advanced business portal on the market” extensively using XmlHttpRequest long before the term Ajax was coined.

Fast forward to 2013, the web is growing exponentially with demand for multiple devices, multiple platforms, multiple vendors. H5 Client is the response to that demand and is a new player to complement its big sister Infor Smart Office.

H5 Client was announced and made Generally Available (GA) and I want to advertise it further with this post.

First tests with Google Chrome

  1. To determine if you have H5 Client, open the Grid Information page and look for Application Type mne:
    6
  2. Click on the /mne/ Web Application Link and authenticate with your M3 user/password. It will go to this Home page:
    1
  3. Start an M3 program as usual in the QuickStart, for example CRS610:
    2
  4. The M3 program will start like it did in Movex Workplace, but this time in a modern browser, Google Chrome for instance:
    3
  5. From here, use the program as usual, for example Options > Display CTRL+5:
    4
  6. And Options > Change CTRL+2:
    5

On Safari

Here is a screenshot of H5 Client in Safari on my PC:
3_

On the iPhone

I tested H5 Client on Safari on my iPhone, and here is the result:

Start > CRS610 > Options > Display CTRL+5:
IMG_9107 IMG_9110 IMG_9117

In Landscape View:
IMG_9112

Batch Customer Order – OIS275/B1:
IMG_9113

Customer Orders – OIS300/B:
IMG_9115

Shortcuts

Also, it’s possible to use Shortcuts like in Smart Office:
6

JavaScript

Also, I can use the browser’s Developer Tools and the JavaScript Console to integrate with the H5 Client with Classes similar to Smart Office Scripts (UserContext, Configuration, Controller, Content); that reminds me of MNEAI for Movex Workplace and will probably lead to more posts in the future:
7

Disclaimer

H5 Client is supposed to run as part of Infor Workspace. Thus, H5 Client alone won’t provide all the features necessary for the user.

Also, not all devices and browsers are officially supported. I successfully tested it in Internet Explorer, Google Chrome, and Safari on my PC, and Safari on my iPhone. It failed to run on Firefox on my PC (the entries in the Options menu were disabled), and on Chrome on my iPhone (it froze at /mne/index.jsp). And I yet have to test it on iPad, Linux, Mac OS, and Android.

For more information

To learn more about H5 Client, visit the Summit Week or Inforum 2013.

That’s it! I hope this quick overview will spark an interest in Infor Workspace and H5 Client.

 

UPDATE 2013-03-15: Added link to HTML5.

Smart Office SDK

FYI. Finally, I just attended the official Smart Office SDK training in Stockholm, long after I first saw it and played with it five years ago in Chicago. It was a long wait as I didn’t have a chance to work with it until now. It was worth the wait. Expect to see me write more posts about it to complement PotatoIT’s series and Karin’s series on the subject. If you don’t yet know the Smart Office SDK, it’s Mashups and Scripts on steroids. With it, we can produce more advanced solutions for M3 in Smart Office, beyond what Mashups and Scripts can offer. More soon.

OptiMap_V2

Here is the second version of the OptiMap script for Smart Office that integrates the Delivery Toolbox – MWS410/B with OptiMap – Fastest Roundtrip Solver to calculate and show on Google Maps the fastest roundtrip for the selected Routes. This extends the first version of the script.

In this second version I added the possibility to set the starting address (for example the Warehouse) as the Script argument. See lines 52-54.

import System;
import System.Web;
import System.Windows;
import Mango.UI.Services.Lists;
import MForms;

/*

	OptiMap_V2 for M3
	Thibaud Lopez Schneider, Infor, October 19, 2012 (rev.2)

	This script illustrates how to integrate the Smart Office Delivery Toolbox - MWS410/B with OptiMap - Fastest Roundtrip Solver, http://www.optimap.net/
	to calculate and show on Google Maps the fastest roundtrip for the selected Routes; it's an application of the Traveling Salesman Problem (TSP) to M3.
	This is interesting for a company to reduce overall driving time and cost, and for a driver to optimize its truck load according to the order of delivery.

	To install this script:
	1) Deploy this script in the mne\jscript\ folder of your Smart Office server
	2) Create a Shortcut in MWS410/B to run this script; for that go to MWS410/B > Tools > Personalize > Shortcuts > Advanced > Script Shortcut, set the Name to OptiMap, and set the Script name to OptiMap
	3) Optionally, set the starting address (for example the Warehouse) as the Script argument; the address must be recognized by Google Maps
	4) Create a View (PAVR) in MWS410/B that shows the address columns ADR1, ADR2, ADR3

	To use this script:
	1) Start MWS410/B
	2) Switch to the View (PAVR) that shows the address columns ADR1, ADR2, ADR3
	3) Select multiple Routes in the list (press CTRL to select multiple rows)
	4) Click the OptiMap Shortcut
	5) The Shortcut will run the script, the script will launch OptiMap in a browser and pass the selected addresses as locN parameters in the URL, and OptiMap will optimize the roundtrip

	For more information and screenshots refer to:
	https://thibaudatwork.wordpress.com/2012/10/04/route-optimization-for-mws410-with-optimap/
	https://thibaudatwork.wordpress.com/2013/03/08/optimap_v2/

*/
package MForms.JScript {
	class OptiMap_V2 {
		public function Init(element: Object, args: Object, controller : Object, debug : Object) {
			try {
				// get a reference to the list
				var listControl: MForms.ListControl = controller.RenderEngine.ListControl;
				var listView: System.Windows.Controls.ListView = controller.RenderEngine.ListViewControl;
				if (listControl == null || listView == null) { MessageBox.Show('Error: Couldn\'t find the list.'); return; }
				// get the selected rows
				var rows = listView.SelectedItems; // System.Windows.Controls.SelectedItemCollection
				if (rows == null || rows.Count == 0) { MessageBox.Show('Error: Select multiple routes in the list (press CTRL to select multiple rows).'); return; }
				// get the address columns ADR1, ADR2, ADR3
				var column1: int = listControl.GetColumnIndexByName('ADR1');
				var column2: int = listControl.GetColumnIndexByName('ADR2');
				var column3: int = listControl.GetColumnIndexByName('ADR3');
				if (column1 == -1 || column2 == -1 || column3 == -1) { MessageBox.Show('Error: Couldn\'t find the address columns ADR1, ADR2, ADR3.'); return; }
				// construct the URL
				var query: String = 'http://www.optimap.net/?';
				// set the optional starting address
				var offset: int = 0;
				if (!String.IsNullOrEmpty(args)) { offset=1; query += 'loc0=' + HttpUtility.UrlEncode(args) + '&'; }
				// add the selected addresses
				for (var i: int = 0; i < rows.Count; i++) {
					var row: ListRow = rows[i];
					var ADR1: String = row[column1];
					var ADR2: String = row[column2];
					var ADR3: String = row[column3];
					var address: String = ADR1 + ',' + ADR2 + ',' + ADR3;
					query += 'loc' + (i+offset) + '=' + HttpUtility.UrlEncode(address) + '&';
				}
				// launch OptiMap in a browser
				ScriptUtil.Launch(new Uri(query));
			} catch (ex: Exception) {
				MessageBox.Show(ex);
			}
		}
	}
}

Here is a screenshot of how to set the address as an Argument of the script:

8_

That’s it!

(Oh, and I finally learned how to post source code to WordPress. Duh!)

Related Articles

How to call an M3 Web Service using jQuery

Here’s a simple example of calling an M3 web service using jQuery. In this example, my web service has two input fields and 3 output fields. You’ll obvously need to change the URL to the web service and the format of your soap request to match your WSDL.

<html>
<head>
    <title>example m3 soap web service with jquery</title>
    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    
        $(document).ready(function () {
            jQuery.support.cors = true;

            $("#submitBtn").click(function (event) {
                var wsUrl = "http://ussplu124.lu123train.lawson.com:20005/lws-ws/learning/JK-CustomerService";

                var soapRequest = '';
                soapRequest += '' + $("#cusno").val() + '' + $("#addressId").val();
                soapRequest += '';
                $.ajax({
                    type : "POST",
                    url : wsUrl,
                    contentType : "text/xml",
                    dataType : "xml",
                    data : soapRequest,
                    success : processSuccess,
                    error : processError
                });
            });
        });

        function processSuccess(data, status, req) {
            if (status == "success") {
                var ois002 = $(req.responseText).find('OIS002');
                var response = ois002.find('Name').text() +
                                "
" + ois002.find('AddressLine1').text() +
                                "
" + ois002.find('AddressLine2').text();
                $("#response").html(response);
            }
        }

        function processError(data, status, req) {
            alert(req.responseText + " " + status);
        }

</head>
<body>
    <h3>Calling Web Services with jQuery/AJAX</h3>
    <h4>Input</h4>
    Customer Number / Address ID
    <input id="cusno" type="text" />
    <input id="addressId" type="text" />
    <input id="submitBtn" value="Submit" type="button" />
    <h4>Output</h4>
    <div id="response"/>
</body>
</html>

Here’s the example HTML page, with my input fields and the response I get when I submit the form:

jquery example

/Jessica

Related articles

Google Glass

I just applied to get a pair of Google Glass.

Google Glass is an anticipated product from Google X for bringing Augmented Reality to the masses in a sports fashion pair of glasses containing a video camera, a Heads-Up Display, a processing unit running Android, Wifi connectivity, and a battery (c.f. the patent).

I was at Google I/O 2012 were they accepted pre-orders for Glass Explorer Edition but I made the regretful decision to not apply. Google is now offering a second chance: What would you do if you had Glass? Answer with #ifihadglass.

If I had Glass I would improve the workers job in a warehouse: I would show walking directions to the picking location, I would display information about the item, and I would keep track of the picking list. I’m an enthusiast I/On working on AR in the enterprise.

This would be a continuation of my previous implementation of Augmented Reality for M3.

Here are my three concepts pictures for Google Glass:

1

2

3

Here’s my application:

4

Wish me luck, and see you at Google I/O 2013.

 

M3 + Augmented Reality

In this article I introduce the first implementation that I know of Augmented Reality for Infor M3. Augmented Reality is the ability to superpose digital information on top of real world objects. This is achieved by locating the user’s head in space, by determining the user’s point of view, by registering real world objects, and by projecting virtual 3D objects accordingly. Implementing it has been a deer dream of mine. In this example I use fiducial markers and data coming from Item Master – MMS001.

Applications

Augmented Reality for M3 could be used for many applications. For example, it could help a worker find an Item in the warehouse by showing optimized walking directions and distance to possible picking locations. Also, it could help a worker show contextual information at a glance.

I believe Augmented Reality to be a disruptive technology and one of the next big revolutions in the software industry, with positive impacts similar to those of the Internet and mobile devices, that will reshape entire industries in the next 10 years.

Timeline & motivation

In 1998 I got a summer job in a warehouse for a company that sold car brakes. Every few minutes a printer spit out a picking list of items that I had to collect. As a temporary worker unfamiliar with the place, I spent most of my time wandering through the warehouse, searching for the items, and asking the more seasoned workers for help; I found that inefficient and I wished the computer gave me a map with directions of where to go. Also, the picking lists were un-ordered and I often had to go back to a previous location I had just visited; I found that inefficient and I wished the computer optimized the picking lists. Also, once I found the location, I often discovered the boxes were empty and I had to ask a forklift driver to replenish the stock location from a box of a higher shelf; I found that inefficient and I wished the computer planned replenishment ahead of time. That was in 1998 and nowadays ERP and Warehouse management systems are more common. Yet, I kept my wish to make better systems.

Then, In 2001 I read about Professor Steven Feiner’s Augmented Reality KARMA project from 1992 at Columbia University. The system fit in a backpack and had portable computer, batteries, GPS, compass, and head-mounted display. It would give detailed instructions to a user on how to repair a printer. That was my first exposure to Augmented Reality and ever since I have been wanting to implement it.

In 2007 Apple introduced the iPhone, with a stunning user interface, graphics, and processing power, blowing everybody’s mind about mobility and redefining an industry. And in 2009 Apple added a camera to the iPhone 3GS. The hardware technology for Augmented Reality started becoming accessible to the masses.

In 2009 I met with Brad Neuberg of Google at the Google I/O conference and I started working on a client-side search engine for M3 source code. That was my first exposure to HTML5.

In 2010 I implemented my first Warehouse 3D demo using Google Earth, with real data fed from the ERP, and I projected the result on a large touch screen for an immersive experience. That was my first step towards implemented Augmented Reality for M3.

In 2011 I proposed an idea for an internal project for M3 + Augmented Reality on mobile devices.

In parallel, WHATWG and W3C have been working hard to standardize HTML5 with the ability to use the webcam in JavaScript with WebRTC, to access pixel data, to paint on the canvas, and to use WebGL for 3D rendering. The software technology for Augmented Reality is becoming accessible to the masses.

More recently I started working on geo-locating Stock Locations in M3. This opens the door to new applications for geo-coded data in M3.

Then, at the Google I/O conference this year, I met with Ilmari Heikkinen whom pointed me to his article in HTML5 Rocks on Writing Augmented Reality Applications using JSARToolKit. That was the last push I needed to implement actual Augmented Reality for M3. So I did.

Implementation

I used Ilmari’s source code and I added a few lines of code to call an M3 API using REST in JavaScript when a marker is detected. In this example, the marker is mapped to an Item number (ITNO), but it could also be mapped to a Stock Location (WHSL) for example. Then, for that Item number I call the M3 API MMS200MI.GetItmBasic and I display the Name (ITDS), Description (FUDS), Basic unit of measure (UNMS), Volume (VOL3), Net weight (NEWE), Gross weight (GRWE).

Result

Here is a video of the result. Note the section below the canvas that shows M3 data coming from MMS200MI.GetItmBasic for the detected marker. We can see an activity indicator flickering as the markers are detected. For best viewing, watch the video in YouTube, in HD, and in full screen.

Source code

I provide the result for download at http://ibrix.info/ar/demo.zip with HTML and JavaScript source code, sample fiducial markers, and sample images.

Future work

With the simple example I introduced in this article I illustrate that hardware and software technology for Augmented Reality have have already become accessible for the masses. The technology is still maturing. There are on-going projects to provide registration without the use of markers. Also, sensors are becoming better for indoor location.

That’s it for now.

Please click ‘Follow’ to subscribe to my blog.