IBM Connections 3.0.1 Customisation and Integrationwith Lotus Sametime

Brian Berminghambberming@ie.ibm.com

@brianbermingham

Who Am I?

Brian Bermingham

Social Software Customer Excellence

Twitter: @brianbermingham

Agenda

Customising IBM Connections 3.0.1

IBM Connections 3.0.1 integration with Lotus Sametime

ReferencesIBM Redbooks:

Customizing IBM Connections 3.0.1 (also in PDF)Creating Integrated Web Experience with IBM Lotus collaboration software

Customisation

Customising IBM Connections 3.0.1What's Different in Connections 3.0.1

“Typical” Connection Customisation Organisation Roles

Understanding the New Customisation Process

Building Simple Customisations

Best Practices for Creating, Maintaining, and Debugging

Resources

What's Different in Connections 3.0.1Customisation Directory – Enabling a simpler process for customising markup, style sheets and images

The header and footer now support Java™ Server Page (JSP) logic, so it is easy to add new menus or links to the header

Log in page is shared by all applications

Themes for Communities are easier to deploy and manage

What Hasn't Changed (Much)?Changing the business card

Adding custom widgets to Homepage, Profiles, or Communities

“Typical” Connections Customisation Organisation RolesAdministrators

Configure Connections to match organizational objectives

Maintain installation and manage deploying customisation

Work with developers to update customisation when fixes are deployed

Maintain source control

Designers

Determine how Connections should be branded

Produce images and aesthetic guidance

Web Developers

Implement branding and customisation

Assume sufficient familiarity to make basic changes to JSP files

Implement deeper customisation of Profiles, Communities, or other components to fit organizational objectives

Update customisation when fixpacks or iFixes are applied

Understanding the New Customisation Process

Content in the customisation directory overrides installed content

Works on many different file types – JSP, HTML, CSS, GIF, JPG, etc

Custom Header

Custom Header

Custom Footer

Custom Footer

Header

Header

Footer

Footer

Footer

Header

Custom Header

Custom Header

Custom Footer

Custom Footer

Footer

Header

“Customization” Directory Installed Content User Sees

Understanding the New Customisation Process (cont.)

Customisation Directory

1) Find the file you want to change from the installed application

2) Copy the file into the customisation directory at the correct sub-directory

3) Make changes to the copied file

4) Restart the affected applications on your application server

5) Clear browser cache or change version stamp

Understanding the New Customisation Process (cont.)

Application-specific customisation directories override the common customisation directory

Common Customisation Installed Content Profiles User Sees Wikis User SeesProfiles Customisation

FooterHeaderFooterHeader FooterHeader FooterHeaderFooter

FooterHeaderFooterHeaderFooter FooterHeaderFooter

FooterHeaderFooter FooterHeader FooterHeaderHeader

FooterHeaderHeader FooterHeader FooterHeaderFooterHeader

FooterHeaderFooterHeader FooterHeader FooterHeaderFooterHeader

Building Simple Customisation

Building Simple Customisation

Building Simple Customisation

Building Simple CustomisationExamples of customising:

Header

Footer

Styles

Log in

Adding a Communities custom theme

Strings

Adding Widgets

WAIT! - Make Life EasierUse customisation debug mode in test environments

Add WAS environment variable at the cell levelCONNECTIONS_CUSTOMIZATION_DEBUG and set to true

Customisation changes take effect immediately, no server / application restart required

Never use debug mode on a production server

More details in the InfoCenter:http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic301

Customising Connections CSS (Where To Begin) Open default theme style sheet in a text editor

<WebSphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/common/styles/defaultTheme/defaultTheme.css

Create new, empty style sheet file in the common customisation directory

<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/common/styles/defaultTheme/custom.css

Open custom.css file in a text editor

Locate styles you want to change in defaultTheme.css

Paste those styles in custom.css, and make your changes

�Tip: defaultTheme.css contains most colour settings for the product

�Tip: Figuring out which CSS styles control which elements can be difficult. Use a tool like Firebug for Mozilla® Firefox® to locate the styles you want to change

Customising the HeaderAdding a logo

Create a new logo image for the site, e.g. blug_logo.png (218x83)

Copy image to the common customisation directory:<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/common/styles/images/blug_logo.png

Verify the image appears

Open http://<server>:<port>/files/nav/common/styles/images/blug_logo.png

Customising the Header (cont.)Adding a logo (cont.)

Open custom.css in a text editorChange the source URL for the logo in this file

