Creating Custom Tools in Maximo Scheduler Maps

Author: Cristiano Malanga Breuel, Advisory Software Engineer, cristiano.breuel@br.ibm.com

Author: Rafael Thomas Goz Coutinho, Advisory Software Engineer

Maximo Scheduler Map Tools

The Maximo Scheduler 7.5.1.0 release's map control includes several tools in its toolbar. These tools can be customized and it is possible to create new ones.

Before learning how to create custom tools, please see Configuring Tools in Maximo Scheduler Maps to know how to configure the tools available on a map control toolbar.

Creating a custom tool

Every toolbar tool is defined in a JavaScript file (.js) and the file name is used for adding it to a map control presentation toolbar. This JavaScript must be a Dojo Class http://dojotoolkit.org/documentation/tutorials/1.7/declare/, The class you declare in each of these files needs to have the same name as the file. These files are located in the following directory inside your Maximo installation:

<MAXIMO_ROOT>\applications\maximo\maximouiweb\webmodule\webclient\javascript\ibm\tivoli\fwm\mxmap\toolbar\ext

There are two base classes that can be extended to make the creation of a custom tool easier:

• _ToolTemplate: template for any type of tool
• _ToggleTool: an extension of _ToolTemplate that's specific for tools that have an on/off state

Note: You'll need to rebuild and redeploy your .ear file to load the files you create or modify.

Simple tool sample

The code below exemplifies how to create a simple tool. This tool only prints "Hello, toolbar!" to the JavaScript console when clicked. See the comments in the code for the meaning of each part.

dojo.require("ibm.tivoli.fwm.mxmap.toolbar.ext._ToolTemplate");
dojo.require("dijit.form.Button");

/**
 * Hello tool - an example map tool that just logs a message when clicked
 */
dojo.declare("ibm.tivoli.fwm.mxmap.toolbar.ext.HelloTool", ibm.tivoli.fwm.mxmap.toolbar.ext._ToolTemplate, {

		/* The label that will be shown as a tooltip for the tool */
		label: "Say Hello!",

		/* CSS class that sets the button's icon */
		iconClass: "basicMapToolbarBtn helloToolbarBtn",

		/* The reference to the Map object (set by the constructor) */
		map: null,

		/* Tool initialization. The params argument,
		 * by default, contains only the Map reference */
		constructor: function(params)
		{
			dojo.mixin(this, params);
		},

		/* This method is called when the button is clicked */
		execute: function()
		{
			console.log("Hello, toolbar!");
		},

		/* Called to disable this tool, when another tool is selected */
		disable: function()
		{
			console.log("Goodbye, toolbar!");
		}
});

The example above assumes that there is a CSS class called helloToolbarBtn that defines the icon image for this button. For example we have used this style definition:

 

.helloToolbarBtn {
   background-image: url("../../../javascript/ibm/tivoli/fwm/mxmap/resources/toolbar/tb_layers.png");
}

In here we are reusing the layer tool's icon; however, you could set any URL to an image file to customize the tool icon.

Tool with map interaction sample

Let's create a slightly more useful tool. Suppose you want a button that will center and zoom the map into a configured point when clicked. The point's coordinates are stored as a MBO in Maximo.

First, we need to create a data bean that will receive the calls from the map. Create a Java file called "MapExampleBean.java" in the following location:

<MAXIMO_ROOT>\applications\maximo\maximouiweb\src\com\example\map

with the code below:

package com.example.map;

import java.rmi.RemoteException;

import psdi.mbo.MboRemote;
import psdi.mbo.MboSetRemote;
import psdi.util.MXException;
import psdi.webclient.system.beans.DataBean;
import psdi.webclient.system.beans.WebClientBean;

import com.ibm.json.java.JSONObject;
import com.ibm.tivoli.maximo.map.MapDataUtils;
import com.ibm.tivoli.maximo.map.MapWebUtils;

public class MapExampleBean extends DataBean {

	public int getDefaultPoint() throws MXException, RemoteException {

		MboSetRemote ms = this.getMXSession().getMboSet("SERVICEADDRESS");
		MboRemote mbo = ms.add();
		mbo.setValue("latitudey", 64.886265);
		mbo.setValue("longitudex", -19.094238);

		JSONObject response = new MapDataUtils().getMboAsJSONObject(mbo);

		ms.rollback();

		new MapWebUtils().writeResponse(this.clientSession.getResponse(),
			response.toString(), "application/json", "utf-8");
		return WebClientBean.EVENT_HANDLED;
	}
}

In this example, we are creating a temporary MBO, setting some hard-coded coordinates on it and then discarding it. Of course, in a real application the coordinates would be stored in the database and be loaded with the MBO. Next, let's create the JavaScript code for the tool. Here's the relevant section of the code (the full code is in the attachments):

execute: function()
{
    var myEvent = new Event("getDefaultPoint", this.map.getId(), "", REQUESTTYPE_HIGHASYNC);
    var successFct = function(data){
        this.map.centerOnMbo(data,4);

    };
    var errorFct = function(error){
        console.error("Error retrieving data",error);

    };
    queueManager.queueEvent(
                        myEvent,
                        "application/json",
                        "json",
			dojo.hitch(this, successFct),
			dojo.hitch(this, errorFct)
    );
},

The tool code will instruct Maximo to invoke an event called "getDefaultPoint". Maximo will look for this event as a method in the map's data bean, then call it. Upon successful execution, the function that is passed as the first argument to queueEvent is executed, getting the data as an argument. If there is an error, the last argument will be called, and in this case log the error in the console.

Finally, we need to set up the map to use this data bean and tool in the Application designer:



Save the application presentation and open the same application on the tab where your map is. The tool is added to the toolbar.

Zip file with full code sample

#Maximo
#AssetandFacilitiesManagement
#MaximoScheduler