ShowTable of Contents
Overview
This article describes how to integrate IBM Connections 3.0.1 with WebSphere Portal 7 when using Page Builder 2 themes (the default for Portal 7).
Integrating IBM Connections 3.0.1 and WebSphere Portal 7 is not possible using WebSphere Application Integrator (WAI) because WAI does not support Page Builder 2 themes. This article shows how to obtain a result similar to the one that was possible with WebSphere Portal 6 using WAI, namely, hiding the navigation header of IBM Connections and allowing navigation only through Portal.
For example:
Creating a Stylesheet to Customize the UI
To change the look & feel of IBM Connections, you must create a new stylesheet, as documented in this wiki article:
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic301
Here is an example of the stylesheet we used:
.myLogo, .myLogo {
background-image: url("/activities/nav/styles/images/tbridge/logo.png");
background-repeat: no-repeat;
float: left;
height: 80px;
width: 250px;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
color: #00000F;
}
.lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover {
color: #00000F;
}
.lotusBanner {
background-color: #FFFFFF !important;
background-image: none !important;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
color: #00000F !important;
}
.lotusTitleBar {
background-color: #11221A !important;
background-image: none !important;
}
.lotusBanner ul.lotusInlinelist li a:visited, .lotusBanner ul.lotusInlinelist li a:hover, .lotusBanner ul.lotusInlinelist li a:active {
color: #00000F !important;
}
.lotusFrame {
width: 1000px;
}
body.lotusui {
background: url("/blogs/nav/styles/images/tbridge/master-bg.jpg") repeat scroll 0 0 transparent;
color: #5A5A5A;
}
.lotusMain {
background-color: #FFFFFF !important;
}
.lotusTitleBar .lotusTabs li {
background-color: #00000F !important;
}
.lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg {
background-color: #00000F;
}
.lotusTitleBar .lotusRightCorner {
}
.lotusTitleBar .lotusTabs li.lotusSelected {
}
.lotusTitleBar .lotusSearch .lotusText, .lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg, .lotusTitleBar .lotusTabs li {
}
.lotusFooter {
background-image: none;
margin: 0;
}
.lotusFooter table td ul a, .lotusFooter table td ul a:active, .lotusFooter table td ul a:hover, .lotusFooter table td ul a:visited {
color: #FFFFFF;
}
.lotusui a, .lotusui a:visited, .lotusui a:hover {
color: #00000F;
}
.lotusNavMenu {
}
.lotusFrame {
min-width: 90px;
}
.lotusTitleBar .lotusTabs li.lotusSelected a, .lotusTitleBar .lotusTabs li.lotusSelected a:visited, .lotusTitleBar .lotusTabs li.lotusSelected a:hover, .lotusTitleBar .lotusTabs li.lotusSelected a:active {
color: #00000F !important;
}
.lotusSection h2, .dijitTitlePaneTitle, .portlet-section h2 {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 3px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
.lotusBanner ul.lotusInlinelist li.lotusHover a {
}
.lotusBanner ul.lotusInlinelist li {
margin-top: 65px;
}
.lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a, .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 3px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
width: 180px;
}
.lotusWidget2 h2 {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 5px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
.lotusBlue .Section .dijitTitlePaneTitle {
background-color: #A4A4BF;
border-top: 2px solid #CCCBCB;
font-size: 1.2em;
font-weight: bold;
}
.lotusMenu .lotusTree .dijitTreeRow.lotusSelected {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 5px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
Creating a Stylesheet to Hide the IBM Connections Navigation Header
Next, you must create a stylesheet to hide the navigation header of IBM Connections.
/* CSS Document */ /*version 1.07.13 5/7/08*/
#lotusBanner, .lotusBanner{padding:5px 15px 4px 30px;text-align:right;overflow:hidden;display:none;}
.lotusPlaceBar lotusui {
display: none;
}
.lotusTitleBar .lotusTabs li {
display: none;
}
.lotusFooter {
display: none;
}
body.lotusui {
background:none;
Both stylesheets must be saved in $CONNECTIONS_CUSTOMIZATION_PATH/common/nav/styles.
For Blogs, you must modify the _header.vm of the themes you created to load the two stylesheets when the request comes from Portal.
To do so, add the following code in _header.vm under the <body> tag.
<script type="text/javascript">
if (('$fromPortal'=='yes') || testCookieForFromPortal()) {
// We got here from Portal, we set a cookie if it is not set
if (!testCookieForFromPortal()) {
document.cookie="FromPortal=true";
}
//NOTE : portal.css is the second css we created before
document.write('<link rel="stylesheet" href="../nav/styles/portal.css" type="text/css">');
}
function testCookieForFromPortal()
{
if (getCookieValue("FromPortal") == "true") {
return true;
} else {
return false;
}
}
function getCookieValue(name){
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
Note: Because this code is required in subsequent steps, it is referred to as PortalIntegration.js in the rest of the article.
Modifying JavaServer Pages (.jsp) Files
Next, copy the header.jsp from one of the features from one of the WAR files located in
<WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/<application_name.ear>/<application_name.war>
where:
* <WAS_home> is the directory where you installed IBM WebSphere® Application Server.
* <profile_name> is the profile where you installed one of the IBM Connections applications.
* <cell_name> is the cell where you installed the application.
* <application_name.ear> is the EAR file name for the application.
* <application_name.war> is one of the following file names:
Application | File name |
Activities | oawebui.war |
Blogs | blogs.war |
Bookmarks | dogear.webui.war |
Communities | comm.web.war |
Files | qkr.share.files.war |
Forums | forum.web.war |
Home page | homepage.war |
Profiles | lc.profiles.app.war |
Search | search.war |
Wikis | qkr.share.wiki.war |
in $CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates.
Modify the header.jsp, adding the following code under the <div class="lotusInner"> tag:
<!-- Get the URL parameter FromPortal if it is available
and if it's available load a specific .css to remove bannerHeader-->
<script type="text/javascript">
var link = document.location.href.split('/');
var profiles = link[3];
var fportal = "no";
var queryString = window.location.search.substring(1).toLowerCase();
var parameters = new Array();
parameters = queryString.split('&');
for(var i = 0; i < parameters.length; i++) {
if (parameters[i].indexOf("fromportal")>=0) {
var parameterValue = new Array();
parameterValue = parameters[i].split('=');
fportal = parameterValue[1];
}
}
if ((fportal=='yes') || testCookieForFromPortal()) {
if (!testCookieForFromPortal()) {
document.cookie="FromPortal=true";
}
document.write('<link rel="stylesheet" href="/'+profiles+'/nav/styles/portal.css" type="text/css">');
}
function testCookieForFromPortal()
{
if (getCookieValue("FromPortal") == "true") {
return true;
} else {
return false;
}
}
function getCookieValue(cookieName)
{
var retVal = "";
var i = document.cookie.indexOf(cookieName);
if (i != -1) {
var iVal = i + cookieName.length + 1;
var j = document.cookie.indexOf(";", iVal);
if (j != -1) {
retVal = document.cookie.substring(iVal,j);
}
}
return retVal;
}
</script>
Add the following code just below the previous one:
<script type="text/javascript">
var link = document.location.href.split('/');
var filename = '/'+link[3]+'/nav/styles/sk_portal.css'; //NOTE : sk_portal.css is the first stylesheet we created.
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename);
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>
For every IBM Connections feature, you must also add some code in specific jsp files as follows:
Activities
In
\installedApps\\Activities.ear\oawebui.war\WEB-INF\jsps\webui\mainpage.jsp, add the PortalIntegration.js file under the <body> tag.
Blogs
In \installedApps\\Blogs.ear\Blogs.war\WEB-INF\jsps\tiles\
tiles-adminpage.jsp
tiles-embeddedpage.jsp
tiles-mainmenupage.jsp
tiles-simplepage.jsp
tiles-tabbedpage.jsp
add the PortalIntegration.js file under the <body> tag.
After you added the PortalIntegration.js insert the following script code.
<script type="text/javascript">
// reload custom .css
var brand = "noskin";
var link = document.location.href.split('/');
if (brand=="noskin"){
brand="std";
var nameEQ = "Brand" + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
brand = c.substring(nameEQ.length,c.length);
}
}
if (brand!="std"){
document.cookie = "Brand="+brand+"; path=/;";
var filename = '/'+link[3]+'/nav/styles/sk_'+brand.toLowerCase()+'.css';
document.write('<link rel="stylesheet" type="text/css" href="'+filename+'">')
}
</script>
This is necessary only for Blogs and Communities. (see Communities for more details)
Communities
In <WAS_PROFILE_ROOT>\installedApps\<cellname>\Communities.ear\com.web.war\WEB-INF\jsps\html\tiles\frameworkFooter.jsp, change the following line:
lconn.core.WidgetPlacement.init(); to dojo.addOnLoad(lconn.core.WidgetPlacement.init);
In <WAS_PROFILE_ROOT>\installedApps\<cellname>\Communities.ear\com.web.war\WEB-INF\jsps\html\layouts\default.jsp, add the PortalIntegration.js file under the <body> tag.
In <WAS_PROFILE_ROOT>\installedApps\<cellname>\Communities.ear\comm.web.war\WEB-INF\jsps\html\scenes\dashboard\banner.jsp, insert the following code to force your custom Theme before<%-- Fix for IE Typeahead issue --%> tag.
<script type="text/javascript">
// reload custom .css
var brand = "noskin";
var link = document.location.href.split('/');
if (brand=="noskin"){
brand="std";
var nameEQ = "Brand" + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
brand = c.substring(nameEQ.length,c.length);
}
}
if (brand!="std"){
document.cookie = "Brand="+brand+"; path=/;";
var filename = '/'+link[3]+'/nav/styles/sk_'+brand.toLowerCase()+'.css';
document.write('<link rel="stylesheet" type="text/css" href="'+filename+'">')
}
</script>
Bookmarks
There are multiples files that need to be modified for Bookmarks.
\installedApps\\Dogear.ear\dogear.webui.war\h3\jsp\main
errorPage.jsp
h3.jsp
\installedApps\\Dogear.ear\dogear.webui.war\h3\jsp\tools\
about.jsp
In these three pages, add the PortalIntegration.js file under the <body> tag.
Files
Nothing to do for Files.
Profiles
In \installedApps\\Profiles.ear\peoplepages.war\WEB-INF\jsps\html\layouts
profiles1ColLayout.jsp
profiles2ColLayout.jsp
profiles3ColLayout.jsp
add the PortalIntegration.js file under the <body> tag.
Wikis
Nothing to do for Wikis.
Forums
Nothing to do for Forums.
Home Page
Nothing to do for Home Page.
Building the Integration Pages in the Portal
Now that the changes on the IBM Connections side are completed, you must build the integration pages in the Portal.
First, define a virtual host for the Portal so that you can add the needed rewrite rules and have a document root where you can place the pages required for the integration.
In the file httpd.conf of the web server, include the following code:
# ---- pubblicazione COM ------
<VirtualHost 000.000.000.000:80> #NOTE : Replace this with your web server address.
ServerName www1.tbridge.it #NOTE : Replace this with your web server name.
DocumentRoot "D:\IBM\HTTPServer\www\tbridge"
#NOTE : Replace Tbridge this with your Virtual Portal Name.
ErrorDocument 404 /e404.html
ErrorDocument 500 /e500.html
ErrorLog D:\IBM\HTTPServer\logs\www\tbridge\error.log
CustomLog D:\IBM\HTTPServer\logs\www\tbridge\access.log common
RewriteEngine on
RewriteLog D:\IBM\HTTPServer\logs\www\tbridge\rewrite.log
RewriteLogLevel 6
#NOTE : Remeber put RewriteLogLevel 0 for prodution environment.
#------- rewrite per la HP -----------------
RewriteCond %{REQUEST_URI} ^(/)?$
RewriteRule ^(/)?$ /wps/portal/tbridge [PT,NC]
</VirtualHost>
<VirtualHost 000.000.000.000:443> #NOTE : Replace this with your web server address.
SSLEnable
SSLClientAuth none
SSLServerCert tbridge.it #NOTE : Replace this with your domain name.
ServerName www1.tbridge.it #NOTE : Replace this with your web server name.
DocumentRoot "D:\IBM\HTTPServer\www\tbridge"
#NOTE : Replace Tbridge this with your Virtual Portal Name.
ErrorDocument 404 /e404.html
ErrorDocument 500 /e500.html
ErrorLog D:\IBM\HTTPServer\logs\www\tbridge\error.log
CustomLog D:\IBM\HTTPServer\logs\www\tbridge\access.log common
RewriteEngine on
RewriteLog D:\IBM\HTTPServer\logs\www\tbridge\rewrite.log
RewriteLogLevel 6
#NOTE : Remeber put RewriteLogLevel 0 for prodution environment.
#------- rewrite per la HP -----------------
RewriteCond %{REQUEST_URI} ^(/)?$
RewriteRule ^(/)?$ /wps/portal/tbridge [PT,NC]
</VirtualHost>
# -------------- end COM
Modify the portal theme to add the current user name in a cookie. In the header.jsp of the theme, add the following code:
<script type="text/javascript">
var userOnLine="<portal-fmt:user attribute="cn"/>";
document.cookie="CurrentUser="+userOnLine+"; path=/";
}
</script>
Next, go to Portal administration and create a new label. For example, Social is created in the following screen capture.
Click the label.
Create an empty portal page for every feature, using the default values.
Navigate to each page, right-click the page, view source, and save as an html file.
Copy the html files in the document root of the virtual host.
In every file, perform the following modifications:
Search for the <!--[if IE 7]> tag and add the following line above the tag:
<href="/wps/contenthandler/dav/themelist/tbridge/css/style.css" type="text/css" rel="stylesheet" />
Note: The style.css file is the css of the Portal theme.
Search for <div id="layoutContainers" class="ibmLayoutContainers ibmLayoutContainersHidden" role="main"> tag and add the following line below the tag:
Note: Change the URL in every page according to the Connections feature.
Search for the user name with which you created the pages and replace with getCookieValue("CurrentUser");
Search for the </head> tag and add the following line above the tag:
<script type="text/javascript"> function getCookieValue(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){ x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } }}</script>
Remember: when you create yuor Portal Theme, insert the following code to write the Cookie, with the CurrentUser value.
<script type="text/javascript">
var userOnLine="<portal-fmt:user attribute="cn"/>";
if (userOnLine!=""){
document.cookie="CurrentUser="
+userOnLine+"; path=/";
}
</script>
Verifying Results
To check that everything is working, open the URL http://hostname/pagename.html, where pagename is the name of the feature. For example:
Creating URLs Instead of Pages
You do not need the pages that you created in the Portal. These pages were only used to create the static pages in the https server. You must create URLs instead of pages.
Go back to the Portal administration and delete the pages you created earlier. Create a new URL for every feature. For example:
In the New URL creation page, be sure to add the address of the html page created before to the bottom of the page as follows:
About the Authors
* Roberto Boccadoro is an IT Specialist in the Lotus Client Technical Professional team. You can reach him at roberto.boccadoro@it.ibm.com.
* Andrea Fontana currently works as a System Architect, defining, organizing, and configuring complex IBM product-based solutions. In particular he works with WebSphere Portal and its collaborative environment including Domino 8.0.x, 8.5, IBM Connections 3.01, Lotus Quickr 8.0.x, and IBM Sametime, with respect to setting up SSO Kerberos integration solutions and configuring systems with a r-proxy solution with SSL integration. His past experience includes roles as an Application Developer, Database Administrator, and Project Manager in a wide variety of business applications. He graduated from the ITIS Zuccante C., Mestre (Venice), specializing in Industrial Electronics. You can reach Andrea at a.fontana@net2action.com.