Minor style changes to align the menus with the logo

Visit Connections in your web browserClear your browser cache!

http://<server>:<port>/files

Tip: Any file you add to the common directory becomes available in all applications

Customising the Header (cont.)Adding a link or a menu to the navigation bar

Locate the header file<WebSphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/templates/header.jsp

Copy the header.jsp file to the common customisation directory<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/templates/header.jsp

Open the copied file in a text editorCreate a new “BLUG” menu drop down by copying the “People” menu link

Add a “BLUG on Lotus Greenhouse” link in the upper right

Save changes

Customising the Header (cont.)Adding menus to the navigation bar

Locate the header menu file<WebSphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/templates/menu/people.jsp

Copy menu file to the common customisation directory with a new name<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/templates/menu/blug.jsp

Open the copied file in a text editorUsing the “Profiles” menu as an example, create links pointing to BLUG locations

Tip: Popup menus can use dynamic logic or JavaScript – very flexible

Tip: Menu contents can be styled as desired

Customising The Footer

As with the navigation bar, the footer supports JSPs, so you can add a menu to the footer

Add links, menu items, or images to the footer

Locate the footer file<WebSphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/templates/footer.jsp

Copy the footer.jsp file to the common customisation directory<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/templates/footer.jsp

Modifying Theme Colours

Modifying Theme Colours (cont.)Open custom.css file in a text editor

Locate rules for sections of the page with gradient colours – title bar and left navigation – in defaultTheme.css (contains most colour settings for the product)

Paste those rules in custom.css, and change the colours as required

Tip: defaultTheme.css contains most colour settings for the product

