Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customizing IBM Connections 3.0 - LS11 AD304

4,570 views

Published on

Clayton Coleman, IBM Connections User Interface Lead, presented this excellent introduction to Customizing IBM Connections during Lotusphere 2011.

Published in: Self Improvement
  • Be the first to comment

Customizing IBM Connections 3.0 - LS11 AD304

  1. 1. AD304 Customizing IBM Lotus Connections 3.0 Clayton Coleman | Lotus Connections User Interface Lead | IBM
  2. 2. Agenda <ul><li>What's Different in IBM Lotus ® Connections 3.0?
  3. 3. Understanding the New Customization Process
  4. 4. Branding a Simple Website
  5. 5. Best Practices for Creating, Maintaining, and Debugging
  6. 6. Migrating Customization from Previous Versions
  7. 7. Questions and Answers </li></ul>
  8. 8. What Has Changed in 3.0? <ul><li>Deploying changes to markup, style sheets, or images is much simpler
  9. 9. There is a new “Getting Started” page on the Homepage – this customizable page can help introduce users to your deployment
  10. 10. The header and footer now support Java TM Server Page (JSP) logic, and it is easy to add new menus or links to the header
  11. 11. The log in page is shared by all applications in Lotus Connections and can be easily customized
  12. 12. Most text in the user interface is replaceable
  13. 13. Themes for communities are easier to deploy and manage
  14. 14. Daily and weekly email digests (part of the Following feature) can be changed </li></ul>
  15. 15. What Hasn't Changed (Much)? <ul><li>Customizing Profiles for your company is very similar to 2.5
  16. 16. Changing the business card
  17. 17. Adding custom widgets to Homepage, Profiles, or Communities
  18. 18. Defining custom languages for users to choose from
  19. 19. Blog customization </li></ul>
  20. 20. “Typical” Organizational Roles <ul><li>Administrators </li><ul><li>Configure Lotus Connections to match organizational objectives
  21. 21. Maintain installation and manage deploying customization
  22. 22. Work with developers to update customization when fixpacks are deployed </li></ul><li>Designers </li><ul><li>Determine how Lotus Connections should be branded within an organization
  23. 23. Produce images and aesthetic guidance </li></ul><li>Web Developers </li><ul><li>Implement branding and customization with HTML through Java Server Pages (JSP), Cascading Style Sheets (CSS), and JavaScript </li><ul><li>Assume sufficient familiarity to make basic changes to JSP files </li></ul><li>Update customization when fixpacks or iFixes are applied
  24. 24. Implement deeper customization of Profiles, Communities, or other components to fit organizational objectives </li></ul></ul>
  25. 25. Agenda <ul><li>What's Different in IBM Lotus Connections 3.0?
  26. 26. Understanding the New Customization Process
  27. 27. Branding a Simple Website
  28. 28. Best Practices for Creating, Maintaining, and Debugging
  29. 29. Migrating Customization from Previous Versions
  30. 30. Questions and Answers </li></ul>
  31. 31. How Does Customization Work? <ul><li>We Hear You! </li><ul><li>Difficult to change the visual appearance of Lotus Connections with styles
  32. 32. Changing files inside of the installed WARs is hard to maintain
  33. 33. Login page not easy to change and different between each application
  34. 34. Setting up a custom header and footer can be tricky in complicated networks </li></ul><li>Goal #1: Make it simple to deploy customization
  35. 35. Goal #2: Fixpacks and iFixes should not affect customization
  36. 36. Goal #3: Most customization should follow a similar pattern
  37. 37. Solution: Allow customer-provided files to override the installed files. Custom files are placed in a special shared customization directory. Removing the file from this directory undoes the customization. </li></ul>
  38. 38. More Details on Customization <ul><li>Content in the customization directory overrides installed content </li></ul>Footer Custom Header Custom Header Footer Header Customization Directory Installed Content User Sees Custom Footer Header Custom Footer Footer Header Custom Footer Custom Header Custom Footer Custom Header Footer Header
  39. 39. More Details on Customization (cont.) <ul><li>Find the file you want to change from the installed application
  40. 40. Copy the file into the customization directory at the correct sub-directory
  41. 41. Make changes to the copied file
  42. 42. Restart the affected applications on your application server
  43. 43. Done! </li></ul><ul><li>Lotus Connections manages deploying the custom file transparently – no separate server or additional configuration necessary
  44. 44. To undo, delete the customized file and restart the affected applications.
  45. 45. The InfoCenter describes where you copy from and where you copy to – generally, you copy the file from where it sits in the WAR to the same relative path inside of the common customization directory </li></ul>
  46. 46. More Details on Customization (cont.) <ul><li>Application-specific customization directories override the common customization directory </li></ul>Common Customization Installed Content Profiles User Sees Wikis User Sees Profiles Customization Footer Header Footer Header Footer Header Footer Header Footer Footer Header Footer Header Footer Footer Header Footer Footer Header Footer Footer Header Footer Header Header Footer Header Header Footer Header Footer Header Footer Header Footer Header Footer Header Footer Header Footer Header Footer Header
  47. 47. Agenda <ul><li>What's Different in IBM Lotus Connections 3.0?
  48. 48. Understanding the New Customization Process
  49. 49. Branding a Simple Website
  50. 50. Best Practices for Creating, Maintaining, and Debugging
  51. 51. Migrating Customization from Previous Versions
  52. 52. Questions and Answers </li></ul>
  53. 53. Branding a Simple Site <ul><li>Convert the default look and feel to a Renovations branding
  54. 54. Demonstrate linking a deployment to an intranet
  55. 55. Enhance the log in page with a click-through agreement </li></ul><ul><li>Install Lotus Connections 3.0
  56. 56. Turn on customization debug mode
  57. 57. Restart the server </li></ul>
  58. 58. Changing Colors <ul><li>Open the style sheet file for the default theme in a text editor </li></ul><ul><ul><li><websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/common/styles/defaultTheme/defaultTheme.css </li></ul></ul><ul><li>Create a new, empty style sheet file in the common customization directory </li></ul><ul><ul><li><connectionsinstall> /data/shared/customization/common/ nav/common/styles/defaultTheme/custom.css </li></ul><li>Open custom.css file in a text editor </li><ul><li>Locate rules for sections of the page with accent colors – title bar and left navigation – in defaultTheme.css
  59. 59. Paste those rules in custom.css, and change the colors from light blue to red
  60. 60. Save changes </li></ul><li>Tip: defaultTheme.css contains most color settings for the product
  61. 61. Tip: Figuring out which CSS rules control which elements can be difficult. Use a tool like Firebug for Mozilla Firefox to locate the rules you want to change. </li></ul>
  62. 62. Changing Colors (cont.) <ul><li>Visit Lotus Connections in your web browser </li></ul><ul><ul><li>Clear your browser cache!
  63. 63. http://<server>:<port>/files </li></ul><li>Tip: If you are making extensive changes or sending CSS to an external party alter defaultTheme.css instead. </li></ul>
  64. 64. Adding a Logo Image <ul><li>Create a new logo image for the site </li><ul><li>toolbar_logo.gif (306x66 pixels) </li></ul><li>Copy the image to the common customization directory </li><ul><li><connectionsinstall> /data/shared/customization/common/ nav/common/styles/images/toolbar_logo.gif </li></ul><li>Verify that the image appears in your browser </li><ul><li>Open http://<server>:<port>/files/nav/common/styles/images/toolbar_logo.gif </li></ul></ul>
  65. 65. Adding a Logo Image (cont.) <ul><li>Open defaultTheme.css in a text editor </li><ul><li>Change the source URL for the logo in this file
  66. 66. Minor style changes to align the menus with the logo
  67. 67. Save changes </li></ul></ul><ul><li>Visit Lotus Connections in your web browser </li></ul><ul><ul><li>Clear your browser cache!
  68. 68. http://<server>:<port>/files </li></ul><li>Tip: Any file you add to the common directory becomes available in all applications </li></ul>
  69. 69. Integrated Header <ul><li>Locate the header file </li><ul><li><websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/templates/header.jsp </li></ul><li>Copy the header file to the common customization directory </li><ul><li><connectionsinstall> /data/shared/customization/common/ nav/templates/header.jsp </li></ul><li>Open the copied file in a text editor </li><ul><li>Create a new “Intranet” menu drop down by copying the “People” menu link
  70. 70. Add a “Support Forum” link in the upper right
  71. 71. Move the logo element in the page
  72. 72. Save changes </li></ul></ul>
  73. 73. Integrated Header (cont.) <ul><li>Locate the header menu file </li><ul><li><websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/templates/menu/people.jsp </li></ul><li>Copy the header file to the common customization directory with a new name </li><ul><li><connectionsinstall> /data/shared/customization/common/ nav/templates/menu/intranet.jsp </li></ul><li>Open the copied file in a text editor </li><ul><li>Using the “People” menu as an example, create links pointing to intranet locations
  74. 74. Save changes </li></ul><li>Tip: Popup menus can use dynamic logic or Javascript – very flexible
  75. 75. Tip: Menu contents can be styled as desired </li></ul>
  76. 76. Integrated Header (cont.) <ul><li>Visit Lotus Connections in your web browser </li></ul><ul><ul><li>Clear your browser cache!
  77. 77. http://<server>:<port>/files </li></ul></ul>
  78. 78. Enhanced Log In Page <ul><li>Locate the login Java Server Page (JSP) file </li><ul><li><websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/templates/login.jsp </li></ul><li>Copy the style sheet file to the common customization directory </li><ul><li><connectionsinstall> /data/shared/customization/common/ nav/templates/login.jsp </li></ul><li>Open the copied file in a text editor </li><ul><li>Remove IBM branding and add informational text
  79. 79. Add a very simple click through agreement using JavaScript
  80. 80. Save changes </li></ul></ul>
  81. 81. Enhanced Log In Page (cont.) <ul><li>Visit Lotus Connections in your web browser </li></ul><ul><ul><li>http://<server>:<port>/files/login </li></ul></ul>
  82. 82. <ul><li>Locate the string resource file for the header and login pages </li><ul><li>Unzip the JAR file <websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/lc.util.web-3.0.jar to a temporary directory with a zip program
  83. 83. In the temporary directory, find the file /com/ibm/lconn/core/strings/templates.properties </li></ul><li>Create a new file in the string customization directory with the name </li><ul><li><connectionsinstall> /data/shared/customization/strings/ com.ibm.lconn.core.strings.templates.properties </li></ul><li>Open both the existing resource file and the new file in a text editor </li><ul><li>Copy the entire line (or lines) you want to change from the old to the new file
  84. 84. Change text strings for the log in page to match branding
  85. 85. Save changes </li></ul></ul>Altering Product Text
  86. 86. Altering Product Text (cont.) <ul><li>Restart the Lotus Connections server
  87. 87. Visit Lotus Connections log in page in your web browser </li><ul><li>http://<server>:<port>/files/login </li></ul></ul>
  88. 88. Getting Started Page <ul><li>Create a new HTML file in the common customization directory </li><ul><li><connectionsinstall> /data/shared/customization/common/ nav/gettingstarted/renovations.html </li></ul><li>Open the file in a text editor </li><ul><li>Add informational text about guidelines for Renovations users.
  89. 89. Save changes to the file </li></ul><li>Change the first <step> in gettingstarted-config.xml (as described in the InfoCenter ) </li><ul><li>Secure link: ${lcurl:homepage.secure}/ nav/gettingstarted/renovations.html
  90. 90. Unsecure link: ${lcurl:homepage}/ nav/gettingstarted/renovations.html </li></ul><li>Restart Homepage application </li></ul>
  91. 91. Getting Started Page (cont.) <ul><li>Visit Lotus Connections Homepage in your web browser </li><ul><li>http://<server>:<port>/homepage </li></ul></ul>
  92. 92. Agenda <ul><li>What's Different in IBM Lotus Connections 3.0?
  93. 93. Understanding the New Customization Process
  94. 94. Branding a Simple Website
  95. 95. Best Practices for Creating, Maintaining, and Debugging
  96. 96. Migrating Customization from Previous Versions
  97. 97. Questions and Answers </li></ul>
  98. 98. Best Practices: Creating <ul><li>Only copy the files you need into the customization directory </li><ul><li>Reduce the number of files to manage
  99. 99. Makes it easier to know what you have changed </li></ul><li>Keep track of the changes you make through documentation or comments </li><ul><li>Put comments directly into JSP or CSS files to simplify merging
  100. 100. Extensive changes may be difficult to update from release to release </li></ul><li>Use custom.css whenever possible </li><ul><li>Easier to track your style changes and handle migration </li></ul><li>Back up frequently, and have a process around deploying customization </li><ul><li>If you have a staging or test environment, it is easy to back up your old customization before copying over the new customization
  101. 101. If you rename or move the customization directory you will completely disable customization
  102. 102. You may want to use a version control system for your customization folder </li></ul><li>When you are ready to deploy, always update the version stamp </li><ul><li>This ensures that old versions of the site are removed from browser caches </li></ul></ul>
  103. 103. Best Practices: Maintaining <ul><li>Occasionally IBM will change a file you have customized
  104. 104. All Fixpacks and iFixes will document which files are being changed </li></ul><ul><li>Back up your customization directory
  105. 105. Disable all customization by renaming the customization directory
  106. 106. Apply the iFix or fixpack
  107. 107. Test that your environment still is functional
  108. 108. Identify any files that have changed in the fixpack that you have customized
  109. 109. Compare each new file from IBM to your customized copy, and merge changes
  110. 110. Rename your customization directory to the correct name
  111. 111. Test your customization </li></ul><ul><li>Most changes to supported customization files will be simple </li></ul>
  112. 112. Best Practices: Debugging <ul><li>Use customization debug mode in test environments </li><ul><li>Changes take effect immediately
  113. 113. Never use debug mode on a production server! </li></ul><li>Why don't I see my changes? </li><ul><li>Check that the file is in the right location in the customization directory (#1 source of problems!)
  114. 114. Clear your browser cache
  115. 115. Restart the application (or server) if debug mode is off
  116. 116. Syntax error in file you changed? Check that there are no errors being output to the page or to the logs </li></ul><li>Printing the list of customized files </li><ul><li>Enable WebSphere trace for “com.ibm.lconn.core.web.customization.*=all”
  117. 117. Restart the Lotus Connections application
  118. 118. trace.log will contain customization debug information during application startup </li></ul></ul>
  119. 119. Agenda <ul><li>What's Different in IBM Lotus Connections 3.0?
  120. 120. Understanding the New Customization Process
  121. 121. Branding a Simple Website
  122. 122. Best Practices for Creating, Maintaining, and Debugging
  123. 123. Migrating Customization from Previous Versions
  124. 124. Questions and Answers </li></ul>
  125. 125. Migrating from 2.5 to 3.0 <ul><li>Style customization </li><ul><li>Some style rules have been changed, especially those that affect color and borders
  126. 126. If you have added additional CSS files via the header, copy the contents of those files into <connectionsinstall> /data/shared/customization/common/ nav/common/styles/defaultTheme/custom.css
  127. 127. If you have a complete visual override, you may want to port your changes to the new format by following the InfoCenter topic “Making extensive color and style changes”
  128. 128. An example of the 2.5 theme (using the new style rules) is located at <websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/common/styles/gen1Theme </li></ul><li>Header and Footer </li><ul><li>Because the header exposes new features in Lotus Connections 3.0, we recommend that you migrate your changes on top of the new header
  129. 129. An example of the 2.5 header as a JSP is located at: <websphere> /profiles/ <profile> /installedApps/ <cell> /Files.ear/qkr.share.files.war/ nav/templates/originalHeader.jsp </li></ul></ul>
  130. 130. Questions and (Hopefully) Answers <ul><li>More detail on a type of customization?
  131. 131. Can I customize other things? </li><ul><li>Yes, but support is limited outside of the types covered here. Change at your own risk, and consult with your support team. </li></ul><li>Can support team answer customization questions? </li><ul><li>Yes, for directly supported customization, and can provide info about what files need to be changed for other parts of the application
  132. 132. Use recommended debugging steps – support team will ask you to work through those </li></ul><li>Thank you! </li></ul>
  133. 133. Related Sessions <ul><li>AD301 Extending the Social Network: Part One
  134. 134. AD302 Extending the Social Network: Part Two
  135. 135. AD303 Connecting Developers and Community with Rational ® Jazz TM and Lotus Connections
  136. 136. JMP205 IBM Lotus Connections 3.0 Administration Overview
  137. 137. JMP302 Master Class: CSS and HTML Master Class </li></ul>
  138. 138. Reference Material <ul><li>InfoCenter </li><ul><li>Overview and common process - Link
  139. 139. Extensive color and style changes – Link
  140. 140. Customizing the Getting Started page - Link
  141. 141. Changing the header - Link
  142. 142. Changing product strings – Link
  143. 143. Customizing Email Digests - Link </li></ul><li>developerWorks – Customizing IBM Lotus Connections 3.0
  144. 144. Lotusphere 2010 – SHOW303: Putting Sparkle in Your Social Applications! </li></ul>
  145. 145. Example Files Changing Colors <ul><li>Changes to custom.css to alter colors </li></ul>Adding a Logo Image <ul><li>Add a new logo for the header
  146. 146. Change the styles which show the logo </li></ul>Integrated Header <ul><li>Add a “Support Forum” link in the upper right
  147. 147. Add an “Intranet” menu to the header </li></ul>Enhanced Log In Page <ul><li>Provide a simple click-through agreement before log in
  148. 148. Remove IBM specific image </li></ul>Altering Product Text <ul><li>Alter the text on the Log In page </li></ul>Getting Started Page <ul><li>Add a Renovations step to the Getting Started page </li></ul>
  149. 149. Legal Disclaimer © IBM Corporation 2011. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. IBM, the IBM logo, Lotus, WebSphere, Rational, Rational Jazz and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. All references to Renovations refer to a fictitious company and are used for illustration purposes only.

×