IBM Connections Customisation and Integration with Lotus Sametime. Brian

Transcription

1 IBM Connections Customisation and Integration with Lotus Sametime Brian

2 Who Am I? Brian Bermingham Social Software Customer Excellence

3 Agenda Customising IBM Connections IBM Connections integration with Lotus Sametime References IBM Redbooks: Customizing IBM Connections (also in PDF) Creating Integrated Web Experience with IBM Lotus collaboration software

4 Customisation

5 Customising IBM Connections What's Different in Connections Typical Connection Customisation Organisation Roles Understanding the New Customisation Process Building Simple Customisations Best Practices for Creating, Maintaining, and Debugging Resources

6 What's Different in Connections Customisation 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

7 Typical Connections Customisation Organisation Roles Administrators 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

8 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 Customization Directory Custom Custom Installed Content User Sees Custom Custom Custom Custom Custom Custom

9 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

10 Understanding the New Customisation Process (cont.) Application-specific customisation directories override the common customisation directory Profiles Customisation Common Customisation Installed Content Profiles User Sees Wikis User Sees

11 Building Simple Customisation

12 Building Simple Customisation

13 Building Simple Customisation

14 Building Simple Customisation Examples of customising: Styles Log in Adding a Communities custom theme Strings Adding Widgets

15 WAIT! - Make Life Easier Use customisation debug mode in test environments Add WAS environment variable at the cell level CONNECTIONS_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:

16 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/commo n/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

17 Customising the Adding 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

18 Customising the (cont.) Adding a logo (cont.) Open custom.css in a text editor Change the source URL for the logo in this file Minor style changes to align the menus with the logo Visit Connections in your web browser Clear your browser cache! Tip: Any file you add to the common directory becomes available in all applications

19 Customising the (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 editor Create 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

20 Customising the (cont.) Adding menus to the navigation bar Locate the header menu file <WebSphere>/profiles/<profile>/installedApps/<cell>/Files.ear/qkr.share.files.war/nav/templ ates/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 editor Using 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

21 Customising The 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/templ ates/footer.jsp Copy the footer.jsp file to the common customisation directory <CONNECTIONS_CUSTOMIZATION_PATH>/common/nav/templates/footer.jsp

22 Modifying Theme Colours

23 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; }

24 Customising The Login page

25 Customising The Login Locate 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

26 Adding custom Communities themes Community 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

27 Defining a Community theme Copy 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

28 Adding a theme to the Communities configuration file After 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

29 Altering Product Strings Changing the Login strings, e.g. login.title=welcome to IBM Connections login.windowtitle=log In to IBM Connections login.user.label=user name:

30 Altering Product Strings (cont.) - Example Open templates.properties file: <websphere>/profiles/<profile>/installedapps/<cell>/files.ear/lc.util.web-3.0.jar/ com/ibm/lconn/core/strings/templates.properties 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

31 Introducing Custom iwidgets 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 architecture Development can target server-side, client-side, or both Can be used in other iwidget containers Self contained All code in its own module Only references to module exist in configuration files Check out Mikkel Findt Heisterberg presentation on Creating Widgets for IBM Connections

32 Administering Homepage widgets Widgets 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 widgets Profiles only allows mandated widgets Registering widgets is done using command line wsadmin services not UI Configuration made in the widgets-config.xml

33 Adding Custom iwidgets Add a new <widgetdef> element to widgets-config.xml under <resource type="community"> as described in the InfoCenter, e.g. <widgetdef defid="twittersearch" url=" modes="view edit" primarywidget="false" iconurl=" 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

34 Configuring the Ajax proxy 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=" acf="none"> <proxy:actions> <proxy:method>get</proxy:method> </proxy:actions> <proxy:headers/> <proxy:cookies/> </proxy:policy>

35 Customising - Best Practices: Creating Only 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

36 Customising - Best Practices: Maintaining Occasionally 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

37 Customising - Best Practices: Debugging Use 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

38 Publishing customisation changes Disable customisation debug: CONNECTIONS_CUSTOMIZATION_DEBUG and set to false Update version stamp Restart server

39 Integration

40 Integrating Connections with Sametime Sametime Awareness via the Sametime Client Configuring Single Sign On Sametime Awareness via the Sametime Server

41 Sametime Awareness through the Sametime Client Connects to mini http server in Connect client Client must be or above Browser connects over http to the local client listening on Presence awareness can be retrieved over SSL for: Sametime 8.5 or later standalone client Notes or later embedded client User must be logged into Sametime from the same machine where they access Connections

42 Sametime Awareness through the Sametime Client Check 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 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

43 Sametime Awareness through the Sametime Server Requirements: Profiles application of IBM Connections Domino Server 8.5 or later Sametime Community Server or later Sametime Proxy Server or ST proxy server environments cannot be set up with SSO: Tivoli Access Manager, Computer Associates' SiteMinder, or Windows desktop. ST environments supports SSO with any security proxies that are supported by both Sametime and IBM Connections. In IBM Sametime Community Server environments, must configure server in front of Connections to proxy Sametime requests (IHS, Edge, etc.)

44 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

45 Testing SSO between Connections and Sametime Always verify SSO in both directions Log in to IBM Connections Verify same user is logged in to Sametime Clear cookies Try the reverse Log in to Sametime Verify user is logged into Connections

46 Configure the IBM HTTP Server Configure 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.so LoadModule proxy_connect_module modules/mod_proxy_connect.so LoadModule 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 WebSpherePluginConfig ProxyPass /stwebclient ProxyPass /stwebapi ProxyPass /stbaseapi ProxyPassReverse /stwebclient ProxyPassReverse /stwebapi ProxyPassReverse /stbaseapi ProxyPassReverseCookieDomain ibm.com ProxyPassReverseCookiePath / / 5) Save and close httpd.conf 6) Restart IHS

47 Configure the IBM HTTP Server Test IHS connectivity to STProxy Server Browse to STProxy via Connections HTTP server - 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

48 Test awareness and chat in Connections Log 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

49 Customisation Resources IBM Connections wiki Customizing IBM Redbooks Customizing IBM Connections Sametime Integration Resources IBM 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

50 Thank You For Your