Saturday 4 September 2010

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 ...

5 comments:

Brownie said...

Well done Dave. Good post. I love using the Web App Integrator but always get a little frustrated when building with a custom portal theme. Means you need to update the WAI to include the theme otherwise the custom theme does not come across with it.

I will undoubtedly use what you have done here though. I have a couple of clients moving to Quickr 8.5 Websphere and they will want it surfaced in their portals.

Dave Hay said...

Cheers, Adam, much obliged - I'd be interested in your findings with a custom theme, as I know that others are looking at similar situations, regards, Dave

Brion Goudreau said...

Thanks David. This is great information. I will be trying it on my side today!

HAITX said...

Dear Dave!

This entry is important information I finding. But I don't know src link flowing (in javascript) where I can get in my portal?

Help me, Thank You so much!

-- BEGIN PORTAL NAVIGATION INTEGRATION

{SRC}

END PORTAL NAVIGATION INTEGRATION --

Dave Hay said...

@HAITX - the JavaScript code is generated by the Web Application Integrator portlet itself - once installed, this portlet appears in the "Manage Pages" portlet, and takes the unique ID of the link page which you map to your external web site.

The WAI download includes a good set of documentation including a document called "How to Integrate".

Visual Studio Code - Wow 🙀

Why did I not know that I can merely hit [cmd] [p]  to bring up a search box allowing me to search my project e.g. a repo cloned from GitHub...