In the previous article, I explained how to create a custom progress bar control for IBM Maximo using the magic of the Twitter Bootstrap framework. Within the framework of this article, you will learn how to add custom controls to the Application Designer palette.
Creating an MBO object for temporary storage of control properties
Each control that is present in the Application Designer palette has a number of properties that can be changed by the developer after adding the control to the workspace of the Application Designer. In order to define a dialog which will be used to specify control’s properties, we need to create an underlying non-persistent MBO for that dialog.
Go to Database Configuration, create a new non-persistent MBO object named CTRL_PROGRESSBAR and fill in the fields on the Object tab:
| Name | Value |
| Service | APPSETUP |
| Class | psdi.app.designer.virtual.ControlSet |
| Level | SYSTEM |
| Persistent? | false |
Next, on the Attributes tab, create attributes for the properties of the control:
| Attribute | Type | Description | Title | Domain | Class |
| ID | ALN(128) | Control ID | Id | – | – |
| DATAATTRIBUTE | UPPER(254) | Attribute | Attribute | – | psdi.app.appsetup.FldDataAttribute |
| LABELTEXT | ALN(100) | Label text | Label text | – | – |
| COLOR | ALN(20) | Color | Color | PG_COLOR | – |
| STRIPED | YORN | Striped effect | Striped effect | – | – |
Since the attribute COLOR is associated with the ALN-domain PG_COLOR, it should be created. Below is a table of values for this domain:
| Name | Description |
| progress-bar-danger | Red color |
| progress-bar-warning | Yellow color |
| progress-bar-success | Green color |
| progress-bar-info | Blue color |
To complete, enable Administrator mode and configure the database.
Definition of dialog with control properties in designer.xml
The next step is to register the dialog box with the properties of the control. Export designer.xml from IBM Maximo by opening the link in the browser:
http://[hostname]/maximo/ui/designer.xml?event=exportxml&targetid=designer
Open this file in a text editor and add the definition of the dialog box:
<dialog beanclass="psdi.webclient.beans.designer.ControlPropertiesBean" closeevent="PROPERTIES" id="mxdproperties_progressbar" label="Progress Bar Properties" mboname="CTRL_PROGRESSBAR" modal="false" properties="true" saveposition="true" showclose="true"> <section id="prop_progressbar_section"> <textbox dataattribute="id" id="prop_progressbar_id"/> <textbox dataattribute="dataattribute" id="prop_progressbar_dataattribute" lookup="maxattribute" smartfilloff="true"/> <textbox dataattribute="labeltext" id="prop_progressbar_labeltext"/> <combobox dataattribute="color" id="prop_progressbar_color" smartfilloff="true"/> <checkbox dataattribute="striped" id="prop_progressbar_striped"/> </section> </dialog>
Next, use the Application Designer to import the designer.xml file into the system.
Registering control in toolbox.xml
Export toolbox.xml from the system by opening the link in the browser:
http://[hostname]/maximo/ui/toolbox.xml?event=exportxml&targetid=toolbox
Add a line to the XML file:
<progressbar id="ctrl_progressbar"/>
Import file into IBM Maximo using Application Designer.
Registering control in the PALETTEITEM table
Run the SQL query:
INSERT INTO PALETTEITEM (PALETTEITEMID,CONTROL,OBJECTNAME,DESCRIPTION,LANGCODE) VALUES (PALETTEITEMSEQ.NEXTVAL,'PROGRESSBAR','CTRL_PROGRESSBAR','Progress Bar','EN');
Adding an icon to display in the Application Designer palette
Go to the administrator station and put the file progressbar.gif (download link) in the directory:
maximouiweb\webmodule\webclient\images\designer
Rebuild and redeploy maximo.ear.
Conclusion
If everything is done correctly, then the control should be visible in the palette of elements of Application Designer.
Both this and the previous article are vey helpful. Thank you! However, I am unsure of a couple of things: First in the previous article, you mention the use of the “attribute” but do not give an example as to how to actually show the progress and how it is calculated. I may be a bit dense here, but if I want to show workflow progress on a given work order, I could not decipher from your example how I might do that. Secondly, in this article, by adding the progress bar to the palette it makes it far easier to add to the WOTRACK application on the Main page (in keeping with the aforementioned use-case scenario,) but I still do not understand how to calculate progress towards completion. Please advise.
The main purpose of this article was to show how to create custom controls for IBM Maximo. The control described in this article can be used to display any decimal attribute assuming that its value is between 0 and 100, e.g. % of budjet completion. If you need to display a workflow progress, i’d suggest using a custom non-persistent attribute and write your own logic to set this attribute’s value from 0 to 100 depending on the current workflow status. Then you can use the progress bar control to visualize this value.