Changing the title bar:/* Change the colour of the Title bar */.lotusTitleBar {

background-color: #F16C1F;background-image: -moz-linear-gradient(#FAE5B8 0%, #F16C1F 100%);background-image:-webkit-gradient(linear, left top, left bottom, from(#FAE5B8), to(#F16C1F));

}.lotusTitleBar .lotusTabs li {

background-color: #000;}

Customising The Login page

Customising The LoginLocate the login.jsp file

<websphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/templates/login.jsp

Copy the login.jsp file to the common customisation directory

<CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/templates/login.jsp

Open the copied file in a text editor

Add background image

Remove IBM branding and add informational text

Add a very simple click through agreement using JavaScript

Adding custom Communities themesCommunity owners can customise the appearance of a community

Administrators can modify or add to the selection of default themes provided with Communities

Add new themes to match customisation's made to Connections

New themes must be saved in the common customisation directory so that it can be used from all the applications

Defining a Community themeCopy and rename existing defaultTheme directory to customisation directory, e.g <customization_dir>/common/nav/common/styles/corporateTheme

Rename the defaultTheme(RTL).css stylesheet inside new directory to corporateTheme(RTL).css

Update corporateTheme.css and other CSS files as needed

Add new image for custom theme:

Upload a <theme>.png file to the following directory:<customization_dir>/communities/images/e.g.<customization_dir>/communities/images/corporate.png

Adding a theme to the Communities configuration fileAfter defining custom theme, needs to be added to Communities config file

Check out and open communities-config.xml file

Add new <comm:theme> element to include theme in list of themes already defined:For example:<comm:theme>

<comm:themeUuid>corporate</comm:themeUuid><comm:displayNameKey>

label.theme.name.corporate</comm:displayNameKey><comm:isScriptKey>false</comm:isScriptKey><comm:cssUrl>

/nav/common/styles/corporateTheme/corporateTheme.css</comm:cssUrl><comm:cssRtlUrl>

/nav/common/styles/corporateTheme/corporateThemeRTL.css</comm:cssRtlUrl><comm:thumbnailUrl>/images/corporate.png</comm:thumbnailUrl>

</comm:theme>

Save, check back in

Altering Product Strings

Changing the Login strings, e.g.login.title=Welcome to IBM Connectionslogin.windowtitle=Log In to IBM Connectionslogin.user.label=User name:

Open templates.properties file:<websphere>/profiles/<profile>/installedApps/<cell>/Files.ear/lc.util.web-3.0.jar/com/ibm/lconn/core/strings/templates.properties

http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_product_strings_ic301

Create a new file in the “strings” directory that contains the path (within jar) to the property file and the files name:<CONNECTIONS_CUSTOMIZATION_PATH>/strings/com.ibm.lconn.core.strings.templates.properties

Copy the strings listed in previous slide and paste into the string file

Customise strings, Save, Restart

For translated strings, create additional files with the language code suffix applied to the file name, e.g. com.ibm.lconn.core.strings.templates_fr.properties

Altering Product Strings (cont.) - Example

Why use custom widgets?

Allows seamless integration of data into Communities, Homepage, or Profiles

Existing business applications

IBM Connections Data

Third party APIs

Uses flexible IBM iWidget architectureDevelopment can target server-side, client-side, or both

Can be used in other iWidget containers

Self containedAll code in its own module

Only references to module exist in configuration files

Check out Mikkel Findt Heisterberg (@lekkim) presentation on “Creating Widgets for IBM Connections”

Introducing Custom iWidgets

Administering Homepage widgetsWidgets can be added to side bar of updates page or to the catalogue

Cannot edit/remove Connections widgets

Can turn off the widget tab altogether from the admin tab

Administering Profiles & Communities widgetsProfiles only allows mandated widgets

Registering widgets is done using command line wsadmin services not UI

Configuration made in the widgets-config.xml

Add a new <widgetDef> element to widgets-config.xml under <resource type="community"> as described in the InfoCenter, e.g.

<widgetDef defId="TwitterSearch" url="http://blog.lbenitez.com/widgets/TwitterSearch/twitterSearchWidget.xml" modes="view edit" primaryWidget="false" iconUrl="http://www.twitter.com/favicon.ico" uniqueInstance="true" />

Restart Communities

Tip: The same procedure is used to add widgets to Profiles

Tip: Check the Lotus Greenhouse Catalog for a large range of widgets

Check out Mikkel Findt Heisterberg (@lekkim) presentation on “Creating Widgets for IBM Connections”

Adding Custom iWidgets

Ajax proxy prevents HTTP GET requests from non-IBM Connections services

Prevents all cookies or headers from being directed to the applications

Use the proxy template file proxy-config.tpl or create an application specific version. Eg. proxy-<applicationName>config.tpl

Check the files in and out using wsadmin console and the appropriate configuration service<proxy:policy url="http://blog.lbenitez.com/widgets/TwitterSearch/*" acf="none">

<proxy:actions><proxy:method>GET</proxy:method>

</proxy:actions>

<proxy:headers/><proxy:cookies/>

</proxy:policy>

Configuring the Ajax proxy

Customising - Best Practices: CreatingOnly copy the files you need into the customisation directory

Reduce the number of files to manage

Makes it easier to know what you have changed

Keep track of the changes you make through documentation or comments

Put comments directly into JSP or CSS files to simplify merging

Extensive changes may be difficult to update from release to release

Use custom.css whenever possible

Back up frequently, and have a process around deploying customization

If you have a staging or test environment, it is easy to back up your old customization before copying over the new customization

If you rename or move the customization directory you will completely disable customization

You may want to use a version control system for your customization folder

When you are ready to deploy, always update the version stamp

Customising - Best Practices: MaintainingOccasionally IBM will change a file you have customised

1) Back up your customisation directory

2) Disable all customisation by renaming the “customization” directory

3) Apply the iFix or fixpack

4) Test that the fix has been applied successfully

5) Identify any files that have changed in the fixpack that you have customised

6) Compare each new file from IBM to your customised copy, and merge changes

7) Rename your customisation directory to the correct name

8) Test your customisation's

Most changes to supported customisation files will be simple

Customising - Best Practices: DebuggingUse customisation debug mode in test environments

Changes take effect immediately

Never use debug mode on a production server!

Why don't I see my changes?

