29th October 2009

Stuart McIntyre, Collaboration Matters Limited

Your First Lotus Connections 2.5 Customisations Made Easy(DEV05)

Your Host✤ Stuart McIntyre

✤ Technical Director, Collaboration Matters

✤ Connections Specialist

✤ Blogger

✤ Feel free to contact me:

facebook.com/stuartmcintyre

twitter.com/stuartmcintyre

www.linkedin.com/in/mcintyre

stuart@collaborationmatters.com

blog.collaborationmatters.com

lotusconnectionsblog.com

quickrblog.com

lotusliveblog.com

This Session

✤ Your First Lotus Connections 2.5 Customisations Made Easy

✤ Topics:

✤ Demonstrate some of the key areas where Lotus Connections 2.5 can be customised

✤ Themes and skins

✤ Profiles

✤ What next?

✤ Q&A

First, some questions...

First, some questions...

✤ Administrator?

First, some questions...

✤ Administrator?

✤ Developer?

First, some questions...

✤ Administrator?

✤ Developer?

✤ Something else?

First, some questions...

✤ Administrator?

✤ Developer?

✤ Something else?

✤ Edited HTML?

First, some questions...

✤ Administrator?

✤ Developer?

✤ Something else?

✤ Edited HTML?

✤ Edited CSS?

First, some questions...

✤ Administrator?

✤ Developer?

✤ Something else?

✤ Edited HTML?

✤ Edited CSS?

✤ Worked with TDI?

First, some questions...

✤ Administrator?

✤ Developer?

✤ Something else?

✤ Edited HTML?

✤ Edited CSS?

✤ Worked with TDI?

✤ Customised Lotus Connections?

Interactivity is good!

Image: http://www.slideshare.net/Niezette/100-pictures-for-powerpoint-presentations

Lotus Connections 2.5

Blogs

Communities

Bookmarks

Activities

Profiles

Homepage

Wikis

Files

Introducing LC2.5

✤ Whilst only a point-release, LC2.5 probably the most significant update to product so far

✤ Announced on 18th August, shipped on 28th August

✤ Generated massive demand for adoption amongst existing users and outside

✤ All information in this presentation is correct for Connections 2.5. Details may be different in 2.0.x - we’ll try to point this out as we go

Create, find, join, and work with communities of people who share a

common interest, responsibility, or area of expertise

Use a weblog to present your idea and get feedback from others; learn from the expertise and experience of others who

blog

Save, organize and share bookmarks; discover bookmarks that have been

qualified by others with similar interests & expertise

Organize your work, plan next steps, and easily tap your expanding professional network to help execute your everyday

deliverables, faster

Quickly find the people you need by searching across your organisation and

connecting to others.

Profiles

Bookmarks

Communities

ActivitiesBlogs

Homepage

Manage your attention by viewing relevant social data aggregated across your subscriptions, notifications, and

network of colleagues.

WikisFiles

Upload and share any type of file with colleagues and communities. Store

versions and view downloads, comments and ratings.

Create wiki spaces for individuals, groups, and communities to coauthor pages. View changes across pages,

ratings, and comments.

All your social software needsready for business

Introducing LC2.5 (cont.)

Introducing LC2.5 (cont.)✤ Principal new features:

Introducing LC2.5 (cont.)✤ Principal new features:

✤ River of news

Introducing LC2.5 (cont.)✤ Principal new features:

✤ River of news

✤ Status updates

Introducing LC2.5 (cont.)✤ Principal new features:

✤ River of news

✤ Status updates

✤ Customisable Communities

Introducing LC2.5 (cont.)✤ Principal new features:

✤ River of news

✤ Status updates

✤ Customisable Communities

✤ Improved Discussion Forums

Introducing LC2.5 (cont.)✤ Principal new features:

✤ River of news

✤ Status updates

✤ Customisable Communities

✤ Improved Discussion Forums

✤ Files & Wikis

Areas for Customisation✤ Look and Feel

✤ Logo✤ Header✤ Footer✤ Themes✤ Login Pages

✤ Profiles✤ Changing which fields display & order✤ Changing editable fields✤ Changing field names✤ Adding extension fields

Key Resources

✤ Lotus Connections Infocenter

✤ Lotus Connections Wiki

✤ Luis Benitez blog

