Creating Maximo Generic iFrame Custom Component

Check out my post about Connecting Maximo and Google Charts using Generic iFrame.

Creating Maximo Generic iFrame custom component in well-defined steps.

What is an iFrame?

iFrame is such a useful and versatile HTML tag that allows you to accomplish a lot if used securely and properly. Having such a component in your disposal which designing solutions can certainly ease up some of the challenges you might run into.

Maximo Generic iFrame Custom Component

IFrame, or Inline Frame, is an HTML document embedded within another HTML document on a website. It allows you to insert content from one source into another and can be adjusted to fit your requirements. w3schools has an excellent reference of details for iFrame tag which can be found here.

Maximo Custom Components

Adding a new custom component in Maximo is not that complicated but it requires you to be aware of the steps needed to accomplish such. I will provide a list of the steps needed to add a Generic iFrame component to Maximo.

As a start, you need to create a folder representing you component in the following directory:

applications\maximo\properties\registry-extensions

Add two xml files to applications\maximo\properties\registry-extensions

component-registry_genericiframe.xml

<component-registry basedir="webclient\components" package="psdi.webclient.system">
	<component-descriptor name="genericiframe" instance-class="${package}.controller.BoundComponentInstance">
		<property-list>
			<property name="jsp-filename">
				<default-value>genericiframe</default-value>
			</property>
			<property name="dataattribute" />
			<property name="datasrc">
				<flag name="nonconditional" />
				<flag name="global" />
			</property>
			<property name="id">
				<flag name="final" />
			</property>
			<property name="src" />
			<property name="width">
				<default-value>100</default-value>
			</property>
			<property name="height">
				<default-value>100</default-value>
			</property>
			<property name="scroll" />
			<property name="style">
				<default-value>border:0px;</default-value>
			</property>
			<property name="defaultrender">
				<default-value>true</default-value>
			</property>
			
		</property-list>
	</component-descriptor>
</component-registry> 

control-registry_genericiframe.xml

<control-registry basedir="webclient\controls" package="psdi.webclient.controls">
	<control-descriptor name="genericiframe">
		<property-list>
			<property name="dataattribute">
				<flag name="final" />
			</property>
			<property name="datasrc">
				<flag name="nonconditional" />
				<flag name="global" />
			</property>
			<property name="id">
				<flag name="final" />
			</property>
			<property name="src"/>
			<property name="width">
				<default-value>100</default-value>
			</property>
			<property name="height">
				<default-value>100</default-value>
			</property>
			<property name="scroll" />
			<property name="style">
				<default-value>border:0px;</default-value>
			</property>
		</property-list>
		<component-list>
			<genericiframe width="@{width}" height="@{height}" id="${name}_genericIFrame" dataattribute="@{dataattribute}" datasrc="@{datasrc}" src="@{src}"/>
		</component-list>
		<containers>
			<container name="dialog" />
			<container name="presentation" />
			<container name="section" />
			<container name="sectioncol" />
			<container name="tab" />
		</containers>
	</control-descriptor>
</control-registry> 

Add JSP file to \applications\maximo\maximouiweb\webmodule\webclient\components\genericiframe.jsp

<%--
* ADI
--%>
<%@ include file="../common/simpleheader.jsp" %>
<%
String value =  "";
String dataattribute = component.getProperty("dataattribute");
String datasrc = component.getProperty("datasrc");
String src = component.getProperty("src");
String width = component.getProperty("width");
String height = component.getProperty("height");

String style = component.getProperty("style");
String scroll = component.getProperty("scroll");
String sURL = "";

if (!width.equals("")) width = width+"px";
if (!height.equals("")) height = height+"px";

BoundComponentInstance boundComponent = (BoundComponentInstance)component;
value = WebClientRuntime.removeQuotes(boundComponent.getString());

sURL = src+value;

componentEvents = " onfocus=\"setCurrentfocusId(event,this);\"";
		
String divAutoId="";
String iframeAutoId="";

if(automation) {
	divAutoId="automationId=\""+realId+"_iframe_div\"";
	iframeAutoId="automationid=\""+realId+"upload_iframe\"";
}
%>
	<div id="<%=id%>_genericiframe_div" <%=divAutoId%> style="display:inline" align="<%=defaultAlign%>" valign="top">	
		<iframe id="<%=id%>_genericiframe <%=automationId%>" <%=iframeAutoId%> class="<%=cssclass%>" tabindex="0" src="<%=sURL%>" height="<%=height%>" width="<%=width%>" scrolling="<%=scroll%>" frameBorder="0" marginHeight="0" marginWidth="0" <%=componentEvents%>  style="<%=style%>" > </iframe>
	</div>
<%@ include file="../common/componentfooter.jsp"%> 

Export toolbox.xml and add

<genericiframe id="ctrl_genericiframe"/> 

Add the toolbox item using the following link:

1. Control: GENERICIFRAME

2. Description: Generic iFrame

3. Object Name: CTRL_GENERICIFRAME

http://myhost:myport/maximo/ui/?event=loadapp&value=designer&additionalevent=regcontrol

add icon with the same name as the control in \applications\maximo\maximouiweb\webmodule\webclient\images\designergenericiframe.gif

Add definition to designer.xml before </presentation> tag

       <!-- CUSTOM -->
       <dialog properties="true" modal="false" id="mxdproperties_genericiframe" mboname="CTRL_GENERICIFRAME" label="Generic iFrame Properties" beanclass="psdi.webclient.beans.designer.ControlPropertiesBean" saveposition="true" closeevent="PROPERTIES">
              <section id="prop_genericiframe_1">
                     <textbox id="prop_genericiframe_id" dataattribute="id"/>
                     <textbox id="prop_genericiframe_dataattribute" dataattribute="dataattribute" smartfilloff="true" lookup="maxattribute"/>
                     <textbox id="prop_genericiframe_datasrc" dataattribute="datasrc"/>
                     <textbox id="prop_genericiframe_src" dataattribute="src"/>
                     <textbox id="prop_genericiframe_width" dataattribute="width"/>
                     <textbox id="prop_genericiframe_height" dataattribute="height"/>
                     <textbox id="prop_genericiframe_scroll" dataattribute="scroll"/>
                     <textbox id="prop_genericiframe_style" dataattribute="style"/>
                     <textbox id="prop_genericiframe_sigoption" dataattribute="sigoption" ondatachange="resetchildren"  lookup="sigoption" />
                     <textbox id="prop_genericiframe_sigoptiondatasrc" label="Sig Option Data Source ID" dataattribute="sigoptiondatasrc" ondatachange="resetchildren" />
                     <buttongroup id="prop_genericiframe_button_config" >
                        <pushbutton id="prop_genericiframe_button_config_button" label="Configure Conditional Properties" mxevent="configuerproperties"/>
                     </buttongroup>                          
              </section>
       </dialog>
       <!-- custom --> 

What else?

As you can embed other web pages right into Maximo, you may also need to connect to Maximo from other web pages! Make sure to check out my post about The Power of Maximo URL Parameters Builder, it contains a handy tool to build Maximo URL that can do more than sending the user to the login page.

Links

https://www.w3schools.com/html/html_iframe.asp