Auslug 2011 customising ibm connections


Published on

This is my presentation from AusLUG 2011 in AUG 2011 on Customising IBM Connections.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Building: Room: Date: Time:
  • Auslug 2011 customising ibm connections

    1. 1. <ul>Customising IBM Connections. </ul><ul>Adam Brown Director Technology & Business Development Connections Specialist ISW [email_address] Twitter: adambrownaus Blog: LinkedIn: </ul>
    2. 2. profilephoto.jpg <ul>Your Presenter: </ul><ul><li>Adam Brown
    3. 3. Executive Director of ISW –
    4. 4. Working with IBM/Lotus Tech since 1996
    5. 5. IBM Connections Specialist </li></ul><ul><ul><li>2-3 years
    6. 6. IBM Connections 3.x Design Partner
    7. 7. Blog – </li></ul></ul><ul>Contact me @: </ul><ul>[email_address] </ul><ul>Twitter: adambrownaus LinkedIn: </ul><ul>....or even the phone 0419 117 613! </ul>
    8. 8. Kung Pao chicken Sichuan pepper corns, heaven facing chillies and fresh chilli iStock_000011179603XSmall.jpg Sichuan style Wagyu beef hotpot with wild bamboo pith and tofu Beef fillet in fire water Broth blackened with chilli and Sichuan peppercorn Whole steamed Snapper with black bean and salted chilli
    9. 9. iStock_000011179603XSmall.jpg <ul>What we are going to cover: </ul><ul><li>Overview of Customisations in 3.0.x
    10. 10. Look and Feel </li></ul><ul><ul><li>Logo, Navigation, Footer, Themes, Login Pages
    11. 11. Customising Strings </li></ul></ul><ul><li>Customising Profiles </li></ul><ul><ul><li>Which fields display and order.
    12. 12. Editable or Read Only
    13. 13. Field Labels & Extension Fields </li></ul></ul><ul><li>Customising Profiles Search </li></ul><ul><ul><li>Advanced Search & Search Results </li></ul></ul><ul><li>Integrating into Connections. This is really cool!
    14. 14. What else can you do?
    15. 15. Interaction & Questions are good! </li></ul>
    16. 16. <ul>Reference & Resources </ul><ul><li>There is an awesome community of Connections experts out there. This presentation is made from our collective experience. </li></ul><ul><li>IBM Connections Documentation (just search for it)
    17. 17. Luis Benetiz – Lots of great ideas for integrating Widgets and other stuff ( )
    18. 18. TDI Gurus - Curious Mitch ( ) & John Bilson (presenting at AUSLUG today)
    19. 19. Stuart McIntyre – Connections specialist in the UK ( ) and TWIL (
    20. 20. My blog ( </li></ul>
    21. 21. <ul>But first a few questions for you.... </ul><ul><li>How many have seen/used IBM Connections?
    22. 22. Admin?
    23. 23. Developer?
    24. 24. Edited HTML & JSP?
    25. 25. Edited CSS?
    26. 26. Tivoli Directory Integrator? </li></ul>
    27. 27. <ul>Overview of Customisations in 3.0.1 </ul><ul><li>The good news is that as of Connections 3 things got easier. In 2.5 it was a bit of a pain. </li></ul><ul><ul><li>Each feature had to be done separately.
    28. 28. Had to put changed files on the IHS server.
    29. 29. Lots of duplicated effort. </li></ul></ul><ul><li>With 3.0 you can customise individual features or common features across the entire suite
    30. 30. Also no need to move themes onto the HTTP server to customise them
    31. 31. Don’t need to restart all the time as well. </li></ul>
    32. 32. <ul>Themes </ul><ul><li>Themes are made up of: </li></ul><ul><ul><li>CSS
    33. 33. header.html
    34. 34. footer.html
    35. 35. Images </li></ul></ul><ul><li>CSS affects the design but not the layout or functionality
    36. 36. Controls all of the colours and background images
    37. 37. Allows designers to change elements like link colours etc </li></ul>
    38. 38. <ul>Application Directories </ul><ul>The default location for the web application directory for each application is: <WAS_home> /profiles/ <profile_name> /installedApps/ <cell_name> / <application_name.ear> / <application_name.war> where: <WAS_home> is the directory to which you installed IBM WebSphere® Application Server <profile_name> is the profile to which you installed one of the IBM Connections applications <cell_name> is the cell to which 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: Activities - oawebui.war | Blogs - blogs.war Bookmarks - dogear.webui.war | Communities - comm.web.war Files - qkr.share.files.war | Forums - forums.web.war Home page - homepage.war | Profiles - Search - search.war | Wikis - </ul>
    39. 39. <ul>Customisation Folders </ul><ul><li>Connections 3.0.x has the ability to customise both common and application specific features
    40. 40. Basically you take a copy of the original and put it in the Customisation Folders
    41. 41. This means it is much easier to manage and maintain moving forward
    42. 42. You can modify common, specific, or both. </li></ul>
    43. 43. <ul>Customisation Directories </ul>
    44. 44. <ul>Customisation Directories </ul>
    45. 45. <ul>Basic Steps to customise </ul><ul><li>Enable Customisation </li></ul><ul><ul><li>Log onto the WebSphere Application Service Console and select Environment>WebSphere Variables
    46. 46. CONNECTIONS_CUSTOMIZATION_DEBUG (must be set to true to enable customisations to take effect. Set back to false once customisations are completed)
    47. 47. Review but don’t change CONNECTIONS_CUSTOMIZATION_PATH (This is the location of the customisations directories. Default is <connectionsinstall>/data/shared/customization/common/) </li></ul></ul><ul><li>Restart Connections server(s)
    48. 48. Find the file you want to change from the installed application
    49. 49. Copy the file into the customisation directory at the correct-sub-directory
    50. 50. Make your changes and restart the affected applications. </li></ul>
    51. 51. <ul>Look and Feel – Adding your logo </ul><ul><li>Create a new logo image for the site </li></ul><ul><ul><ul><li>Logo.png </li></ul></ul></ul><ul><li>Copy the image to the common customisation directory: </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavcommonstylesimageslogo.png </li></ul></ul><ul><li>Verify that the image appears in your browser </li></ul><ul><ul><li>Open </li></ul></ul><ul><li>Create custom.css in the common customisation directory: </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavcommonstylesdefaultThemecustom.css </li></ul></ul><ul><li>Specify your image size in custom.css. In our case: </li></ul><ul><ul><ul><ul><li>.lotusui .lotusLogo, .lotusLoginLogo {
    52. 52. height: 30px;
    53. 53. width: 145px;
    54. 54. } </li></ul></ul></ul></ul><ul><li>Restart Connections Application Servers
    55. 55. Clear Cache from browser and reload. </li></ul>
    56. 60. <ul>Look and Feel – Changing Colours </ul><ul><li>You can change pretty much all colours including links, fonts and font size
    57. 61. Remember tech people don’t tend to be good designers. </li></ul><ul><ul><ul><li>Get your branding/design people involved </li></ul></ul></ul><ul><li>Recommend you use Firebug or similar to select the CSS and edit first so you can preview your change
    58. 62. Basically you identify the CSS elements you want to change and put them in the custom.css we created earlier.
    59. 63. Note if you want you can theme each application differently in which case you put them in the application customisations directory instead of common. </li></ul>
    60. 64. <ul>Some tips </ul><ul><li>The standard interface has some nice gradients. These behave differently in different browsers (i.e. IE): </li></ul><ul><ul><ul><li>.lotusTitleBar { </li></ul></ul></ul><ul><ul><ul><li>background-color: #988F86;
    61. 65. background-image: -moz-linear-gradient(center top , #5B554F 0%, #988F86 100%);
    62. 66. background-image: -webkit-gradient(linear, left top, left bottom, from(#5B554F), to(#988F86));
    63. 67. } </li></ul></ul></ul><ul><li>Across the different applications sometimes the CSS elements are different so you need to check/determine them all.
    64. 68. Consider if users are going to have Custom Themes for Communities and Blogs. This can sometimes create some ugly situations that clash with your changes in particular logo’s if you change the dimensions. </li></ul><ul>Reference: </ul>
    65. 71. <ul>Look and Feel - Menu </ul><ul><li>You can customise the Menu to include addition links
    66. 72. Locate the header file: </li></ul><ul><ul><li><WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesheader.jsp </li></ul></ul><ul><li>Copy the header file to the common customisation directory </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesheader.jsp </li></ul></ul><ul><li>Edit the header.jsp </li></ul><ul><ul><li>Create the new “Links” menu drop-down by copying the “Apps” menu link and changing </li></ul></ul><ul><ul><ul><ul><li>the id of the li item,
    67. 73. the aria-owns attribute,
    68. 74. the aria-label attribute,
    69. 75. and the String (ie replace <fmt:message key=&quot;; />) with your Menu item.
    70. 76. Specify the menu src JSP (Next Page) </li></ul></ul></ul></ul><ul><ul><li>Save Changes </li></ul></ul>
    71. 77. <ul>Look and Feel – Menu (Cont) </ul><ul><li>Locate the header menu file: </li></ul><ul><ul><li><WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesmenupeople.jsp </li></ul></ul><ul><li>Copy the people.jsp into the common directory with a new name: </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesmenulinks.jsp </li></ul></ul><ul><li>Using the “People” menu as an example, create the new links.
    72. 78. Save & Restart
    73. 79. At the end of the day the menu is just JSP so you can do whatever you want. </li></ul>
    74. 81. <ul>Look and Feel – Footer </ul><ul><li>Locate the header menu file: </li></ul><ul><ul><li><WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesfooter.jsp </li></ul></ul><ul><li>Copy the footer.jsp into the common directory: </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesfooter.jsp </li></ul></ul><ul><li>Edit the file to remove or add links in the footer
    75. 82. Save & Restart </li></ul><ul><li>Again it is just a JSP so you can get fancier if you want and add other capabilities to the footer area. </li></ul>
    76. 84. <ul>Look and Feel – Login Pages </ul><ul><li>You can customise the logon pages to be whatever you want
    77. 85. Locate the login JSP file: </li></ul><ul><ul><ul><ul><li><WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplateslogin.jsp </li></ul></ul></ul></ul><ul><li>Copy the login.jsp into the common directory: </li></ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavtemplateslogin.jsp </li></ul></ul><ul><li>Edit the file to customise. Note must of the text uses String Resources (Described Next) so you can update the resources instead.
    78. 86. Save & Restart </li></ul>
    79. 87. <ul>Look and Feel – Customising Strings </ul><ul><li>Many of the text thru out Connections is based on String Resources
    80. 88. However you need to dig thru the JAR files to find the strings. Unzip the JAR files in the applications and look in the resource files. </li></ul><ul><ul><ul><li>For example: </li></ul></ul></ul><ul><li>Create a new file in the string customisation directory with the name: </li></ul><ul><ul><li><LotusConnectionsDir>
    81. 89. Note that the file name is the same as the original location however the “”’s become “.”’s </li></ul></ul><ul><li>Open both the existing resource file and the new file in a text editor
    82. 90. Copy the entire line(s) you want to change from the old to the new file and change the text strings.
    83. 91. Some common properties files to change: </li></ul><ul><ul><li> (and the associate alternate languages)
    84. 92.
    85. 93. (For Mobile Web App) </li></ul></ul>
    86. 94. <ul>Application </ul><ul>JAR file relative to /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/was01Cell01 </ul><ul>Template relative to /opt/IBM/LotusConnections/data/shared/customization/strings </ul><ul>Common </ul><ul>Homepage.ear/homepage.war/WEB-INF/lib/lc.util.web-3.0.jar </ul><ul> </ul><ul>Activities </ul><ul>Activities.earoawebui.warWEB-INFliboawebui.jar </ul><ul> </ul><ul>Blogs </ul><ul>Blogs.earblogs.warWEB-INFclassescomibmlconnblogsstrings </ul><ul> </ul><ul>Bookmarklet </ul><ul>Activities.earlc-bookmarklet.warWEB-INFliblc-bookmarklet.jar Blogs.earlc-bookmarklet.warWEB-INFliblc-bookmarklet.jar Bookmarks.earlc-bookmarklet.warWEB-INFliblc-bookmarklet.jar Communities.earlc-bookmarklet.warWEB-INFliblc-bookmarklet.jar </ul><ul> </ul><ul>Bookmarks </ul><ul>Dogear.eardogear.webui.warWEB-INFlibdogear.svc.jar </ul><ul> </ul><ul>Communities </ul><ul>Communities.ear/comm.web.war/WEB-INF/lib/comm.web.jar </ul><ul> </ul><ul>Files </ul><ul>Files.ear/lconn.files.ui.jar </ul><ul> </ul><ul>Forums </ul><ul>Forums.ear/forum.web.war/WEB-INF/lib/forum.web.jar </ul><ul> </ul><ul>Homepage </ul><ul>homepage.war/WEB-INF/lib/homepage.utils.jar </ul><ul> </ul><ul>News </ul><ul>News.ear/news.web.war/WEB-INF/lib/news.common.jar </ul><ul> </ul><ul>Profiles </ul><ul> </ul><ul> </ul><ul>Search </ul><ul>Search.ear/search.common.jar </ul><ul> </ul><ul>Wikis </ul><ul>Wikis.ear/lconn.wikis.ui.jar </ul><ul> </ul><ul>Reference: </ul>
    87. 95. <ul>Look and Feel – Welcome Page </ul><ul><li>You can hunt thru and customise the string resources (do this if you want multiple languages supported)
    88. 96. Or you can create a new HTML File in the common customisation directory </li></ul><ul><ul><ul><li><LotusConnectionsDir>datasharedcustomizationcommonnavgettingstartednewwelcome.html
    89. 97. Put whatever you want to display in the HTML </li></ul></ul></ul><ul><li>Now check out the gettingstarted-config.xml </li></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><li>Change the first <step> to point both the Securelink and the Unsecurelink to your HTML page. </li></ul><ul><ul><ul><ul><li>secure=&quot;${}/nav/gettingstarted/gettingStartedNew.html&quot; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>unsecure=&quot;${lcurl:homepage.unsecure}/nav/gettingstarted/gettingStartedNew.html&quot; /> </li></ul></ul></ul></ul><ul><li>Restart Homepage application </li></ul>
    90. 100. <ul>Customising Profiles – Overview </ul><ul><li>Ok so that is a lot of interface stuff which is important
    91. 101. However in a typical implementation customising Profiles is the most important area </li></ul><ul><li>Common Requests include: </li></ul><ul><ul><li>Customising which fields are populated from the LDAP or other sources. Populating Photo’s is great if you have them.
    92. 102. Changing Field Labels or order
    93. 103. Enabling/Disabling Fields. Read Only/Editable Fields
    94. 104. Do fields appear in Profile if no data?
    95. 105. Adding Custom Fields (Field Extensions)
    96. 106. Profile Types – Different Fields for different Profiles </li></ul></ul><ul><li>There are a lot of other ways to customise Profiles but these are the basics. </li></ul>
    97. 107. <ul>Customising Profiles – Data Population </ul><ul><li>Connections comes with an entitlement for Tivoli Directory Integrator.
    98. 108. Out of the box it provides a series of Assembly Lines for populating & synching Profiles data from your LDAP
    99. 109. This is great but in many cases you need data from alternate sources as well. </li></ul><ul><li>TDI is a DATA MOVING MACHINE!. </li></ul><ul><ul><li>Connectors for Domino/JDBC/HTTP/FTP/Web Services/etc/etc/etc
    100. 110. Also you can build your own Connectors
    101. 111. Pull data and push data from just about anywhere to keep it all in sync.
    102. 112. Not going to provide detail here as next session has it: </li></ul></ul><ul><ul><ul><li>John Bilson from ISW - TDI Guru – Your new favourite Pet – the Data Moving Animal: IBM’s Tivoli Directory Integrator – 9.30 – 10.30 in Perspective Room. </li></ul></ul></ul>
    103. 113. <ul>Customising Profiles – profiles-config.xml </ul><ul><li>It is all controlled by profiles-config.xml </li></ul><ul><ul><li>Use wsadmin to check out, modify, and check back in.
    104. 114. cd /<WASHOME>/profiles/Dmgr01/bin
    105. 115. ./ –lang jython –user <wasadmin> -password <password> -port 8879
    106. 116. execfile(&quot;;)
    107. 117. print AdminControl.getCell() to get the cell name.
    108. 118. ProfilesConfigService.checkOutConfig (&quot; <working_directory ”,”ServerNode01Cell”) </li></ul></ul><ul><ul><li>Make your changes to the profiles-config.xml </li></ul></ul><ul><ul><li>ProfilesConfigService.checkInConfig()
    109. 119. execfile(&quot;;)
    110. 120. LCConfigService.checkOutConfig(&quot; <working_directory> &quot;,&quot; <cell_name> &quot;)
    111. 121. Update the version stamp in LotusConnections-config.xml LCConfigService.updateConfig(&quot;versionStamp&quot;,&quot;&quot;)
    112. 122. LCConfigService.checkInConfig()
    113. 123. Restart Servers </li></ul></ul>
    114. 124. <ul>Customising Profiles – Fields </ul><ul><li>You can change the fields that are available for Profiles.
    115. 125. You can also change their attributes – Editable/Read Only/Visible/Labels
    116. 126. You can also decide if fields with no data are hidden in read mode
    117. 127. You can even have different Profile Types for different users. </li></ul><ul><ul><li>Management
    118. 128. Contractors
    119. 129. Or maybe Role based </li></ul></ul><ul>Ok so lets look at the default.... </ul>
    120. 131. <ul>Customising Profiles - Fields </ul><ul><li>In profiles-config.xml find <profileLayout profileType=&quot;default&quot;> stanza
    121. 132. Each attribute in Profile and Edit My profile is controlled by an entry in this section. </li></ul>
    122. 133. <ul>Customising Profiles – Hiding Fields </ul><ul><li>So first of all lets get rid of a few fields </li></ul><ul><ul><li>IP Telephone, Pager, Fax, Assistant </li></ul></ul><ul><li>Check out profiles-config.xml and edit </li></ul><ul><li>All we do is simply comment them out: </li></ul><ul><ul><li><!-- <editableAttribute showLabel=&quot;true&quot; hideIfEmpty=&quot;true&quot;>ipTelephoneNumber</editableAttribute> --> </li></ul></ul><ul><li>Check it back in and restart Profiles Application </li></ul>
    123. 135. <ul>Customising Profiles – Adding Fields </ul><ul><li>So now we might want to add a few field extensions </li></ul><ul><ul><li>For AusLUG lets add fields for Twitter ID and LinkedIn Page </li></ul></ul><ul><li>Again we edit profiles-config.xml, find the default profile type and add the appropriate attribute.
    124. 136. We want the field to be editable and we want it to appear in read mode even if they havn’t provided the data.
    125. 137. First add to Extension Attribute stanza (near the top): </li></ul><ul><li>Then within Profile Type we add the extensionAttribute: </li></ul>
    126. 140. <ul>Customising Profiles – Labels </ul><ul><li>Ok so to add Labels for the fields (or if you want to change labels of existing fields) you need to create a resource bundle.
    127. 141. Create a new file in the <customisation dir>/strings directory. </li></ul><ul><ul><li>Name it <resource_bundle_name>.<properties_file_name>.
    128. 142. Add your custom labels. For example in our case: </li></ul></ul><ul><li>Check out and modify profiles-config.xml so that the attributes have the bundleIdRef and labelKey specified </li></ul><ul><li>Check out and modify LotusConnections-config.xml to add the resource bundle. </li></ul><ul><li>Restart the servers. </li></ul>
    129. 145. <ul>Profiles – Customising Search </ul><ul><li>You can customise both the Directory Advanced Search as well as the search results.
    130. 146. Again controlled in profiles-config.xml
    131. 147. Just comment out the fields you don’t want and add in the extra’s you do. </li></ul>
    132. 149. <ul>Profiles – Customising Search (Cont) </ul><ul><li>And modify the search results by changing the searchResultsLayout stanza: </li></ul>
    133. 151. <ul>Some Tips </ul><ul><li>Use a mindmap/notepad or something to store all the wsadmin commands so you can cut and paste. You will use this stuff a LOT!
    134. 152. ALWAYS CHECK OUT AND CHECK IN the config files. Edit in place at your own risk!
    135. 153. If it isn’t working clear your cache! Although if you update the versionID in LotusConnections-config.xml it should be fine
    136. 154. Remember CASE Sensitive in files/attributes etc.
    137. 155. Use appropriate Change Management and Versioning of files.
    138. 156. Experiment! The possibilities are endless! </li></ul>
    139. 157. <ul>One last thing - Integrating </ul><ul><li>Awesome idea from Luis Benitez ( )
    140. 158. enables you to embed web pages/youtube/slideshare etc etc directly into pages simply by the user posting a URL.
    141. 159. Works in Blogs/Status Updates/Forums/etc
    142. 160. You need to register at for an Key. It is FREE!
    143. 161. You just need to add this to header.jsp before the <div class=&quot;lotusRightCorner&quot;> : </li></ul><ul><ul><ul><ul><ul><li><script src=&quot;;></script> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><script src=&quot;;></script>
    144. 162. <script type=&quot;text/javascript&quot;> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$('document').ready(function(){
    145. 163. $('div.lotusContent').embedly({key:‘YOURKEY'});
    146. 164. });
    147. 165. </script> </li></ul></ul></ul></ul></ul><ul><ul><li>And this to the footer.jsp at the bottom of the file: </li></ul></ul><ul><ul><ul><ul><ul><li>setTimeout(&quot;$('div.lotusContent').embedly({ maxWidth: 450, wmode: 'transparent', method: 'after' });&quot;,2000); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li></script> </li></ul></ul></ul></ul></ul>
    148. 167. <ul>So what else can you do? </ul><ul><li>HEAPS!......Connections is very flexible and the new customisations capability enables you to change or enhance the product. For example ISW is working on some Line of Business xPages applications that will be integrated with Connections seemlessly.
    149. 168. Integrate Google Gadgets and iWidgets
    150. 169. Have different Profile Types for different users
    151. 170. Update Business Cards. Integrate Business Cards
    152. 171. Modify Notification Emails
    153. 172. Show/Add/Hide iWidgets (LinkedIn, Facebook, Twitter)
    154. 173. Customise the Connections API to support your field extensions
    155. 174. Make more serious customisations to the JSP’s thru out Connections
    156. 175. Integrate Connections seamlessly with WebSphere Portal </li></ul><ul><ul><li> </li></ul></ul><ul><li>Integrate Sametime/Quickr or even Sharepoint!
    157. 176. Integrate your Apps with Connections!
    158. 177. And more and more and more! </li></ul>
    159. 178. <ul>Reference & Resources </ul><ul><li>There is an awesome community of Connections experts out there. This presentation is made from our collective experience. </li></ul><ul><li>IBM Connections Documentation (just search for it)
    160. 179. Luis Benetiz – Lots of great ideas for integrating Widgets and other stuff ( )
    161. 180. TDI Gurus - Curious Mitch ( ) & John Bilson (presenting at AUSLUG today)
    162. 181. Stuart McIntyre – Connections specialist in the UK ( ) and TWIL (
    163. 182. My blog ( </li></ul>