Success - Using Web Application Integrator to integrate Lotus Quickr for WebSphere Portal 8.5 into a portal page

Following on from yesterday's post, I've worked out how to use the Web Application Integrator (WA) portlet / functionality to integrate Lotus Quickr 8.5 into a portal page.

In the past, this has been relatively simply, using the previous 8.1.1 version of Quickr, as I've blogged about here and here.

Now perhaps the precise use case for this needs to be defined, as there are multiple ways to integrate Portal and Quickr, including WebSphere Portlet Factory Designer ( consuming Quickr via RESTful services ), the Places Catalog Portlet, the My Places Portlet etc.

However, in this case, let's accept that we need to bring the Places page ( the one that contains Public Places and My Places ) into a portal page.

I'm pretty comfortable with the basics of WAI, but was struggling to know precisely which JSP I needed to "hack" in order to inject the JavaScript that the WAI portlet generates.

After much hacking about, I've worked it out - I'm probably a bit dense, but I had assumed that all of Quickr's user experience was coming from a single Java Enterprise Edition application ( wps.ear ).

How the world has changed - now we live in a world where Quickr ( or, to be more precise, the underlying WebSphere Portal ) renders content from a variety of different enterprise/web applications, not all of which are running within the WPS.EAR application.

Therefore, after much digging, I found out that the "offending" application is Place Center App User Interface ( or placeCntrAppUI, to give it it's correct name ).

This application is located here: -

/opt/IBM/Quickr/wp_profile/installedApps/quickr85/placeCntrApp.ear/placeCntrAppUI.war

with the UI coming from: -

/opt/IBM/Quickr/wp_profile/installedApps/quickr85/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp

Having discovered this, it was then a relatively simple manner to amend the file catalog.jsp and comment out the statement that "includes" the banner JSP ( banner.jspf ) as follows: -

<!--
                        <%@ include file="banner.jspf" %>
--!>

and added in the WAI JavaScript code: -

<!-- BEGIN PORTAL NAVIGATION INTEGRATION -->
<script type="text/javascript" src="http://wps615.uk.ibm.com:10040/wps/myportal/!ut/p/c5/XcjBCoIwGADgZ_HQ-f8Xae44IWUMxZiVeZElostwY1tFb1_n-G4fdPCzqpeeVNBmVQ-o3uONWcvXME5OBeM2-D_QQpf02OwFFwXBojxlyFlGkqKOETGGC7S46-Udjf-ktNSSimZYvFzwidfUC2krMlByzo8HVrvtHLMI7GyiL2_foN0!/"></script>
<!-- END PORTAL NAVIGATION INTEGRATION -->

immediately below, so that the JSP now looks as follows: -

<snip>
               <script type="text/javascript" src="<c:out value='${path}/javascript/js.jsp?debugMode=${initParams.debugMode}&locale=${pageContext.request.locale}&layer=placeCenter'/>"></script>
                <div class="lotusFrame" id="mainContentDiv">

<!--
                        <%@ include file="banner.jspf" %>
--!>

<!-- BEGIN PORTAL NAVIGATION INTEGRATION -->
<script type="text/javascript" src="http://wps615.uk.ibm.com:10040/wps/myportal/!ut/p/c5/XcjBCoIwGADgZ_HQ-f8Xae44IWUMxZiVeZElostwY1tFb1_n-G4fdPCzqpeeVNBmVQ-o3uONWcvXME5OBeM2-D_QQpf02OwFFwXBojxlyFlGkqKOETGGC7S46-Udjf-ktNSSimZYvFzwidfUC2krMlByzo8HVrvtHLMI7GyiL2_foN0!/"></script>
<!-- END PORTAL NAVIGATION INTEGRATION -->

                        <div class="lotusTitleBar">
                                <div class="lotusRightCorner">
                                        <div class="lotusInner">
                                                <div dojoType="ibm.lotus.theme.NavigationBar"
</snip>

Having done this, I'm now able to access the Places page through WebSphere Portal, with the portal navigation etc. preserved throughout.

I then added to my sense of success by doing the same thing with the Place Catalog Administration page, which is located here: -

/opt/IBM/Quickr/wp_profile/installedApps/quickr85/placeCntrApp.ear/placeCntrAdminUI.war/WEB-INF/jsp

Again, I edited a JSP ( admin.jsp ) and commented out the include statement for navigation.jsp : -

<!--
                        <%@ include file="navigation.jspf" %>
--!>

and added in the WAI JS: -

<!-- BEGIN PORTAL NAVIGATION INTEGRATION -->
<script type="text/javascript" src="http://wps615.uk.ibm.com:10040/wps/myportal/!ut/p/c5/XcjBCoIwGADgZ_HQ-f8Xae44IWUMxZiVeZElostwY1tFb1_n-G4fdPCzqpeeVNBmVQ-o3uONWcvXME5OBeM2-D_QQpf02OwFFwXBojxlyFlGkqKOETGGC7S46-Udjf-ktNSSimZYvFzwidfUC2krMlByzo8HVrvtHLMI7GyiL2_foN0!/"></script>
<!-- END PORTAL NAVIGATION INTEGRATION -->

so the resulting JSP looks like this: -

<snip>
                                helpTopic="/com.ibm.lotus.qpp.places.help/admin/pc_managing_sources.html">
                        </div>

<!--
                        <%@ include file="navigation.jspf" %>
--!>

<!-- BEGIN PORTAL NAVIGATION INTEGRATION -->
<script type="text/javascript" src="http://wps615.uk.ibm.com:10040/wps/myportal/!ut/p/c5/XcjBCoIwGADgZ_HQ-f8Xae44IWUMxZiVeZElostwY1tFb1_n-G4fdPCzqpeeVNBmVQ-o3uONWcvXME5OBeM2-D_QQpf02OwFFwXBojxlyFlGkqKOETGGC7S46-Udjf-ktNSSimZYvFzwidfUC2krMlByzo8HVrvtHLMI7GyiL2_foN0!/"></script>
<!-- END PORTAL NAVIGATION INTEGRATION -->

                        <div class="lotusMain">
                                <div class="lotusContent">
</snip>

and then did the same with the the page that's used to create new places - templates.jsp - which is located here: -

/opt/IBM/Quickr/wp_profile/installedApps/quickr85/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp

so that it looks like this: -

<snip>
               <script type="text/javascript" src="<c:out value='${path}/javascript/js.jsp?debugMode=${initParams.debugMode}&locale=${pageContext.request.locale}&layer=templateCenter'/>"></script>
                <div class="lotusFrame">

<!--
                        <%@ include file="banner.jspf" %>
--!>

<!-- BEGIN PORTAL NAVIGATION INTEGRATION -->
<script type="text/javascript" src="http://wps615.uk.ibm.com:10040/wps/myportal/!ut/p/c5/XcjBCoIwGADgZ_HQ-f8Xae44IWUMxZiVeZElostwY1tFb1_n-G4fdPCzqpeeVNBmVQ-o3uONWcvXME5OBeM2-D_QQpf02OwFFwXBojxlyFlGkqKOETGGC7S46-Udjf-ktNSSimZYvFzwidfUC2krMlByzo8HVrvtHLMI7GyiL2_foN0!/"></script>
<!-- END PORTAL NAVIGATION INTEGRATION -->

                        <div class="lotusTitleBar">
                                <div class="lotusRightCorner">
                                        <div class="lotusInner">
</snip>

Right, time for a cup of tea to celebrate ...