✤ Curious Mitch

✤ The Connections Blog

✤ developerWorks

http://www.lotusconnectionsblog.com

http://www-10.lotus.com/ldd/lcwiki.nsf

http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/index.jsp

http://www.lbenitez.com

http://www.curiousmitch.com

https://www.ibm.com/developerworks/lotus/products/connections/

Look and Feel - Themes

Standard LC2.5

‘OneUI’ theme

Look and Feel - Themes

An example customised

LC2.5 theme

Theme Components

✤ Each theme is made up of multiple components:

✤ CSS

✤ header.html

✤ footer.html

✤ images

CSS Theme File

✤ CSS file affects the design (look and feel) but not the layout or functionality of Connections UI

✤ Controls all of the colours and background images

✤ Allows Web Designer to make changes to elements like link colours and background images

Header.html 1/2

✤ Controls appearance of banner, including logo and feature tabs

✤ Links to CSS file

✤ Found in:

✤ <Profile_Home>/installedApps/<nodename>/<feature EAR>/<feature WAR>/nav/templates/header.html

✤ e.g. /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/machineNode01Cell/Blogs.ear/blogs.war/nav/templates/header.html

Header.html 2/2<!-- Copyright IBM Corp. 2006, 2009All Rights Reserved.-->

<div class="lotusRightCorner">

<div class="lotusInner">

<!-- The following lines are required for Accessibility and are used by screen readers. Please do not remove -->

<a href="#mainContent" id="lotusAccessLinkMainContent" accesskey="S" class="lotusAccess">

<img src="{{default images}}/blank.gif" alt="Skip to main content link. Accesskey S" />

</a>

<a href="#tabNavigation" id="lotusAccessLinkTabNavigation" accesskey="1" class="lotusAccess">

<img src="{{default images}}/blank.gif" alt="Skip to tab navigation link. Accesskey 1" />

</a>

<a href="#subNavigation" id="lotusAccessLinkSubNavigation" accesskey="2" class="lotusAccess">

<img src="{{default images}}/blank.gif" alt="Skip to sub navigation. Accesskey 2" />

</a>

<div class="lotusLogo" id="lotusLogo"><span class="lotusAltText">Lotus Connections</span></div>

<ul class="lotusInlinelist lotusUtility lotusNowrap" id="headerMenuContainer"

><li class="lotusFirst" id="headerUserText" style="display: {{ header username display }};"><span class="lotusUser" id="headerUserName">{{ header username }}</span></li

><li class="{{ header help class }}" id="headerHelpLi"><a href="{{ header help link }}" id="headerHelpLink">{{ label.header.help }}</a></li

><li id="logoutLi"><a href="{{ header loginout link }}" id="logoutLink" >{{ header loginout label }}</a></li></ul>

<ul class="lotusInlinelist lotusLinks">{{application links: li }}</ul>

</div>

Footer.html 1/2

✤ Controls appearance of footer

✤ Great place to add links to other corporate sites, resources or tools

✤ Default has many IBM-specific links

✤ Found in:

✤ <Profile_Home>/installedApps/<nodename>/<feature EAR>/<feature WAR>/nav/templates/footer.html

✤ e.g. /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/machineNode01Cell/Blogs.ear/blogs.war/nav/templates/footer.html

Footer.html 2/2 (subset)<table cellspacing="0"><tbody>

<tr>

<th>{{ label.footer.connections.heading }}</th>

<th>{{ label.footer.help.heading }}</th>

<th class="lconnFooterToolsHeader">{{ label.footer.tools.heading }}</th>

<th class="lotusLast">{{ label.footer.about.heading }}</th>

</tr>

<tr>

<td><ul id="lotusFooterULConnections">

{{ footerlink.connections.home }}

{{ footerlink.connections.demo }}

</ul></td>

<td><ul id="lotusFooterULHelp">

{{ footerlink.help.help }}

{{ footerlink.help.forums }}

</ul></td>

<td class="lconnFooterToolsCell"><ul id="lotusFooterULTools">

{{ footerlink.tools.browserplugins }}

{{ footerlink.tools.adminpage }}

{{ footerlink.tools.metrics }}

</ul></td>

<td class="lotusLast"><ul id="lotusFooterULAbout">

{{ footerlink.about.about }}

{{ footerlink.about.connectionsonline }}