Check that the file is in the right location in the customisation directory (#1 source of problems!)

Clear your browser cache

Restart the application (or server) if debug mode is off

Syntax error in file you changed? Check that there are no errors being output to the page or to the logs

Printing the list of customized files

Enable IBM® WebSphere® trace for “com.ibm.lconn.core.web.customization.*=all”

Restart the Connections application

trace.log will contain customisation debug information during application startup

Publishing customisation changesDisable customisation debug:CONNECTIONS_CUSTOMIZATION_DEBUG and set to false

Update version stamp

Restart server

Integration

Integrating Connections with SametimeSametime Awareness via the Sametime Client

Configuring Single Sign On

Sametime Awareness via the Sametime Server

Sametime Awareness through the Sametime ClientConnects to mini http server in Connect client

Client must be 8.0.2 or above

Browser connects over http to the local client listening on 59449

Presence awareness can be retrieved over SSL for:

Sametime 8.5 or later standalone client

Notes 8.5.1 or later embedded client

User must be logged into Sametime from the same machine where they access Connections

Sametime Awareness through the Sametime ClientCheck out profiles-config.xml to a temp directory

Open config file and locate the sametimeAwareness element

Set enabled to true

Set ssl_href port to 59669 if sending traffic over SSL (Sametime 8.5 and above)

Check in profiles-config.xml and restart Profiles

Awareness shown in user profile and Business Card

Start chat from Business Card

Sametime Awareness through the Sametime ServerRequirements:

Profiles application of IBM Connections

Domino® Server 8.5 or later

Sametime Community Server 8.5.1 or later

Sametime Proxy Server 8.5.1 or 8.5.2

ST 8.5.1 proxy server environments cannot be set up with SSO:Tivoli® Access Manager, Computer Associates' SiteMinder, or Windows™ desktop.ST 8.5.2 environments supports SSO with any security proxies that are supported by both Sametime and IBM Connections.

In IBM Sametime Community Server 8.5.1 environments, must configure server in front of Connections to proxy Sametime requests (IHS, Edge, etc.)

Configuring Single Sign-On (cont.)Prerequisites for Single Sign-On

Common DNS domain

Common realm name

Time synchronisation

Export LTPA Key for WebSphere

Import LTPA Key into Domino

Enable multi server session authentication

Restart HTTP

http://www-10.lotus.com/ldd/lcwiki.nsf/dx/5._Implement_and_test_single_sign-on

Testing SSO between Connections and SametimeAlways verify SSO in both directions

Log in to IBM Connections – http://<host>/homepage

Verify same user is logged in to Sametime – http://<host>/stwebclient/popup.jsp

Clear cookies

Try the reverse

Log in to Sametime

Verify user is logged into Connections

Configure the IBM HTTP ServerConfigure IHS in front of Connections to act as a proxy server for awareness and chat between the client and STProxy server

Configurations steps:

1) Open IHS httpd.conf

2) Uncomment the following modules:LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_connect_module modules/mod_proxy_connect.soLoadModule proxy_http_module modules/mod_proxy_http.so

3) Add the following to the end of the conf file (they may already exist)LoadModule was_ap22_module "<PATH_TO_IHS_PLUGINS>\bin\32bits\mod_was_ap22_http.dll"WebSpherePluginConfig "<PATH_TO_IHS_PLUGINS>\config\webserver1\plugin-cfg.xml"

4) Add these proxy rules above WebSpherePluginConfigProxyPass /stwebclient http://<stproxy-hostname>:<port>/stwebclientProxyPass /stwebapi http://<stproxy-hostname>:<port>/stwebapiProxyPass /stbaseapi http://<stproxy-hostname>:<port>/stbaseapiProxyPassReverse /stwebclient http://<stproxy-hostname>:<port>/stwebclientProxyPassReverse /stwebapi http://<stproxy-hostname>:<port>/stwebapiProxyPassReverse /stbaseapi http://<stproxy-hostname>:<port>/stbaseapiProxyPassReverseCookieDomain http://<stproxy-hostname>:<port> ibm.comProxyPassReverseCookiePath / /

5) Save and close httpd.conf

6) Restart IHS

Configure the IBM HTTP ServerTest IHS connectivity to STProxy Server

Browse to STProxy via Connections HTTP server - https://<connections>/stwebclient/index.jsp

Enable Connections configuration with STProxy

Check out uiextension-config.xml and edit

Enable the global.pageRendering and lc.IMAwareness extensions

Set the lconnProxySvcUrl and lconnProxySvcUrlSSL parameters with the hostname of the HTTP Server used to access Connections

Save and check in uiextensions-config.xml

Update the value of the version stamp to force users' browsers to pick up this change

Sync nodes and restart server

Test awareness and chat in ConnectionsLog in to Connections

Sametime widget is displayed at the bottom right corner of the browser

Change Sametime status

Disconnect from Sametime

Launch Sametime web client

View a users profile to check their Sametime status

Load a users business card to view their status or launch chat

Sametime Integration ResourcesIBM Connections Product Documentation:

Adding Sametime awareness though the Sametime client

Adding Sametime awareness through the Sametime server

IBM Redbooks: Creating Integrated Web Experience with IBM Lotus collaboration software

Includes Portal, Connections, Sametime, and Quickr Domino integration steps

Customisation ResourcesIBM Connections wiki – Customizing

IBM Redbooks – Customizing IBM Connections 3.0.1

Thank You For Your Time

bberming@ie.ibm.com@brianbermingham