- Build a lightweight mobile framework for Maximo: Change Status of a Work Order using REST API
- Build a lightweight mobile framework for Maximo: Create a Work Order
- Build a lightweight mobile framework for Maximo: Getting started
I am starting a mini series on building a mobile friendly app for Maximo. This will be a lightweight mobile framework so it won’t be as powerful as our own EZMaxMobile, but it’s something that you could possibly use in a small scale deployment. This is just my experiment but my goal for this series is to really play around with some HTML5 mobile javascript frameworks, but I thought the quickest way to learn any new framework is to use it in a real world example. So I thought of building a small mobile app for Maximo. I won’t go into too much detail about the mobile framework itself because there are so many too choose from and it’s up to you to decide which one you are comfortable with and want to use. From the Maximo side, we will use Maximo 7.5 and utilize the new REST API to build the mobile app.
Choosing a Mobile Framework
There are many mobile frameworks out there, just do a Google search for “mobile framework” and you can find plenty of them to use. In my opinion, the two that I have been researching on are jQuery Mobile (jQM) and Sencha Touch, which both of them are javascript based. Both have their own differences and I really like the look and feel of Sencha Touch. On an iPhone, the UI looks beautiful and feels like a native app. While jQuery Mobile’s UI is nice but not great, yet it is very powerful. The other thing to mention is the learning curve. Sencha Touch has it’s own MVC coding model and although it’s javascript based, I would have to teach myself how to code with it from scratch. Since I have been using jQuery for a while now and pretty familiar with it, I have decided choosing jQuery Mobile will be the quickest way to do what we need. Another benefit of jQM is that it’s virtually device independent. Your users aren’t limited to the device they can use. With Sencha Touch, users can’t use a Window Phone 7 device. jQM also has a nice tool called Codiqa which allows you to build your UI with a nice drag and drop feature, just like Maximo’s application designer, which is very nice. Then all that is left is to build the functionality with jQuery.
Getting Started
I’ve already gotten my foot wet by reading up on some of jQM’s documentation so now we can start building our app. So the first step is to create a basic login page. Something simple for a user to enter his credentials and to authenticate with Maximo. Here is our login page (all code samples can be viewed at the end of the post):
So now that we have that, the tough part is to figure out a way to authenticate with Maximo. As you may know, Maximo REST API doesn’t come with a login API so we will have to come up with a hack or a work around to authenticate the user. Provided we are mainly building a small mobile app for technicians to create a new work order, we can make a request to the MAXUSER object. For the most part, you may not want a person to view this data, but this is the only MBO object that I can think of that virtually every user in Maximo will have access to. So we can use this object to authenticate the user. The basic idea here is that if the request doesn’t fail, you will assume that the login was successful. This is a work around, but it works for what we need it to do.
If you are not familiar with Maximo REST API, then you can read more on it here. For the REST URL we are going to use it will look just like this:
http://192.168.1.100/maxrest/rest/mbo/MAXUSER?_format=json&_compact=1
This URL is what we will use in our form’s action attribute, then we will complete the URL right before we call it an append the “_lid” and “_lpwd” variables with the users name and password. If the request is a success, we will then use jQM to load a new page into the view which will be our mobile start center page. Our start center page doesn’t do anything, but that will come later in the series.
Here is the complete code sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="Login">
<div data-theme="b" data-role="header">
<h3>
Login
</h3>
</div>
<div data-role="content">
<form data-ajax="false" id="loginForm" action="http://192.168.1.100/maxrest/rest/mbo/MAXUSER?_format=json&_compact=1">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="_lid">
User Id
</label>
<input id="_lid" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="_lpwd">
Password
</label>
<input id="_lpwd" placeholder="" value="" type="password" />
</fieldset>
</div>
<input type="submit" value="Submit" />
</form>
</div>
</div>
<div data-role="page" data-theme="b" id="Main">
<div data-theme="b" data-role="header">
<h3>
Main
</h3>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#page2" data-transition="slide">
Create New Work Order
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//App custom javascript
$('#loginForm').live('submit', function (e) {
//prevent the default submission of the form
e.preventDefault();
var url = $this.attr('action') + "&_lid=" + $('#_lid').val() + "&_lpwd=" + $('#_lpwd').val();
$.ajax({
type: 'GET',
url: url,
success: function(xhr, e, s){
$.mobile.changePage($('#Main'));
console.log(xhr);
},
error: function(xhr, e, s){
if (xhr.status == 400 || xhr.status == 401){
//BMXAA0021E - User Id and Password is invalid
alert('Invalid username and password');
} else {
alert('Unknown Error');
}
}
});
});
</script>
</body>
</html>
Running The Code Sample
First, copy and paste this code into your text editor like NotePad and save the file to something like “mobile.html”. Be sure to edit the server IP address to your own Maximo 7.5 server instance. Now you cannot run this file directly on your desktop because you will get a cross site scripting error. To properly run this file, go to your Maximo WebSphere application server and navigate to this directory:
C:/Program Files/IBM/WebSphere/AppServer/profiles/ctgAppSrv01/installedApps/ctgCell01/MAXIMO.ear/maximouiweb.war/webclient
This is where your Maximo web files are located. Create a new folder called “mobile” and paste your “mobile.html” file in this new directory. Once you have it in there, you can now open your browser and connect to you mobile app. Just simply enter this url:
http://192.168.1.100/maximo/webclient/mobile/mobile.html
Now you should be able to login with your Maximo credentials (provided you are NOT using LDAP, because Maximo REST only works with native authentication) and see the mobile start page.