{{ footerlink.about.submitfeedback }}

</ul></td> </tbody> </table>

Images 1/2

✤ Contains 400+ images used to build a Connections page

✤ Found in:

✤ <Profile_Home>/installedApps/<nodename>/<feature EAR>/<feature WAR>/nav/common/styles/images

✤ e.g. /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/machineNode01Cell/Blogs.ear/common/styles/images

Images 2/2

✤ Many images are transparent and can be used across all themes

✤ Others are closely tied to default theme colour scheme,and must be regenerated - not so many with 2.5

2.0.x vs. 2.5

So why so many copies of themes?

✤ WAS apps are typically self-contained

✤ It is possible (though not necessarily desirable) to customise each theme individually

✤ Allows those customers using just Profiles or Activities to customise without additional steps

✤ Recommended to move to a single copy of theme on the HTTP server ASAP, certainly before customisation for production

Creating a custom theme

✤ Five step process:

✤ Move default theme to HTTP Server

✤ Configure LC2.5 to use HTTP-based theme

✤ Test

✤ Customise theme

✤ Test

Moving theme to HTTP server 1/3

✤ Create directory on HTTP server for theme

✤ e.g.

✤ c:\IBM\HTTPServer\htdocs\en_US\mytheme

✤ /opt/IBM/HTTPServer/htdocs/en_US/mytheme

✤ Create sub-directory for css and html:

✤ c:\IBM\HTTPServer\htdocs\en_US\mytheme\css_html

✤ /opt/IBM/HTTPServer/htdocs/en_US/mytheme/css_html

✤ From profiles application, copy across header.html, footer.html, defaultTheme.css and themeImages directory into mytheme/css_html

✤ Copy images directory into mytheme/images

✤ c:\IBM\HTTPServer\htdocs\en_US\mytheme\images

✤ /opt/IBM/HTTPServer/htdocs/en_US/mytheme/images

Moving theme to HTTP server 2/3

# cd /opt/IBM/HTTPServer/htdocs/en_US/mytheme# ls -lR .

drwxr-xr-x3 root system 256 2009-09-11 06:14 css_htmldrwxr-xr-x3 root system 20480 2009-09-11 06:00 images

./css_html:-rw-r--r--1 root system 64094 2009-09-11 05:47 defaultTheme.css

-rw-r--r--1 root system3910 2009-09-09 08:27 footer.html-rw-r--r--1 root system1696 2009-09-11 05:56 header.html

-rw-r--r--1 root system 64093 2009-09-09 07:38 mytheme.cssdrwxr-xr-x2 root system4096 2009-09-09 07:38 themeImages

..../css_html/themeImages:

-rw-r--r--1 root system 202 2009-09-09 07:38 btnSpecialBkgd.png-rw-r--r--1 root system 19091 2009-09-09 07:38 loginBkgd.png

..../images:

-rw-r--r-- 1 root system 15163 2009-09-09 07:06 16pxIcons.gif-rw-r--r-- 1 root system1203 2009-09-09 07:06 2secondary_cols.jpg

...

Moving theme to HTTP server 3/3✤ Check you can access the files via a browser:

✤ e.g.

✤ http://connections.myorg.com/images/logo.png

✤ http://connections.myorg.com/mytheme/header.html

✤ http://connections.myorg.com/mytheme/footer.html

✤ http://connections.myorg.com/mytheme/defaultTheme.css

Configure Connections to use

✤ Edit LotusConnections-config.xml *

✤ Search for ‘style enabled’, change lines:

✤ to:

* Using appropriate wsadmin commands to checkin/checkout

<style enabled="true"><!-- leave "admin_replace" for any fields you do not wish to override --><header url="http://connections.myorg.com/mytheme/css_html/header.html"/><footer url="http://connections.myorg.com/mytheme/css_html/footer.html"/><images ssl_url="https://connections.myorg.com/mytheme/images" url="http://connections.myorg.com/mytheme/images"/><caching value="private, max-age=3601"/></style>

<style enabled="false"><!-- leave "admin_replace" for any fields you do not wish to override --><header url="admin_replace"/><footer url="admin_replace"/><images ssl_url="admin_replace" url="admin_replace"/><caching value="private, max-age=3601"/></style>

Configure Connections to use

