Auslug 2011 customising ibm connections

Customising IBM Connections.
Adam Brown Director Technology & Business Development Connections Specialist ISW [email_address] Twitter: adambrownaus Blog: www.collaborationblueprint.com LinkedIn: http://au.linkedin.com/in/adambrownaus

profilephoto.jpg
Your Presenter:
Adam Brown
Executive Director of ISW – http://www.isw.com.au
Working with IBM/Lotus Tech since 1996
IBM Connections Specialist
2-3 years
IBM Connections 3.x Design Partner
Blog – http://www.collaborationblueprint.com
Contact me @:
[email_address]
Twitter: adambrownaus LinkedIn: http://au.linkedin.com/in/adambrownaus
....or even the phone 0419 117 613!

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

iStock_000011179603XSmall.jpg
What we are going to cover:
Overview of Customisations in 3.0.x
Look and Feel
Logo, Navigation, Footer, Themes, Login Pages
Customising Strings
Customising Profiles
Which fields display and order.
Editable or Read Only
Field Labels & Extension Fields
Customising Profiles Search
Advanced Search & Search Results
Integrating embed.ly into Connections. This is really cool!
What else can you do?
Interaction & Questions are good!

Reference & Resources
There is an awesome community of Connections experts out there. This presentation is made from our collective experience.
IBM Connections Documentation (just search for it)
Luis Benetiz – Lots of great ideas for integrating Widgets and other stuff ( http://www.lbenitez.com )
TDI Gurus - Curious Mitch ( www.curiousmitch.com ) & John Bilson (presenting at AUSLUG today)
Stuart McIntyre – Connections specialist in the UK ( http://www.ibmconnectionsblog.com ) and TWIL (http://thisweekinlotus.com)
My blog (http://www.collaborationblueprint.com)

But first a few questions for you....
How many have seen/used IBM Connections?
Admin?
Developer?
Edited HTML & JSP?
Edited CSS?
Tivoli Directory Integrator?

Overview of Customisations in 3.0.1
The good news is that as of Connections 3 things got easier. In 2.5 it was a bit of a pain.
Each feature had to be done separately.
Had to put changed files on the IHS server.
Lots of duplicated effort.
With 3.0 you can customise individual features or common features across the entire suite
Also no need to move themes onto the HTTP server to customise them
Don’t need to restart all the time as well.

Themes
Themes are made up of:
CSS
header.html
footer.html
Images
CSS affects the design but not the layout or functionality
Controls all of the colours and background images
Allows designers to change elements like link colours etc

Application Directories
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 - lc.profiles.app.war Search - search.war | Wikis - qkr.share.wiki.war

Customisation Folders
Connections 3.0.x has the ability to customise both common and application specific features
Basically you take a copy of the original and put it in the Customisation Folders
This means it is much easier to manage and maintain moving forward
You can modify common, specific, or both.

Customisation Directories

Basic Steps to customise
Enable Customisation
Log onto the WebSphere Application Service Console and select Environment>WebSphere Variables
CONNECTIONS_CUSTOMIZATION_DEBUG (must be set to true to enable customisations to take effect. Set back to false once customisations are completed)
Review but don’t change CONNECTIONS_CUSTOMIZATION_PATH (This is the location of the customisations directories. Default is <connectionsinstall>/data/shared/customization/common/)
Restart Connections server(s)
Find the file you want to change from the installed application
Copy the file into the customisation directory at the correct-sub-directory
Make your changes and restart the affected applications.

Look and Feel – Adding your logo
Create a new logo image for the site
Logo.png
Copy the image to the common customisation directory:
<LotusConnectionsDir>datasharedcustomizationcommonnavcommonstylesimageslogo.png
Verify that the image appears in your browser
Open http://connections.domain.com/files/nav/common/styles/images/logo.png
Create custom.css in the common customisation directory:
<LotusConnectionsDir>datasharedcustomizationcommonnavcommonstylesdefaultThemecustom.css
Specify your image size in custom.css. In our case:
.lotusui .lotusLogo, .lotusLoginLogo {
height: 30px;
width: 145px;
}
Restart Connections Application Servers
Clear Cache from browser and reload.

Look and Feel – Changing Colours
You can change pretty much all colours including links, fonts and font size
Remember tech people don’t tend to be good designers.
Get your branding/design people involved
Recommend you use Firebug or similar to select the CSS and edit first so you can preview your change
Basically you identify the CSS elements you want to change and put them in the custom.css we created earlier.
Note if you want you can theme each application differently in which case you put them in the application customisations directory instead of common.

Some tips
The standard interface has some nice gradients. These behave differently in different browsers (i.e. IE):
.lotusTitleBar {
background-color: #988F86;
background-image: -moz-linear-gradient(center top , #5B554F 0%, #988F86 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5B554F), to(#988F86));
}
Across the different applications sometimes the CSS elements are different so you need to check/determine them all.
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.
Reference: http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Defining_a_community_theme_ic301

Look and Feel - Menu
You can customise the Menu to include addition links
Locate the header file:
<WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesheader.jsp
Copy the header file to the common customisation directory
<LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesheader.jsp
Edit the header.jsp
Create the new “Links” menu drop-down by copying the “Apps” menu link and changing
the id of the li item,
the aria-owns attribute,
the aria-label attribute,
and the String (ie replace <fmt:message key="label.menu.apps.name" />) with your Menu item.
Specify the menu src JSP (Next Page)
Save Changes

Look and Feel – Menu (Cont)
Locate the header menu file:
<WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesmenupeople.jsp
Copy the people.jsp into the common directory with a new name:
<LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesmenulinks.jsp
Using the “People” menu as an example, create the new links.
Save & Restart
At the end of the day the menu is just JSP so you can do whatever you want.

Look and Feel – Footer
Locate the header menu file:
<WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplatesfooter.jsp
Copy the footer.jsp into the common directory:
<LotusConnectionsDir>datasharedcustomizationcommonnavtemplatesfooter.jsp
Edit the file to remove or add links in the footer
Save & Restart
Again it is just a JSP so you can get fancier if you want and add other capabilities to the footer area.

Look and Feel – Login Pages
You can customise the logon pages to be whatever you want
Locate the login JSP file:
<WASHome>profiles<Profile>installedApps<Cell>Homepage.earHomepage.warnavtemplateslogin.jsp
Copy the login.jsp into the common directory:
<LotusConnectionsDir>datasharedcustomizationcommonnavtemplateslogin.jsp
Edit the file to customise. Note must of the text uses String Resources (Described Next) so you can update the resources instead.
Save & Restart

Look and Feel – Customising Strings
Many of the text thru out Connections is based on String Resources
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.
For example: comibmlconncorestringstemplates.properties
Create a new file in the string customisation directory with the name:
<LotusConnectionsDir>datasharedcustomizationstringscom.ibm.lconn.core.strings.templates.properties
Note that the file name is the same as the original location however the “”’s become “.”’s
Open both the existing resource file and the new file in a text editor
Copy the entire line(s) you want to change from the old to the new file and change the text strings.
Some common properties files to change:
com.ibm.lconn.core.strings.templates.properties (and the associate alternate languages)
com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources.properties
com.ibm.lotus.mobile.web.package.properties (For Mobile Web App)

Application
JAR file relative to /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/was01Cell01
Template relative to /opt/IBM/LotusConnections/data/shared/customization/strings
Common
Homepage.ear/homepage.war/WEB-INF/lib/lc.util.web-3.0.jar
com.ibm.lconn.core.strings.templates.properties
Activities
Activities.earoawebui.warWEB-INFliboawebui.jar
com.ibm.openactivities.web.coreui.resources.resources.properties
Blogs
Blogs.earblogs.warWEB-INFclassescomibmlconnblogsstrings
com.ibm.lconn.blogs.strings.ui
Bookmarklet
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
com.ibm.lconn.bookmarklet.strings.ui com.ibm.lconn.bookmarklet.resources.jspresources
Bookmarks
Dogear.eardogear.webui.warWEB-INFlibdogear.svc.jar
com.ibm.lconn.dogear.strings.uilabels com.ibm.lconn.dogear.strings.ui
Communities
Communities.ear/comm.web.war/WEB-INF/lib/comm.web.jar
com.ibm.lconn.communities.strings.ui com.ibm.lconn.communities.strings.uiemail
Files
Files.ear/lconn.files.ui.jar
com.ibm.lconn.files.strings.ui com.ibm.lconn.files.strings.uitemplates com.ibm.lconn.files.strings.uihelp com.ibm.lconn.files.strings.cmis
Forums
Forums.ear/forum.web.war/WEB-INF/lib/forum.web.jar
com.ibm.forum.web.resources.resources_xx
Homepage
homepage.war/WEB-INF/lib/homepage.utils.jar
com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources com.ibm.lconn.homepage.resources.nls.ui.ui_resources com.ibm.lconn.homepage.resources.nls.catalog.service.ui
News
News.ear/news.web.war/WEB-INF/lib/news.common.jar
com.ibm.lconn.news.nls.jsp_resources com.ibm.lconn.news.nls.ui_resources com.ibm.lconn.news.nls.templatePlaceholders
Profiles
lc.profiles.app.war/WEB-INF/lib/lc.profiles.web.app-3.0.jar
com.ibm.lconn.profiles.strings.ui_xx com.ibm.lconn.profiles.strings.uilabels_xx
Search
Search.ear/search.common.jar
com.ibm.lconn.search.strings.ui
Wikis
Wikis.ear/lconn.wikis.ui.jar
com.ibm.lconn.wikis.strings.ui com.ibm.lconn.wikis.strings.uihelp com.ibm.lconn.wikis.strings.uitemplates
Reference: http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_product_strings_ic301

Look and Feel – Welcome Page
You can hunt thru and customise the string resources (do this if you want multiple languages supported)
Or you can create a new HTML File in the common customisation directory
<LotusConnectionsDir>datasharedcustomizationcommonnavgettingstartednewwelcome.html
Put whatever you want to display in the HTML
Now check out the gettingstarted-config.xml
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Getting_Started_tab_lc3
Change the first <step> to point both the Securelink and the Unsecurelink to your HTML page.
secure="${lcurl:homepage.secure}/nav/gettingstarted/gettingStartedNew.html"
unsecure="${lcurl:homepage.unsecure}/nav/gettingstarted/gettingStartedNew.html" />
Restart Homepage application

Customising Profiles – Overview
Ok so that is a lot of interface stuff which is important
However in a typical implementation customising Profiles is the most important area
Common Requests include:
Customising which fields are populated from the LDAP or other sources. Populating Photo’s is great if you have them.
Changing Field Labels or order
Enabling/Disabling Fields. Read Only/Editable Fields
Do fields appear in Profile if no data?
Adding Custom Fields (Field Extensions)
Profile Types – Different Fields for different Profiles
There are a lot of other ways to customise Profiles but these are the basics.

Customising Profiles – Data Population
Connections comes with an entitlement for Tivoli Directory Integrator.
Out of the box it provides a series of Assembly Lines for populating & synching Profiles data from your LDAP
This is great but in many cases you need data from alternate sources as well.
TDI is a DATA MOVING MACHINE!.
Connectors for Domino/JDBC/HTTP/FTP/Web Services/etc/etc/etc
Also you can build your own Connectors
Pull data and push data from just about anywhere to keep it all in sync.
Not going to provide detail here as next session has it:
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.

Customising Profiles – profiles-config.xml
It is all controlled by profiles-config.xml
Use wsadmin to check out, modify, and check back in.
cd /<WASHOME>/profiles/Dmgr01/bin
./wsadmin.sh –lang jython –user <wasadmin> -password <password> -port 8879
execfile("profilesAdmin.py")
print AdminControl.getCell() to get the cell name.
ProfilesConfigService.checkOutConfig (" <working_directory ”,”ServerNode01Cell”)
Make your changes to the profiles-config.xml
ProfilesConfigService.checkInConfig()
execfile("connectionsConfig.py")
LCConfigService.checkOutConfig(" <working_directory> "," <cell_name> ")
Update the version stamp in LotusConnections-config.xml LCConfigService.updateConfig("versionStamp","")
LCConfigService.checkInConfig()
Restart Servers

Customising Profiles – Fields
You can change the fields that are available for Profiles.
You can also change their attributes – Editable/Read Only/Visible/Labels
You can also decide if fields with no data are hidden in read mode
You can even have different Profile Types for different users.
Management
Contractors
Or maybe Role based
Ok so lets look at the default....

Customising Profiles - Fields
In profiles-config.xml find <profileLayout profileType="default"> stanza
Each attribute in Profile and Edit My profile is controlled by an entry in this section.

Customising Profiles – Hiding Fields
So first of all lets get rid of a few fields
IP Telephone, Pager, Fax, Assistant
Check out profiles-config.xml and edit
All we do is simply comment them out:

Check it back in and restart Profiles Application

Customising Profiles – Adding Fields
So now we might want to add a few field extensions
For AusLUG lets add fields for Twitter ID and LinkedIn Page
Again we edit profiles-config.xml, find the default profile type and add the appropriate attribute.
We want the field to be editable and we want it to appear in read mode even if they havn’t provided the data.
First add to Extension Attribute stanza (near the top):
Then within Profile Type we add the extensionAttribute:

Customising Profiles – Labels
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.
Create a new file in the <customisation dir>/strings directory.
Name it <resource_bundle_name>.<properties_file_name>.
Add your custom labels. For example in our case:
Check out and modify profiles-config.xml so that the attributes have the bundleIdRef and labelKey specified
Check out and modify LotusConnections-config.xml to add the resource bundle.
Restart the servers.

Profiles – Customising Search
You can customise both the Directory Advanced Search as well as the search results.
Again controlled in profiles-config.xml
Just comment out the fields you don’t want and add in the extra’s you do.

Profiles – Customising Search (Cont)
And modify the search results by changing the searchResultsLayout stanza:

Some Tips
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!
ALWAYS CHECK OUT AND CHECK IN the config files. Edit in place at your own risk!
If it isn’t working clear your cache! Although if you update the versionID in LotusConnections-config.xml it should be fine
Remember CASE Sensitive in files/attributes etc.
Use appropriate Change Management and Versioning of files.
Experiment! The possibilities are endless!

One last thing - Integrating Embed.ly
Awesome idea from Luis Benitez ( http://www.lbenitez.com/2011/06/i-love-it-embedly-in-ibm-connections.html#disqus_thread )
Embed.ly enables you to embed web pages/youtube/slideshare etc etc directly into pages simply by the user posting a URL.
Works in Blogs/Status Updates/Forums/etc
You need to register at http://embed.ly for an Key. It is FREE!
You just need to add this to header.jsp before the <div class="lotusRightCorner"> :
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('div.lotusContent').embedly({key:‘YOURKEY'});
});
</script>
And this to the footer.jsp at the bottom of the file:
setTimeout("$('div.lotusContent').embedly({ maxWidth: 450, wmode: 'transparent', method: 'after' });",2000);
</script>

So what else can you do?
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.
Integrate Google Gadgets and iWidgets
Have different Profile Types for different users
Update Business Cards. Integrate Business Cards
Modify Notification Emails
Show/Add/Hide iWidgets (LinkedIn, Facebook, Twitter)
Customise the Connections API to support your field extensions
Make more serious customisations to the JSP’s thru out Connections
Integrate Connections seamlessly with WebSphere Portal
http://www.collaborationblueprint.com.au/blog/2010/7/13/integrating-lotus-connections-with-websphere-portal-part-1.html
Integrate Sametime/Quickr or even Sharepoint!
Integrate your Apps with Connections!
And more and more and more!

Reference & Resources
There is an awesome community of Connections experts out there. This presentation is made from our collective experience.
IBM Connections Documentation (just search for it)
Luis Benetiz – Lots of great ideas for integrating Widgets and other stuff ( http://www.lbenitez.com )
TDI Gurus - Curious Mitch ( www.curiousmitch.com ) & John Bilson (presenting at AUSLUG today)
Stuart McIntyre – Connections specialist in the UK ( http://www.ibmconnectionsblog.com ) and TWIL (http://thisweekinlotus.com)
My blog (http://www.collaborationblueprint.com)

http://www.collaborationblueprint.com.au	432
http://connections.abakus.fr	61
http://collaborationblueprint.squarespace.com	40
http://connections.orica.net	24
http://planetlotus.org	10
http://devconnections.orica.net	7
http://connections.isw.net.au	3
http://connections.coprolabs.no	2
http://twitter.com	1
http://trunk.ly	1
http://www.twylah.com	1

Auslug 2011 customising ibm connections

by adambrownaus on Sep 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 582

Statistics

Auslug 2011 customising ibm connections — Presentation Transcript