Your SlideShare is downloading. ×
Putting *Sparkle* in Your Social Applications! Customization and Branding with the New IBM Lotus Connections 2.5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Putting *Sparkle* in Your Social Applications! Customization and Branding with the New IBM Lotus Connections 2.5

26,853
views

Published on

Come and see how Lotus Connections 2.5 can be molded to fit your needs. Don't just take our word for it, but gain the experience of a Lotus Connections customer too! From exploring the data population …

Come and see how Lotus Connections 2.5 can be molded to fit your needs. Don't just take our word for it, but gain the experience of a Lotus Connections customer too! From exploring the data population customizations that allow you to modify and control the information populated on your user's profiles we will move onto practical demonstration of how you can theme Lotus Connections to match your own corporate or organizational brand. We'll also discuss how you can extend the capabilities of the product easily through adding iWidgets to Profiles, Communities and the Home Page of Lotus Connections.

Published in: Technology

2 Comments
7 Likes
Statistics
Notes
  • This is very nice PPT for connections 2.5,even According to me he covered entire IBM lotus connection for any user or developer .


    Cheers
    Avilesh Gujrathi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Demo. Really helps.
    Is there a way to impose custom validation rule(not simple 'required' )on the 'telephoneNumber' attribute of EditMyProfile.contactInformation .....for Connections 2.5?

    Thank you
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
26,853
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SHOW303 Putting Sparkle in Your Social Applications! Customizing and Branding with the New IBM Lotus Connections 2.5 Mitch Cohen | Manager Messaging & Collaboration - Colgate Adrian Spender | Senior Software Engineer - IBM
  • 2. About us
    • Mitch Cohen – Manager: Messaging & Collaboration @ Colgate-Palmolive
      • 12 years experience with Lotus Software
      • Managing global implementations of IBM Lotus Notes ® & Domino ®, Lotus Sametime ® , Lotus Quickr ® , and Lotus Connections ®
      • Working with Lotus Connections since pre 1.0
      • Blogger: http://www.curiousmitch.com
      • Twitter Addict: @curiousmitch
      • Brush my teeth with Colgate
  • 3. About us
    • Adrian Spender
      • Senior Software Engineer. 11 years in IBM. 2 ½ in Lotus
      • Development lead on Lotus Connections Home Page and News
      • Previously developed and consulted on IBM WebSphere ® Application Server
      • Blogger: http://adrianspender.com/blog
      • Slightly less of a Twitter addict than Mitch: @aspender
      • Brush my teeth with whatever is on a two for one deal (only joking – I use Colgate really!)
  • 4. Our story begins......
    • We are beginning the session with a fully installed and configured Lotus Connections 2.5 Environment
    • We already installed
      • DB2 ® 9.5 FP3
      • WebSphere Application Server Update Installer v 7.0.0.7
      • WebSphere Application Server 6.1.0.23
      • IBM HTTP Server 6.1.0.23
      • Domino 8.5.1 (for LDAP & SMTP)
    • In addition
      • Created the feature databases
      • Populated the Profiles Database
  • 5. Our story begins...
    • Installed Lotus Connections 2.5
    • Installed Lotus Connection Update Installer
    • Installed Lotus Connections fixes (as of 12/3/2009)
    • Mapped Lotus Connections Features to the IHS (http) server
  • 6.  
  • 7. Agenda (or what we are going to teach you today!)
    • Introduction to Lotus Connections
    • Post Install Steps
    • UI Customization
    • Profiles Customization
    • Customizing Communities
    • iWidgets
    • Questions (and maybe even answers)
    • Lets get started!
  • 8. Our demo environment
    • We are running Lotus Connections on a Microsoft ® Windows ® 2003 server
    • All documentation uses a set convention for identifying key directories
      • You can find them all in the info center:
        • http://tinyurl.com/25dirconv
    • Our install is documented here, as we will use these terms throughout this session
  • 9. Our demo environment
  • 10. Defining Service Administrators
    • There are four Administrative roles in Lotus Connections
      • admin – this is used to define the user who can administer this feature
      • search-admin – ID used to build search indexes for each feature
        • Set to the WAS administrator during install
      • widget-admin – ID used to access data for the widgets in Communities
        • Set to the WAS administrator during install
      • dsx-admin – ID used to access data from Profiles and Communities for directory service extensions
        • Set to the WAS administrator during install
  • 11. Features Admin Role Matrix 1 Admin role exists but is not used 2 Enables Server Metrics Link in footer
  • 12. Feature Admins
    • Right now we are going to focus on the “admin” role
      • You should not need to change the “search”, “widget” and “dsx” admin roles
    • For initial setup we are going to focus on Blogs and Homepage
      • Administrators of these features will see an additional Administration Tab in the Connections UI
  • 13. Homepage & Blog Admin
  • 14. Defining a Feature Administrator
    • Launch the Integrated Solutions Console (ISC)
      • Remember the ISC is
        • http://servername.domain:9060/ibm/console
      • In our example it is
        • http://connect.the80s.ws:9060/ibm/console
    • Once logged in click on
      • Applications
      • Enterprise Applications
  • 15. ISC – Applications – Enterprise Applications
  • 16. Select Security role to user/group mapping
  • 17. Check the admin role and Look Up Users
  • 18. Enter the search and add the user
  • 19. Click OK to accept the change
  • 20. Save your changes!
    • Remember to save your changes
    • Changes to Feature Admins are dynamic, no server restart is needed
  • 21. Granting admin role via script
    • Instead of using the UI which can be time consuming, you can use a jython script to grant the admin role
    • Create an appName sections per feature
    • lcadmin='Sitcom Administrator'
    • appName = 'Blogs'
    • AdminApp.edit(appName, '[ -MapRolesToUsers [ ["admin" no no "'+lcadmin+'" "" ] ] ]')
    • print "Setting Administrator for Blogs
    • AdminConfig.save()
    • Script adopted from Marco Ensing: http://www.lotusconnections.org/wordpress/index.php/2009/06/configure-rights-connections-parts-with-wsadmin/
  • 22. Running the script
    • From the profile_rootin directory
      • In our example this is c:IBMWebSphereAppServerprofilesAppSrv01in
      • Script has been saved to a file names SetAdmins.py
      • wsadmin.bat -lang jython -port 8880 -user wasadmin -password the80s -f SetAdmins.py
  • 23. Running the Script
  • 24. Creating a Blog Home Page
    • Blogs is the only feature that requires additional set up before it can be used
    • Log in to Blogs using the ID set as an admin in the previous step
      • http://servername.domain/blogs
      • In our example it is
        • http://connect.the80s.ws:9060/ibm/console
  • 25. Configuring Blogs
  • 26. Configuring Blogs
  • 27. Configuring Blogs
    • Only Administrators will see the homepage template
  • 28. Configuring Blogs
    • On the Administration Tab
  • 29. Configuring Blogs
    • While you are here you might want to configure other parts of Blogs
      • File Upload Settings
        • Allowed & Forbidden File types
        • Max file size
      • Active Content Filtering
      • Content Moderation
      • Autosave interval
      • Enable Custom Themes
  • 30. Configuring Blogs
    • When you are done Blogs home will look like this
  • 31. Hiding e-mail Addresses
    • If you choose you can configure Lotus Connections to hide e-mail addresses
      • This can be useful for a public instance of Lotus Connections
      • By default e-mail addresses are displayed you must explicitly disable them after install
  • 32. Hiding e-mail Addresses
    • NOTE:
      • Lotus Connections extensions (i.e. Notes, Sametime, Quickr and others will NOT work if e-mail address is hidden!
      • Sametime awareness can NOT be enabled if e-mail address is hidden!
  • 33. Hiding e-mail Addresses
    • To hide the e-mail addresses you need to run the ConfigEngine script in the ConfigEngine directory which is found in
      • lotus_connections_root
      • In our example it is
        • c:IBMLotusConnections
    • You also need
      • profileName – ours is AppSrv01
      • cellName – ours is connectNode01Cell
  • 34. Hiding e-mail Addresses
    • Run this from a command prompt while Connections is up and running
      • Careful it is all case sensitive
  • 35. Hiding e-mail Addresses
    • Check the results of the script in the log file you specified in the command
      • In our example e:/hidemail.log
  • 36. Hiding e-mail Addresses
    • The next step is to configure advanced search in Profiles to remove the search by e-mail address field
  • 37. Hiding e-mail Addresses
    • Check out profiles-config.xml
      • Edit the checked out version of the file and remove or comment out e-mail from advanced search
      • Here is an example of it commented out
  • 38. Hiding e-mail Addresses
    • Save your changes and check in profiles-config.xml
    • I am going to remind you again!
  • 39. Hiding e-mail Addresses
    • The final step is to configure a sender address for e-mail notifications
    • Since e-mail addresses are now hidden all e-mail notifications sent by Lotus Connections will come from a generic address and BCC all recipients
  • 40. Hiding e-mail Addresses
    • Check out notification-config.xml
      • Edit the checked out version of the file and specify a global sender e-mail address
    • Save your changes and check in notification-config.xml
      • The old mail administrator in me reminds you to make the e-mail address a valid one to avoid dead mail (perhaps a mail-in database)
  • 41. Profile with e-mail address hidden
  • 42. Profile showing e-mail address
  • 43. Hiding e-mail Addresses
    • One final important note
      • Hiding e-mail addresses via the ConfigEngine script is more extensive then simply removing e-mail address from the Profile layout
      • The script removes e-mail addresses from URL, and prevents e-mail being sent from the users e-mail address
      • If your requirement is to hide e-mail address this is the only complete way to do it
  • 44. Enabling the Language Selector
    • Lotus Connections by default loads in the browsers default language
    • Optionally you can enable a language selector in to the Lotus Connections header
    • The default drop down has four languages we will add a few more
  • 45. Enabling the Language Selector
    • Check out LotusConnections-config.xml
      • Edit the checked out version of the file and enable the language selector and options
      • Set enabled to true
      • Optionally set a default language using the 2 letter iso code
        • This will override the browser default
  • 46. Enabling the Language Selector
    • Adding additional languages
      • The Lotus Connections Infocenter contains a list of 24 additional language formats that can be added to the selector
      • Here are some examples
  • 47. Enabling the Language Selector
    • In our example we are going to add Hebrew (iw) and Italian (it) to the selector bar
  • 48. Enabling the Language Selector
    • Cookies
      • By default the language preference is stored for the session only
      • To make the change permanent change
      • usePermanentCookie="false" to usePermanentCookie="true”
      • The default cookie name is lcLang you can customize it by setting the cookieDomain and cookieName variables
  • 49. Enabling the Language Selector
    • Our language selector now looks like this
      • Since we removed the default language it is now labeled “Custom Language”
  • 50. UI Theming and customization
  • 51. We will turn this:
  • 52. Into this:
  • 53. The basics
    • Find your friendly UI designer, or start getting familiar with CSS and possibly graphics design!
    • Get some tools of the trade
      • Firebug extension for Firefox is highly recommended. Even if your company uses IE, you will find it quicker and easier to develop and test a theme using Firefox
      • A text editor which syntax highlights CSS will help
  • 54. Changing the logo
    • The default Lotus Connections logo appears in the top left of every page:
    • You can modify this to use your own company/brand logo
  • 55. Changing the logo
    • The default logo is 104 x 18 pixels
    • You can make yours a different size, but it may affect the overall size of the navigation bar
    • Use a JPG, GIF or 8-bit PNG file.
    • We will use this Lotus knows image:
      • This image is 102 x 22
  • 56. Upload icon to the web server
    • All theme customizations are deployed to a web server.
    • Create a directory to store your theme files in the web server document root
      • We will call it lotusKnowsTheme
    • Create an images subdirectory
    • Upload the logo file to the images directory
  • 57. Check you can access the logo
    • Open it in a web browser:
      • http://connect.the80s.ws/lotusKnowsTheme/images/lotusKnowsIcon.jpg
  • 58. Check the logo in the Connections UI
    • Before we commit to use the logo, let's use Firebug to see how it looks!
    • Open the Connections Home Page in Firefox and then open Firebug
  • 59. Check the logo in the Connections UI
    • Click the Firebug Inspect icon
    • Click the Lotus Connections Icon which will be bounded with a blue rectange when you hover over it
    • The Firebug window will now highlight the HTML for the icon
  • 60. Check the logo in the Connections UI
    • Click the Firebug Edit button:
    • The highlighted line is now editable. Replace it with this:
      • <img src=”/lotusKnowsTheme/images/lotusKnowsIcon.jpg”/>
    • See that the page will be dynamically updated with the new logo:
  • 61. Change the icon permanantly
    • The new icon looks fine (size-wise) so let's make the change in the whole UI
    • Firstly, let's look again at the HTML that defines the logo:
    • Note that it isn't an img tag!
    • To update the logo we need to:
      • Create own own header file
      • Override the default CSS file
    • These steps will also be the basis for the rest of our theming
  • 62. Create our own header file
    • Locate the header.html in a deployed Connections feature e.g. Home Page
      • <WAS>/profiles/<profile>/installedApps/<cell>/Homepage.ear/dboard.war/nav/templates/header.html
  • 63. Create our own header file
    • Copy the file to our lotusKnowsTheme directory on the web server:
    • Open the file in a text editor
  • 64. Change the alt text for the logo
    • In header.html we find the HTML code for the logo:
    • Firstly, update the alt text for the logo. We will call it Lotus Knows
    • Save the file
  • 65. Create our own theme CSS file
    • Find defaultTheme.css in one of the Connections applications e.g. Home Page:
      • <WAS>/profiles/<profile>/installedApps/<cell>/Homepage.ear/dboard.war/nav/templates/header.html
  • 66. Create our own theme CSS file
    • Create a styles directory in our lotusKnowsTheme directory on the web server and copy the defaultTheme.css there as lotusKnowsTheme.css:
    • Open the file in a text editor
  • 67. Update the logo image
    • Search for lotusLogo : Modify the background-image:url property from:
      • background-image:url(../images/logo.png)
    • To:
      • background-image:url(/lotusKnowsTheme/images/lotusKnowsIcon.jpg)
    • Also modify the height and width values:
  • 68. Update the logo image
    • Remove all other lines from the lotusKnowsTheme.css file
      • So that only the lotusLogo line remains
    • Save the file
  • 69. Update header.html to reference the CSS
    • We now add a reference to the lotusKnowsTheme.css to header.html
    • Locate the header.html we copied to the web server:
    • Open it in a text editor
  • 70. Update header.html to reference the CSS
    • Locate the <div class=&quot;lotusInner&quot;> line and add this after it:
      • <link rel=&quot;stylesheet&quot; href=&quot;/lotusKnowsTheme/styles/lotusKnowsTheme.css&quot; type=”text/css”>
    • Save the file
  • 71. Override the default product header
    • Finally, we must configure the product to use our custom header
    • Connect to WAS using the wsadmin command
    • Access the Lotus Connections configuration commands
    • Check out the configuration
    • Update the style.header.url property with the location of our custom header.html
      • LCConfigService.updateConfig(&quot;style.header.url&quot;, &quot;http://connect.the80s.ws/lotusKnowsTheme/header.html&quot;)
    • Set the value of the style.enabled property to true
      • LCConfigService.updateConfig(&quot;style.enabled&quot;, &quot;true&quot;)
    • Check in the configuration
    • The session is shown on the next slide...
  • 72.  
  • 73. Stop the Connections applications
    • In the WebSphere admin console click to Applications -> Enterprise Applications
    • Tick the check box for All of the Connections applications (we will just do Home Page for now...)
    • Click the Stop button.
    • The applications should stop
  • 74. Start the Connections applications
    • In the WebSphere admin console click to Applications -> Enterprise Applications
    • Tick the check box for All of the Connections applications (we will just do Home Page for now...)
    • Click the Start button.
    • The applications should start
  • 75. View the results
    • Load the Home Page
    • Our new logo is in place. However it doesn't really match the rest of the page, so let's fix that!
    Alt text
  • 76. Changing the theme
    • We will now utilize everything we've done so far to also modify the rest of the theme
    • To do this requires some level of CSS / web design knowledge
    • We will show you a cookbook for basic theming
      • Change the background color
      • Change the navigation bar colors
      • Change the “home bar” image
    • The same technique is used for more complex theming
      • But you might want to make friends with your web designer :-)
  • 77. Example of what is ultimately possible
  • 78. A quick note about colors
    • CSS uses hex values to represent colors
    • The color of a page element depends on the style that is applied to that element and the color that element defines
    • Because of how CSS works ( Cascading style sheets) it can be difficult to work out exactly what style is applying a colour to an element
    • The good news is that there are tools that can help. We will use a Firefox plugin called Colorzilla:
      • https://addons.mozilla.org/en-US/firefox/addon/271
  • 79. Let's work out what colors to change
    • We will concentrate on the background and header, which are common across all the features:
    • Once Colorzilla is installed, click the colorpicker icon in the bottom left of the browser window:
    • Then hover over the background of the page (the lightest blue) the status bar will give us details, including the hex value:
  • 80. Let's work out what colors to change
    • Do the same for these other highlighted areas of the page:
    • You can also right-click the eyedropper and choose Webpage DOM color analyzer, which will show all the colors used on the page:
  • 81. These are the colors we want to change:
  • 82. Now we need to decide what to change to
    • Our theme is Lotus knows
    • Yours may be defined by your company or organizational brand
      • Likely, your friendly web designer can help you here
    • To help you choose, refer to a palette. You can use Colorzilla
    • Right-click on the eyedropper and select Palette Browser
    • You can pick a color and see the hex value shown
  • 83. These are the colors we want to change to:
  • 84. Copy the styles we want
    • Locate the defaultTheme.css in a deployed Connections feature e.g. Home Page
      • <WAS>/profiles/<profile>/installedApps/<cell>/Homepage.ear/dboard.war/nav/common/styles/defaultTheme/defaultTheme.css
  • 85. Copy the body style
    • Open defaultTheme.css in a text editor and search for body.lotusui
    • Copy that line to the clipboard:
    • Open our lotusKnowsTheme.css from the web sever in a text editor
    • Paste the copied line at the top of the file
  • 86. Modify the body style
    • We now want to change the style colour:
    • Locate the text #cee1fc
    • And change it to #000000
    • Save the file
  • 87. Check the change
    • Load the Home Page:
    • Now let's fix the rest of the styles
  • 88. Copy the banner styles
    • Open defaultTheme.css in a text editor and search for .lotusBanner
    • Copy the block of lines that start with that text to the clipboard:
  • 89. Paste the banner styles
    • Paste in the clipboard contents at the top of the file:
    • Modify the hex values on the left to the values on the right:
  • 90. Paste the banner styles
    • lotusTheme.css should now look like this:
    • Save the file
  • 91. Check the change
    • Load the Home Page:
    • Almost there!
  • 92. Copy the Title Bar styles
    • Open defaultTheme.css in a text editor and search for .lotusTitleBar
    • Copy the block of lines that start with that text to the clipboard:
  • 93. Paste the Title Bar styles
    • Paste in the clipboard contents to lotusKnowsTheme.css :
    • Modify the hex values on the left to the values on the right:
  • 94. Paste the Title Bar styles
    • lotusTheme.css should now look like this:
    • Save the file
  • 95. Check the change
    • Load the Home Page:
    • The background of the title bar is all that remains
  • 96. Change the Title Bar image
    • The background of the title bar is an image, or three images to be exact:
      • titlebarLeft.png, titlebarMid.jpg, titlebarRight.jpg
    • We will replace them with a single, gradiated image lotusKnowsTitleBar.png :
    • Put this image into a themeImages directory in our lotusKnowsTheme directory
  • 97. Change the Title Bar image
    • Edit lotusKnowsTheme.css in a text editor
    • Replace titlebarLeft.png, titlebarMid.png, titlebarRight.png :
    • With lotusKnowsTitleBar.png:
  • 98. Make the Title Bar image repeat
    • On each of the lines add the following text after the file name:
      • !important;background-repeat:repeat-x!important;
    • i.e. From:
    • To:
    • Save the file
  • 99. Check the change
    • Load the Home Page:
    • We are done!
      • There's lot's more that we could do, given time
  • 100. Customizing Profiles
    • Profiles can be customized in the following ways
      • Adding/Removing Profile Fields
      • Creating Custom Profile Fields
      • Controlling Editing and Display of fields
        • Preventing or allowing editing
        • Hide field if empty
        • Hide or Display the field label
    • Lotus Connections supports multiple Profile Types
      • These are useful for displaying different information for different classes of employees
  • 101. Customizing Profiles
    • Configuration parameters are all Case Sensitive
    • Never edit the original config files, check them out and edit the checked out file
      • Really one wrong character in an xml file can make for a bad day
    • Use a proper editor, if you need one I recommend Notepad++ it is free and easy to use
  • 102. Customizing Profiles
    • The field definitions for a profile are configured in the profiles-config.xml file
    • The profile layout is configured in widgets-config.xml
    • You can edit the default layout and/or create your own
    • Note: If you do not specify a Profile Type for a user, they will use the default profile type
  • 103. Customizing Profiles
    • Notice that the in the Contact Information section only three fields are displayed
    • By Default profiles is only displaying fields populated with data
    • When we edit the profile we see many additional fields
    • The next slide shows the default Edit My Profile View
  • 104. Customizing Profiles
  • 105. Customizing Profiles
    • In order to encourage people to populate their phone number we want to display the empty field
    • Check out the profiles-config.xml, and edit the checked out file in the temp directory
    • Find the telephoneNumber field in the Contact Information section which looks like this
    • Change hideIfEmpty=&quot;true&quot; to hideIfEmpty=&quot;false&quot;
    • We could check in and save our changes but lets make a few more changes first.
  • 106. Does anyone in the room have a pager?
  • 107. Customizing Profiles
    • No one uses pagers anymore! Lets remove the pager field. We could simply delete it from the profiles-config.xml, or we can simply comment it out – lets comment it out for now (in case pagers make a comeback)
    • Original
    • Pager commented out
    • We could check in and save our changes but lets make a one more change first!
  • 108. Customizing Profiles
    • How many of you get to pick your own title? OK then lets prevent editing of the Title (jobResp Field)
    • The original line looks like this
    • To prevent editing of a field we are going to change it from an “editableAttribute” to an “attribute”
    • Our revised field definition looks like this
    • Lets save and check in our changes, restart Profiles and see what it looks like now
  • 109. Customizing Profiles
    • In the Contact Information Sections the phone number is now displayed even though it is empty
  • 110. Customizing Profiles
    • The Pager Number field no longer is displayed on the edit form
    • The Job Title Field is no longer editable
    • Note: When you remove a field any data it contained still resides in the database, this simply prevents it from being displayed
  • 111.  
  • 112. Customizing Profiles
    • Adding Custom Fields
    • If the defined fields do not suit your needs, you can add your own custom fields in to Profiles
    • Adding a field is a three step process
      • Defining the fields
      • Adding the fields to the layout
      • Providing Descriptive labels for the fields (and optionally providing translations)
    • Custom fields are stored in the PROFILES_EXTENSIONS table of the EMPLOYEE Database
      • No changes to the database schema are required
  • 113. Customizing Profiles
    • Keeping with the Sitcom theme of our domain we are going to add a field for the actors real name
    • Check out the profiles-config.xml, and edit the checked out file in the temp directory
    • The first step is to define the custom field, we do this in the <profileExtensionAttributes> section
  • 114. Customizing Profiles
    • Lets add one field that we will use for the Actors real name
    • Keep your extension ID simple, you will need it again later, and it is case sensitive
    • The extension ID will be used when storing the attribute in the database so use something that makes sense if you have to troubleshoot
  • 115. Customizing Profiles
    • In the previous step we defined the field, now we are going to add it in to the Profiles Display
    • In the Contacts Section of the profiles-config.xml we are going to add the field to be displayed and allow them to be edited
    • This is a list of field properties we can specify
  • 116. Customizing Profiles
    • The last line added in the <contactInformation> section defines the display of our new field
    • The extensionIDRef is what we defined in the previous step
    • In this example
      • We are not hiding if empty
      • We allowed editing
  • 117. Customizing Profiles
    • If we restart the server now, we see this
  • 118. Customizing Profiles
    • To make this a little more user friendly we need to define a resource bundle, and attach it to the Profiles Configuration to place friendly labels on these fields
    • The following steps can be used to add labels to a custom field or to change the default labels on the existing fields
  • 119. Customizing Profiles
    • To add a custom field label complete the following steps
    • Create the resource files and zip them
    • Copy the file in to the 'ext-i18n-resources' directory under the 'LotusConnections-config' directory
      • If the directory does not exist create it
    • Link the resource bundle file in the LotusConnections-config.xml
    • Add the resource bundle to the entires in the profiles-config.xml
  • 120. Customizing Profiles
    • Creating the resource files
    • The file can be named anything it simply requires an extension of .properties
    • We are going to use resource.properties in our example
      • To create language specific files add and underscore and the 2 letter language code to the file name
    • In our example we are going to create
      • resource.properties
      • resource_en.properties
      • resource_it.properties
      • resource_fr.properties
    • Any language that does not have a resource file of it's own defaults to the values in resource.properties
  • 121. Customizing Profiles
    • Our resource.properties files contains this (resource_en.properties is identical to resource.properties)
  • 122. Customizing Profiles
    • Creating the bundle
    • We are going to make the resource “com.sitcom.profiles”
    • To do this we are going to place the files in a subdirectory of comsitcomprofiles
  • 123. Customizing Profiles
    • When we zip the file we are going to zip from the com directory down
    • Make sure you preserve the directory structure in your zip file
    • Copy the zip file to
      • <was_profile_root>/config/cells/<cell_name>/LotusConnections-config/ext-i18n-resources
      • In Our Example
      • c:IBMWebSphereAppServerprofilesAppSrv01configcellsconnectNode01CellLotusConnections-configext-i18n-resources
      • NOTE: You might need to create the ext-i18n-resources directory manually
  • 124. Customizing Profiles
    • To Link the resource bundle to Lotus Connections check out and edit the LotusConnecitons-config.xml
    • Find the Resources Section which is empty by default
    • Add the following
    • We need to add the bundleIdRef and the labelKey
  • 125. Customizing Profiles
    • The last step is to link the resource bundle to fields in the profiles-config.xml
    • Check out and edit the profiles-config.xml
    • We previously added the Actor Name field in to the Contact Information section using this line
    • We are going to add two additional attributes to this line
  • 126. Customizing Profiles
    • The bundleIdRef must match what we specified as the bundle bid in the LotusConnections-config.xml
    • The labelKey is the string we specified in the resource.properties file
  • 127. Customizing Profiles
    • Our new line will look like this
    • Save and Check in the file and restart Lotus Connections
  • 128. Customizing Profiles
    • The Contact Information section now looks like this
    • When editing the profile the field is available as well
  • 129. Customizing Profiles
    • Adding Custom Profile types
    • To this point we have been working with the default Profile Type, we are going to create a second profile type
    • Creating a Profile Type is a two step process
      • Defining the Profile Layout in profiles-config.xml
      • Defining the Widget Layout in widgets-config.xml
        • Defining widgets is optional
    • A person will use the default profile unless the PROF_TYPE field is populated with a different profile name
      • Populating the database is out of scope of this session, but you can use TDI to set a PROF_TYPE based on defined criteria
  • 130. Customizing Profiles
    • We are going to create a Profile Type for an employee who leaves the organization
      • An employee who has left the organization would no longer have
        • Reporting Structure
        • Phone Number
        • Location (Building, Floor, Office)
        • Assistant
    • We will create a profile type which hides these elements
  • 131. Customizing Profiles
    • Check out and edit the profiles-config.xml
    • Locate the Profile Layout section it begins with <profileLayout profileType=&quot;default&quot;> and ends with </profileLayout>
  • 132. Customizing Profiles
    • Copy the entire section and make a second copy of it in the profiles-config.xml
    • Change the profileType name
      • The name needs to be unique
      • This is the value that will be populated in the PROF_TYPE field of an employee record to activate this type for them
      • This is the value we will use to define a Widget Configuration for this type
      • Keep it simple, it is case sensitive
    • Our profile type will be named “inactive”
    • Edit the remainder of the section adding and removing fields as needed
  • 133. Customizing Profiles
    • Our inactive profile type looks like this
    • Save and check in the profiles-config.xml
  • 134. Customizing Profiles
    • Check out and edit the widget-config.xml
    • Locate the layout for the default profile
    • Make a copy of this in the widgets-config.xml
  • 135. Customizing Profiles
    • In the copied section change the resourceSubType from default to inactive (the name we selected for our profile type)
    • The only sections we want to remove is the reporting structure, so we are going to remove this line from the inactive widget definition
  • 136. Customizing Profiles
    • Our completed widget definition looks like this
    • Save and Check in the widgets-config.xml
    • Restart Lotus Connections
  • 137. Customizing Profiles
  • 138. Customizing Profiles
    • No data has actually been removed from the database
    • Profile Type is determined when the profile is loaded based on the PROF_TYPE field at the time the page is rendered
    • Changes to the layout itself require a restart of Lotus Connections
    • Changes to an employees PROF_TYPE are dynamic and do not require a restart
  • 139. Communities Customization
    • Administrators can customize
      • Available themes
      • Available widgets
      • Default widgets
    • Community owners can customize
      • The theme their community uses
      • The widgets (and therefore) functionality their community provides
    • We are going to focus on theme customization
  • 140. We have already done this:
  • 141. When we go to Communities we see this:
  • 142. But when we go into a Community...
  • 143. Communities can be themed
    • With a default set of out of the box themes:
  • 144. About Community Themes
    • Five themes are shipped with the product
    • They are self-contained and do not pick up any customizations you have already made
      • Did anybody spot the exception?
    • If you have modified the “global” theme for Connections you likely want to modify or provide new Community themes
      • The process is basically the same
    • Or alternatively you can disable Community themes altogether
  • 145. Disable community themeing
    • Check out communities-config.xml
    • Edit the file in a text editor
    • Delete or comment out the <comm:theme> elements
      • Comment out by putting <!-- at the start and --> at the end
    • Save the file and check in
  • 146. Disable Community themeing
    • Restart the Communities application
    • Check the change in the UI.
      • Create a new Community, notice no ability to choose theme:
  • 147. Create two community themes
    • Community themeing is only worthwhile enabling if you have more than one theme!
    • We have two Community themes we have prepared in advance
      • Copy the Communities.ear/comm.web.war/nav/common/styles/defaultTheme directory to our web server
      • Rename the copied directory to a name representing our theme
      • Rename the defaultTheme.css to a name representing our theme
      • Change the styles
      • Create a graphic to display to represent the theme
    • We have lotusKnowsCommunity1Theme and lotusKnowsCommunity2Theme
  • 148. Add themes
    • Check out communities-config.xml
    • Edit the file in a text editor
    • Create new <comm:theme> elements for the two new themes
      • Copy an existing one and modify the values
      • Ensure that URLs are absolute, not relative (e.g. http://connect.the80s.ws/lotusKnowsCommunity1Theme/lotusKnowsCommunity1Theme.css )
      • Set isScriptKey to true as we will specify the labels to use externally
      • The first theme in the list is the default one
  • 149. Add String labels for new themes
    • Save communities-config.xml and check in
    • Find Communities.ear/comm.web.war/WEB-INF/lib/comm.web.jar
    • Copy to a temporary directory
    • Open using a Zip file tool (e.g. 7-Zip)
  • 150. Add String labels for new themes
    • Navigate within the Zip file to:
      • com/ibm/tango/web/ui/resources
  • 151. Add String labels for new themes
    • We will add strings to resources.properties. Open the file in a text editor
    • Find label.theme.name to display the section that contains the labels for community themes:
  • 152. Add String labels for new themes
    • Add our two strings to represent our two themes:
    • Save the file. 7-Zip will prompt you to update in the archive. Choose OK
  • 153. Update the Communities application
    • We need to update the application with the modified strings
    • Open the WebSphre Admin console. Go to Applications -> Enterprise Applications
    • Select the checkbox for the Communities application
    • Click the Update button
    • Select the Replace or add a single file radio button:
  • 154. Update the Communities application
    • Specify the path to the file to update
      • comm.web.war/WEB-INF/lib/comm.web.jar
    • Browse to the copy we made and then modified
  • 155. Update the Communities application
    • Click Next, then OK :
    • Save the changes when prompted:
  • 156. Check out the changes!
    • Create a new Community and choose the theme:
  • 157. Lotus Knows 1 Theme
    • Same as our “default” Connections theme
  • 158. Lotus Knows 2 Theme
    • Brand new!
  • 159. The wonderful world of widgets...
  • 160. Adding a Google™ Calendar to Communities
    • We will:
      • Create a new iWidget to contain a Google Calendar
      • As an Administrator add this widget to the widgets available for Communities
      • As a Community Owner add a calendar to our community
    • All with no coding!
      • Which is how Mitch likes to develop :)
  • 161. Create or locate a public calendar
    • We have a Lotusphere 2010 one:
  • 162. Create an lsCalendar.html file in the web server
    • The html file will contain our embedded calendar
  • 163. Edit lsCalendar.html
    • Open the file in a text editor
    • Provide the skeleton of an HTML page:
  • 164. Get the embedded calendar code
    • In Google Calendar, open the settings for the calendar and locate the Embed this calendar section
    • Click the Customize the color, size and other options link
      • We changed the:
        • Height to 400 pixels
        • The time zone to EST
  • 165. Copy the embed code
    • On the customization page, find the embed code:
    • We need to make one more change that the Google options doesn't provide.
      • Change the width attribute from “800” to “100%”
    • Copy the contents of the box to your clipboard
  • 166. Update lsCalendar.html
    • Back in your text editor, paste the copied code between the <body> and </body> elements:
    • Save the file
  • 167. Try the calendar
    • In a browser, load the lsCalendar.html file
      • http://connect.the80s.ws/lsCalendar.html
  • 168. Wrap the calendar in an iWidget
    • In the web server directory, create a file called lsCalendar.xml
    • Copy some boilerplate content into the file, which we will then modify:
    • <iw:iwidget name=&quot; <widgetID> &quot; xmlns:iw=&quot;http://www.ibm.com/xmlns/prod/iWidget&quot; iScope=&quot; <scope> &quot; supportedModes=&quot;view&quot;>
    • <iw:content mode=&quot;view&quot;>
    • <![CDATA[
    • <iframe src=&quot; <html file> &quot; scrolling=&quot;auto&quot; width=&quot;100%&quot; height=&quot; <height> &quot; frameborder=&quot;0&quot;></iframe>
    • ]]>
    • </iw:content>
    • </iw:iwidget>
  • 169. Wrap the calendar in an iWidget
    • Set the placeholders to the following values
  • 170. Wrap the calendar in an iWidget
    • The lsCalendar.xml file should now look like this:
    • Save the file
  • 171. Add the widget to Communities
    • Check out widgets-config.xml
      • Edit the checked out copy of the file
      • Add a widgetDef element defining our calendar widget to the resource element named community
    • Check in widgets-config.xml
  • 172. Stop the Communities application
    • In the WebSphere admin console click to Applications -> Enterprise Applications
    • Tick the check box for the Communities application
    • Click the Stop button.
    • The application should stop
  • 173. Start the Communities application
    • In the WebSphere admin console click to Applications -> Enterprise Applications
    • Tick the check box for the Communities application
    • Click the Start button.
    • The application should start
  • 174. Add the widget to a community
    • Log into Connections Communities
    • Open a community for which you are a Community Owner
  • 175. Add the widget to a community
    • Click the Customize button to open the widget palette
  • 176. Add the widget to a community
    • Click the LS2010 Calendar widget to add it to the community:
    • Close the widget palette:
  • 177. Position the new widget
    • The widget opens at the bottom of the page. You can re-position it using drag and drop, or by using the action menu
  • 178. We are done!
  • 179. Creating and adding a Google Gadget to Home Page
    • We will:
      • Wrap a Google Gadget as an iWidget
      • As an Administrator add this widget to the widgets available for Home Page
        • On the Updates tab
      • As an End user add this widget to our home page
    • Still with no coding!
  • 180. Obtain the Google Gadget Wrapper
    • Available from a DeveloperWorks article by Vincent Burckhardt
    • http://www.ibm.com/developerworks/lotus/library/connections-widgets/index.html
  • 181. Open the archive in a suitable zip program
    • For Windows, I recommend 7-ZIP
  • 182. Open the gadgetWrapper.xml file for editing
    • This is the iWidget descriptor file
    • We will come back to this in a minute
  • 183. Find a gadget to use
    • Go to the Google Gadget catalog:
      • http://www.google.com/ig/directory?synd=open
  • 184. Find a gadget to use
    • We will use a Facebook gadget
    • Click on the Add to your webpage button
  • 185. Customize the Gadget
    • We will simply set a title
    • And change the width and height values to match the Home Page Updates page
    • Click Preview changes to see what the gadget will look like
  • 186. Customize the Gadget
    • Happy with this:
  • 187. Get the Gadget embed code
    • Click the Get the code button
    • A text box will display a <script> tag:
    • The full value for our Facebook gadget is:
    • <script src=&quot;http://www.gmodules.com/ig/ifr?url=http://www.brianngo.net/ig/facebook.xml&amp;synd=open&amp;w=170&amp;h=350&amp;title=Facebook&amp;lang=en&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js&quot;></script>
  • 188. Get the Gadget URL
    • We want the part specified after '?url=' and before '”></script>' <script src=&quot;http://www.gmodules.com/ig/ifr?url= http://www.brianngo.net/ig/facebook.xml&amp;synd=open&amp;w=170&amp;h=350&amp;title=Facebook&amp;lang=en&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js &quot;></script>
    • Select and copy just that part to your clipboard
  • 189. Now go back to the widget definition
    • Go back to the open editor
  • 190. Remove the default Gadget URL
    • Find the iw:item element with the id of gadgetUrl
    • Remove the existing value:
  • 191. Add the URL for our Facebook gadget
    • Paste in the gadget URL
    • Make sure it is on a single line
    • Save the file. 7-Zip will prompt you to update in the archive. Choose OK
    • If using another archive tool, make sure the gadgetWrapper.xml file is updated in the googleWrapperSkeleton.war file
  • 192. Open the WebSphere admin console
    • Start WebSphere if not started
    • Open the WebSphere admin console:
      • http://connect.the80s.ws:9060/ibm/console
  • 193. Install googleWrapperSkeleton.war
    • Select Applications -> Install New Application
    • Browse the local file system and select googleWrapperSkeleton.war
  • 194. Install googleWrapperSkeleton.war
    • Enter /fbGadget into the Context Root field
    • Leave other settings as default and then click Next
  • 195. Install googleWrapperSkeleton.war
    • On the wizard Step 1: Select installation options panel
    • Select the Application Name field which will have a value of googleWrapperSkeleton_war
    • Change the value to Facebook Gadget
    • Click Next
  • 196. Install googleWrapperSkeleton.war
    • On the wizard Step 2: Map modules to servers panel
    • Tick the check box for the gadgetWrapper module, select both items in the Clusters and Servers list and click Apply
  • 197. Install googleWrapperSkeleton.war
    • Click Next
    • Click the Finish button
    • The application will be installed and progress shown. When installed, click Save to save the configuration changes
  • 198. Map the application to the web server
    • In the WebSphere admin console click Servers -> Web Servers
    • Tick the check box for webserver1 and then click Generate Plug-in
    • Tick the check box for webserver1 and then click Propagate Plug-in
  • 199. Restart the web server
    • Open the Windows Services control panel and Restart the IBM HTTP Server 6.1 service
  • 200. Start the application
    • In the WebSphere admin console click to Applications -> Enterprise Applications
    • Tick the check box for the Facebook Gadget application
    • Click the Start button
    • The application should start
  • 201. Validate the application deployment
    • Open a web browser and load the widget descriptor:
      • http://connect.the80s.ws/ fbGadget /gadgetWrapper.xml
    • The widget deployment descriptor should display
  • 202. Add the widget to Home Page
    • Log into Home Page as the administrator
    • Click the Administration tab
    • The administration UI will display
  • 203. Register the widget
    • Click Add another widget
    • Enter the details as shown on the right
    • Leave other settings as default
    • Click Save
  • 204. Enable test mode
    • Once registered, the widget is disabled
    • Administrators can view disabled widgets on their Home Page by using Test Mode
    • Enabled Test Mode by clicking the checkbox
  • 205. Test the widget
    • Go back to your Updates tab
    • Click the Customize button to open the widget palette
    • The Facebook widget is in the palette. Click it to add to the page
  • 206. Test the widget
    • The widget is added to the right-hand column of the Updates tab
  • 207. Enable the widget
    • Once you are happy with the widget, you can make it available to all users. Click the Administration tab again
    • Select the Facebook widget in the Disabled widgets list
    • Click the Enable button
    • The widget will move over to the Enabled widgets list
    • It is now available immediately to all users
    • You may want to disable Test Mode by unchecking the box
  • 208. We are done!
  • 209. Resources, Links, and Contact information
  • 210. Try Lotus Connections
    • Lotus Greenhouse
      • https://greenhouse.lotus.com/
    • Bleedyellow
      • http://www.bleedyellow.com
    • My developerWorks
      • https://www.ibm.com/developerworks/mydeveloperworks
  • 211. Lotus Connections Resources
  • 212. Lotus Connections Resources
    • Luis Benitez
      • Socialize Me - http://www.lbenitez.com/
      • Twitter: lbenitez
    • Chris Whisonant
      • Lotus Nut - http://bleedyellow.com/blogs/lotusnut/
      • Twitter:cwhisonant
    • Handly Cameron
      • agile in atlanta - http://handly.blogspot.com/
      • Twitter:handly
    • IBM Lotus Connections product team
      • Synch.rono.us - http://synch.rono.us/
    • Mac Guidera
      • Mac Guidera - http://macguidera.blogspot.com/
      • Twitter:macguidera
  • 213. Lotus Connections Resources
    • Marco Ensing
      • Blog: http://www.lotusconnections.org/
    • Michael Urspringer
      • Blog: http://www.urspringer.de/
      • Twitter: m0urs
    • Stuart McIntyre
      • Connections Blog - http://theconnectionsblog.com/
      • Twitter:stuartmcintyre
  • 214. Some useful (free) tools
    • Notepad++ http://sourceforge.net/projects/notepad-plus
      • Free lightweight editor with support for XML, CSS, HTML, and many other formats
    • CurrPorts http://www.nirsoft.net/utils/cports.html
      • Free tool which graphically displays ports listening and connections. Very useful to determine if a specific port is listening
    • BareTail http://www.baremetalsoft.com/baretail/index.php
      • Windows tool to watch a file output in real time, with configurable context sensitive highlighting options. Useful for watching WAS logs in real time when troubleshooting
    • BareGrep http://baremetalsoft.com/baregrep/index.php
      • Grep in a GUI for windows. Not sure which config file that paramter is in, use this tool to find it.
  • 215. Contact Us
    • Mitch
      • My Blog: http://www.curiousmitch.com
      • Twitter: @curiousmitch
      • e-mail: mitch_cohen@colpal.com
      • Sametime on Bleedyellow
      • curiousmitch on most social networks
    • Adrian
      • My Blog: http://adrianspender.com/blog
      • Twitter: @aspender
      • e-mail: [email_address]
  • 216.  Tuesday 8:30 Getting the Most Out of Your Lotus Connections Communities Swan 3-4 (ID302) 10:00 “Making Quickr Scream”: Performance Strategies for... Swan 1-2 (BP113) 10:00 What's New with Lotus Connections Swan 5-6 (ID305) 10:00 Collaborative and Web Content Meet ECM Swan Mockingbird (ID306) 11:15 Customizing Lotus Connections Swan 5-6 (AD301) 3:00 IBM's Center for Social Software—Enterprise Health & Government Transparency Dolphin Northern A-C (INV102) 3:00 Deployment and Performance Considerations for Lotus Quickr Domino Services Swan Mockingbird (ID307) 4:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Northern A-C (AD304)  Wednesday 8:30 Collaboration Without Boundaries Dolphin Southern II (INV101) 8:30 How Lotus Connections Plug-ins Empower Your Applications Dolphin Southern III (AD302) 8:30 Lotus Quickr Services for J2EE Swan 3-4 (ID308) 10:00 The Intersection of Collaboration and Enterprise Content Management Swan 1-2 (INV105) 10:00 Customizing Lotus Quickr using Templates and APIs Swan 3-4 (AD305) 11:15 Looking for the Right Document Management Alternative Swan Mockingbird (BP304) 11:15 Connecting Developers and Community with Rational Jazz and Lotus Connections Swan 1-2 (AD303) 4:15 How Top Companies are Getting “Out of the Box” with Lotus Connections 2.5 Swan 5/6 (BP301) 4:30 Putting Sparkle in your Social Applications! Customization and Branding.... SW Osprey (SHOW303)  Sunday 8:00 Lotus Connections: From Pilot to Production Dolphin Southern III(JMP205) 10:30 Getting the Most Out of Lotus Collaboration and Social Software Dolphin Southern IV-V (WEB102) 4:00 We've Got Collaboration Under Control: Lotus Quickr in Action Dolphin Southern III (JMP203) 4:00 Ten Innovative Ways to Customize the Lotus Connections Environment Swan Mockingbird (JMP204)  Thursday 8:30 Lotus Quickr ECM Integration Dolphin Southern II (ID310) 10:00 Selling the Value of Web 2.0/Social Software within your Organization Toucan 1 (BP305) 11:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Southern I (AD304) 11:15 The Measurement of Social Software Swan 1-2 (ID304) Monday 1:00 12 Things Your Mother Never Told You About Installing Lotus Connections Dolphin Southern III (BP112) 1:00 Lotus Quickr Development Grows Up: Now This Changes Things Swan 1-2 (BP211) 2:15 Start Planning Your Migration from Lotus Domino Document Manager Swan 3-4 (BP110) 2:15 Lotus Quickr Domino 8.x Sneak Preview Swan 7-10 (ID309) 3:45 Social Collaboration Delivers Real Business Value Dolphin Northern A-E (KEY106) 5:00 Lotus Domino Quickr Domino 8.x Sneak Preview Dolphin Southern III (ID309) 5:00 Deployment and Performance Planning for Lotus Connections 2.5 Swan 3-4 (ID301)
  • 217. Lotus Knows you have questions!
  • 218. Legal Disclaimer
    • © IBM Corporation 2009. 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, Lotus Notes, Notes, Domino, WebSphere, Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.
    • Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.