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.

Series NavigationBuild a lightweight mobile framework for Maximo: Create a Work Order >

Did You Know...

As Maximo Experts, we have developed several add-on products for Maximo that mobilize the work force, simplifies assignments, provides ad-hoc reporting capabilities and facilitates the seamless integration of Service Requests into Maximo.

Check out our products by clicking on the following links: EZMaxMobileEZPLanner and EZInsight.

Find Out More

5 thoughts on “Build a lightweight mobile framework for Maximo: Getting started

  1. Just playing around with this now. I copied/pasted everything, changed the URL and loaded it into the appropriate directory. The login page loads fine, but after entering a username/password and clicking Submit, nothing happens. No error messages and no new page. Any ideas?

    1. Not sure, the best bet is to use Chrome or Safari to view the page and turn on the Inspector to view the console to see what is really happening and to see if you are getting any errors on page load.

Leave a Reply