ibm connections 3.0.1 customisation and integration
TRANSCRIPT
IBM Connections 3.0.1 Customisation and Integrationwith Lotus Sametime
Brian [email protected]
@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