✤ Tell Connections to use CSS from mytheme directory

✤ Edit mytheme/css_html/header.html, add relative (not absolute) link to CSS file just below<div class=”lotusInner”>:

✤ Save file. Restart WAS. Restart HTTP.

<div class="lotusRightCorner"><div class="lotusInner"><link rel="stylesheet" href="/mytheme/css_html/defaultTheme.css" type="text/css">

Testing

✤ Access the site via a browser

✤ Should see Connections appearing same as previously, but with images, header and footer from HTTP site

✤ Test by ‘View Image’ on Lotus Connections logo, or by adding comment to HTML files and using ‘View Source’

Trouble-shooting

✤ If content is not appearing from HTTP server:

✤ Clear Browser Cache

✤ Restart WAS again - sometimes this takes 2 restarts

✤ Check paths used and validity of LotusConnections-config.xml

Customising Images

✤ Recommended to use web standard image sizes, formats and dimensions when creating theme images (copy default theme for guidance)

✤ Plan design and create images before creating/editing CSS

✤ Do not use transparent 24-bit PNG - not all supported browsers support them

✤ Keep all images in HTTP Server mytheme/images directory and reduce size wherever possible

Changing Lotus Connections logo

✤ In LC2.0.x logo image was set in header.html

✤ In LC2.5 it is in the CSS file:

✤ Open mytheme/defaultTheme.css, search for lotusLogo:

✤ To link to your image:

.lotusui .lotusLogo, .lotusLoginLogo{height:18px;width:104px;background-image:url(../images/logo.png);background-repeat:no-repeat;}/*height, width values are in this file to aid in retheming*/

.lotusui .lotusLogo, .lotusLoginLogo{height:73px;width:160px;background-image:url(./images/acme.png);background-repeat:no-repeat;}/*height, width values are in this file to aid in retheming*/

Changing Lotus Connections logo

✤ Note, height and width do not scale image, just crop:

✤ Instead, but resize the image itself

✤ Recommended to keep to 18px height, so long rectangular logos work best

lotusui .lotusLogo, .lotusLoginLogo{height:18px;width:39px;background-image:url(../images/acme.png);background-repeat:no-repeat;}/*height, width values are in this file to aid in retheming*/

.lotusui .lotusLogo, .lotusLoginLogo{height:18px;width:39px;background-image:url(../images/acme18.png);background-repeat:no-repeat;}/*height, width values are in this file to aid in retheming

Adding additional links to Header

✤ Connections automatically populates the list of features at the top of each page from those installed and enabled

✤ It is straightforward to add additional links to the list

✤ Edit header.html, and adjust after the line,

✤ e.g.

✤ Need to restart the WAS server to take effect

<ul class="lotusInlinelist lotusLinks">{{application links: li }}

<ul class="lotusInlinelist lotusLinks">{{application links: li }} <a href="http://quickr.acme.com">Places</a> </ul>

Adding/editing links in Footer

✤ The links in the LC2.5 footer are very IBM-centric and are ripe for replacing with organisational resources (Help desk, training, homepage etc.)

✤ To change, edit footer.html, e.g:

✤ Must restart WAS server to take effect

<tr><th>ACME Connections</th><th>{{ label.footer.help.heading }}</th><th class="lconnFooterToolsHeader">{{ label.footer.tools.heading }}</th><th class="lotusLast">{{ label.footer.about.heading }}</th></tr><tr><td><ul id="lotusFooterULConnections"><a href="http://www.acme.com">ACME Home</a><br><a href="http://helpdesk.acme.com/request">Raise a Help Request</a><br><a href="http://helpdesk.acme.com/password">Reset My Password</a></ul></td>

Lotus Connections Branding

✤ Changes covered so far do not change look and feel of Connections features

✤ Significant modifications are possible using CSS and image changes

✤ Additional UI changes can be accomplished within JSPs and by using iWidgets (out of scope of this session)

Included Themes✤ In addition to defaultTheme, there are four other LC2.5

themes shipped with the product: goldTheme, greenTheme, metalTheme and redTheme

✤ These can be used by copying to HTTP server and linking to the CSS file from header.html

Custom Themes 1/2

✤ Most organisations wish to create their own theme according to corporate UI guidelines or branding

✤ Take the included theme CSS that is closest to desired look and feel, and copy to new file, e.g. acmeTheme.css

✤ Use theme colour chart (for 2.0.x but still relevant) from LC Wiki to assist with colour transformations

Editing or Creating a New Lotus Connections Theme It is recommended you have knowledge of CSS (Cascading Style Sheets) HTML and image creation/editing techniques before editing or creating a new theme.

The default (blue) theme is controlled by the css file "defaultTheme.css" located here: common/styles/defaultTheme.css

IMPORTANT: Please make a backup copy of the original "defaultTheme.css" before making any changes. To create a new theme based on one of the existing themes, just choose a theme, duplicate it (copy, paste) and then proceed to change the colors, background images (if you have new images to replace the originals) and styles to create a custom branded theme for your Lotus Connections software.

TIP: If creating a new theme using new images, place any new images into a new folder and reference where the css file should look for the new images. E.G. the default theme buttons are stored here: /images/buttonBkgd.png the RED theme buttons are stored here: /images/red/buttonBkgd.png

HTML / CSS Class Name Description Default Blue Theme Red Theme Comments

body

Page Background Color

#fbfcfd #efe6cc

Page Background Image (can be repeated)

images/background.png images/red/background.png

Some background images may need to be repeated horizontally, vertically or both.

#lotusMain, .lotusMain

Main Content Area (central page area)

border-top-color: #568dd0 border-top-color: #9b3031

Left side panel background image (light blue blend)

Left side panel background image (grey blend)

a:link, a:visited Default Link color

#105cb6 #9f060d

a.lotusAction, a.lotusAction:visited Action Links (more actions etc.).lotusActions a, .lotusActions a:visited

.lotusVCard a:link, .lotusVCard a:visited,

.lotusVCard a:hover, .lotusVCard a:focus, a:active

.lotusVCard .lotusPersonActions .lotusInlinelist li

Popup person card link color (V Card)

.dijitCalendarYearLabel .dijitCalendarPreviousYear,

.dijitCalendarYearLabel, .dijitCalendarNextYear

a:hover, a:focus, a:activeMouse Over Default Link color

#05386b #6f0207

a.lotusAction:hover, a.lotusAction:focus, a.lotusAction:active, .lotusActions a:hover, .lotusActions a:focus, .lotusActions a:active, .lotusTags a.lotusAction:hover, .lotusTags a.lotusAction:focus, .lotusTags a.lotusAction:active

Action Links mouse over (more actions etc.)

a.lotusMyLink:hover, a.lotusMyLink:focus, .lotusMyLinks a:hover, .lotusMyLinks a:focus My Links

Change color and border bottom color

a.lotusPerson, a.lotusPerson:visited Person Name Link color

#578cca #a7853c .lotusTags a:link, .lotusTags a:visited, a.lotusTag:link, a.lotusTag:visited Tag link color

.lotusTags a:hover, .lotusTags a:focus, .lotusTags a:active, a.lotusTag:hover, a.lotusTag:focus, a.lotusTag:active, a.lotusPerson:hover, a.lotusPerson:focus, a.lotusPerson:active

Tag links and underline mouse over color

#05386b #ba9a55

Change color and border bottom color

.lotusView Change details view buttons

background-image: url(images/views.gif);

background-image: url(images/red/views.gif);

.lotusActionMenu li.lotusMenuSeparator Action menu separator #b3cae9 #9b3031

Change color and border top color

.dijitMenuSeparatorTop

#lotusBanner ul li, .lotusBanner ul li

Dividers between links in the top right (name | help | login)

border-left-color: #639ade border-left-color: #ac9e69

#lotusBanner ul.lotusLinks li.lotusSelected a, .lotusBanner ul.lotusLinks li.lotusSelected a

Background box color on selected main navigation links

background-color: #649de1 background-color: #cfb275 .dijitMenu

ul.lotusActionMenu

Page 1 of 4Lotus Connections Theme Editing Guide

14/05/2008file://C:\Users\Karl Thompson\Documents\UI designs\Connections\Themes\Theme M...

http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Creating_a_Connections_Theme_Dec2008.pdf/$file/Creating_a_Connections_Theme_Dec2008.pdf

Custom Themes 2/2

✤ Get your web designers, communications department etc. on board

✤ Start on paper!

✤ For each of the colours in the colour chart, match to appropriate colour from corporate guidelines/branding

✤ Then edit CSS, and test in browser

✤ Some images will need to be changed for colour match

✤ Don’t forget that fonts and font sizes can be changed as well as colours

✤ Recommend the user of Firebug for ad-hoc testing and dedicated CSS editing tools

Customising Communities

✤ It is also possible to personalise the look and feel of individual communities, including theme templates

✤ Use same CSS templates as overall theme - create some to complement your overall custom theme

Customising Profiles

✤ The other principal area where most organisations customise Lotus Connections (even for pilots) is Profiles

✤ Common changes include:

✤ Customising which fields are populated from LDAP

✤ Changing field labels or field order

✤ Enabling/disabling editing of fields

✤ Adding custom fields

✤ Adding additional profile types

✤ There are many more expert topics (integration of data from other sources etc.), but these are the basics

Customising Profiles population

✤ Topic is well covered in the InfoCenter

✤ Population Wizard has also made it more straightforward, however worth covering the options

✤ Recommend that one always uses manual process after initial population, to control who gets added and how

✤ Manual import can be scheduled using CRON or Windows Scheduler

http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/topic/com.ibm.connections.25.help/t_prof_install_profiles_db.html

✤ Import is a two stage process (even if driven by Wizard), first collecting the relevant entries from LDAP, then populating Profiles with specified information

✤ Collection of names is driven by collect_dns script, according to settings specified in profiles_tdi.properties

source_ldap_collect_dns_file=collect.dnssource_ldap_search_base=o=acme

source_ldap_search_filter=(&(uid=*)(objectclass=inetOrgPerson))source_ldap_url=ldap://ldap.acme.com:389

source_ldap_use_ssl=falsesource_ldap_user_login=cn=LDAPBind

source_ldap_user_password={encr}<encrypted password>

Customising Profiles population

✤ Names that reside within search base and match search filter are deposited in collect.dns

✤ Some pilots have specified only selected users to be imported, hence manual editing on collect.dns - not recommended!

✤ Populate_from_dn_file is then run to load new users within collect.dns into Profiles, acting upon settings in map_dbrepos_from_source.properties

CN=Neil Burston,ou=it,o=acmeCN=Mitch Cohen,ou=it,o=acme

CN=Sharon Bellamy,ou=it,o=acmeCN=Stuart McIntyre,ou=it,o=acme

Customising Profiles population

✤ map_dbrepos_from_source.properties specifies match between LDAP and Profiles fields:

✤ Customise according to your org’spopulated fields in LDAP

✤ Watch for field lengths and validation (see validate_dbrepos_fields.properties)

✤ Some field lengths are very restrictive, particularly Department (16 characters) and Country (3 - for ISO codes)

✤ Can be a good use for extended fields to replace default attributes

alternateLastname=nullbldgId=nullblogUrl=nullcalendarUrl=nullcountryCode=ccourtesyTitle=nulldeptNumber=nulldescription=description...

alternateLastname=64blogUrl=256bldgId=64calendarUrl=256courtesyTitle=64deptNumber=16description=1048576...

Customising Profiles population

Controlling attributes listed

✤ Attribute listing and whether editable is controlled in profiles-config.xml, set by Profile Type

✤ Initially there is just the ‘default’ Profile Type

✤ Order of attributes in configuration file controls order on screen

✤ How many of you use ‘IP Telephony Number’? So how to stop it appearing?

Profiles-config.xml

<profileLayout profileType="default"><jobInformation>

<editableAttribute showLabel="false" hideIfEmpty="true" prependHtml="&lt;strong&gt;" appendHtml="&lt;/strong&gt;&lt;br/&gt;">jobResp</editableAttribute><attribute showLabel="false" hideIfEmpty="true" appendHtml="&lt;br &gt;">employeeTypeDesc<attribute><attribute showLabel="false" hideIfEmpty="true" appendHtml="&lt;br/&gt;">organizationTitle<attribute>

...</jobInformation>

<contactInformation><!-- <editableAttribute hideIfEmpty="true" showLabel="true">courtesyTitle</editableAttribute> --><editableAttribute showLabel="true" hideIfEmpty="true" disabled="true" prependHtml="&lt;strong&gt;" appendHtml="&lt;/strong&gt;&lt;br/&gt;">displayName</editableAttribute><!-- <editableAttribute showLabel="true" hideIfEmpty="true">preferredFirstName</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">preferredLastName</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">alternateLastname</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">nativeFirstName</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">nativeLastName</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">preferredLanguage</editableAttribute> --><editableAttribute showLabel="true" hideIfEmpty="true">bldgId</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">floor</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">officeName</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">telephoneNumber</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">ipTelephoneNumber</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">mobileNumber</editableAttribute><editableAttribute showLabel="true" hideIfEmpty="true">pagerNumber</editableAttribute><!-- <editableAttribute showLabel="true" hideIfEmpty="true">pagerType</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">pagerId</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true">pagerServiceProvider</editableAttribute> --><editableAttribute showLabel="true" hideIfEmpty="true">faxNumber</editableAttribute><attribute showLabel="true" hideIfEmpty="true" email="true">email</attribute>...

Each attribute listed in Profile and Edit My

profile is controlled by an entry in profiles-

config.xml

Hiding a Profiles attribute

✤ Connections 2.5 now has the intelligence to hide fields when empty, but still appear in Edit My Profile. So how to hide completely?

✤ Edit profiles-config.xml, find the <profileLayout profileType="default"> stanza, and the relevant attribute:

✤ Simply comment out the entry:

✤ Restart the WAS server

<editableAttribute showLabel="true" hideIfEmpty="true">ipTelephoneNumber</editableAttribute>

<!-- <editableAttribute showLabel="true" hideIfEmpty="true">ipTelephoneNumber</editableAttribute> -->

IP Telephony no longer appears to the user

Controlling editable attributes 1/2

✤ A familiar request is to stop the Assistant attribute being editable by the end user, but for that attribute to still appear in the profile

Controlling editable attributes 2/2

✤ Again, edit profiles-config.xml, find the ‘default’ profile type definitions, and the appropriate attribute:

✤ To stop the attribute being editable, modify ‘editableAttribute’ to be ‘attribute’:

<editableAttribute showLabel="true" hideIfEmpty="true" hcard="true" email="secretaryEmail" uid="secretaryUid" userid="secretaryUserid" appendHtml="&lt;br/&gt;">secretaryName</editableAttribute>

<attribute showLabel="true" hideIfEmpty="true" hcard="true" email="secretaryEmail" uid="secretaryUid" userid="secretaryUserid" appendHtml="&lt;br/&gt;">secretaryName</attribute>

Assistant no longer appears in the Edit My Profile screen

Controlling attribute labels 1/2

✤ When profiles are displayed, some attributes are displayed with labels, others are not:

✤ So, how to show the label for the Phone number?

The secretary/assistant’s name is displayed with a label, whilst the phone

number and email address are not

✤ Again, edit profiles-config.xml, find the ‘default’ profile type definitions, and the appropriate attribute:

✤ To make the default attribute label appear, change the showLabel value:

<attribute showLabel="false" hideIfEmpty="true" appendHtml="&lt;br/&gt;">telephoneNumber</attribute>

The label for the phone number is

now shown

<attribute showLabel="true" hideIfEmpty="true" appendHtml="&lt;br/&gt;">telephoneNumber</attribute>

Controlling attribute labels 2/2

Changing Profiles attribute labels

✤ Default attribute labels (designed to be multi-lingual) can be irrelevant or misunderstood in many organisations, and thus need to be changed

✤ Also, it is often it is easier to change labels than to create new attributes from scratch

Changing Profiles attribute labels

✤ In Connections 2.5, process has changed✤ LC2.5 provides external resource bundle loader

for adding and updating strings to Profiles and Communities.

✤ Mechanism used when performing the following tasks:✤ Adding custom extension attributes✤ Customizing the Profiles business card✤ Adding custom widgets to Communities and Profiles✤ Configuring the vCard export feature

✤ Too complex to describe here

http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/topic/com.ibm.connections.25.help/t_admin_profiles_add_custom_strings.html

Changing Profiles attribute labels

Adding new attributes

✤ Concept of Extension Attributes included in profiles

✤ Three step process:

✤ Add new attribute to profiles-config.xml (in ExtensionAttributes stanza and again where it should be displayed) - mandatory

✤ Add label for attribute using Bundle file (optional)

✤ Add to TDI import process (optional)

Adding a new attribute 1/2

✤ First add to Extension Attribute stanza:

✤ Then within the Profile Type(s) it should appear in:

✤ Save and restart the WAS server

<profileExtensionAttributes><simpleAttribute extensionId="homeAddress" length="64" /><xmlFileAttribute extensionId="profileLinks" ...</xmlFileAttribute>

</profileExtensionAttributes>

<contactInformation>...<editableAttribute showLabel="true" hideIfEmpty="true" email="true">groupwareEmail</editableAttribute>

<!-- <editableAttribute showLabel="true" hideIfEmpty="true" link="true">calendarUrl</editableAttribute> --><!-- <editableAttribute showLabel="true" hideIfEmpty="true" link="true">freeBusyUrl</editableAttribute> --><editableAttribute showLabel="true" hideIfEmpty="true" blogUrl="true">blogUrl</editableAttribute>

<extensionAttribute showLabel="false" editable="true" extensionIdRef="homeAddress" /></contactInformation>

New attribute will appear for editing and display (if populated), but will not

have appropriate label

Adding a new attribute 2/2

Adding label for new attribute 2/2

Attribute is now correctly labelled

Populating extension attributes

✤ Steps so far will allow new attributes to be populated by the user

✤ However, it is possible to populate via TDI too

✤ Add to <TDISOL>/conf/LotusConnections-conf/tdi-profile-config.xml

<profileExtensionAttributes><simpleAttribute extensionId="homeAddress" length="64" userLabel="Home Address" userTypeString="String" sourceKey="homeAddress"/><xmlFileAttribute extensionId="profileLinks" schemaFile="profile-links.xsd" indexBindingExpr="/linkroll/link/@name | /linkroll/link/@url"><indexFields><indexField fieldName="linkName" fieldExpr="/linkroll/link/@name" /></indexFields> </xmlFileAttribute>

</profileExtensionAttributes>

Troubleshooting

✤ Many issues are caused by caching within the WAS server and HTTP server - always restart WAS if editing XML, JAR or HTML files - CSS changes do not require restart

✤ Most files within Connections/WAS are case-sensitive - check and double-check case and syntax

✤ Always use appropriate WSADMIN checkin/checkout procedures for XML configuration files - saves a lot of pain with typos

✤ It is worth investing in a pre-production/test system configured as live for testing customisations first

What next?

✤ Other areas where customisation may be desired:

✤ Additional Profile Types (e.g. Active vs. Leavers, Students vs. Staff)

✤ See CuriousMitch article at http://www.curiousmitch.com/CuriousMitch/mitch2.nsf/d6plinks/MCON-7LK2X2 and Infocenter http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/index.jsp?topic=/com.ibm.connections.25.help/c_admin_profiles_add_profile_type.htmlc_admin_profiles_add_profile_type.html

✤ Business Card

✤ See Infocenter http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/topic/com.ibm.connections.25.help/c_admin_profiles_customize_biz_card_links.html

✤ Search Results

✤ See Infocenter http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/topic/com.ibm.connections.25.help/t_admin_profiles_customize_search_results.html

✤ Notifications

✤ See great developerWorks paper on Notifications http://www.ibm.com/developerworks/lotus/documentation/d-ls-lcnotifications/?S_TACT=105AGX13&S_CMP=LP

Lotus Connections Resources

Infocenter http://tinyurl.com/20infocenter

Wiki http://tinyurl.com/connectwiki

Support Page http://tinyurl.com/consupport

Support Forum http://tinyurl.com/20forum

developerWorks articles http://tinyurl.com/condevworks

Software Catalog http://tinyurl.com/consoftcat

Product Page http://tinyurl.com/conhome

With thanks to Mitch Cohen http://curiousmitch.com

But in truth, social software

users do and the business problems the tools address.

Jakob Nielsen, Usability Guru

Source: http://www.slideshare.net/marknadsstod/getting-real-about-enterprise-20

My Takeaways

Lotus Connections supports (and embraces) customisation

Many areas appropriate for customisation - a never-ending feast!Agree and document your scope and

priorities - stick to it!Use appropriate change management,

versioning and testing processesHave fun and make Connections work

for you and your organisation...

Image: http://www.slideshare.net/Niezette/100-pictures-for-powerpoint-presentations

Thank You!