My session at Dominopoint Days 2013 in Milano IBM Connections offers endless customizing possibilities in order to change the platform according to your needs . In this session we will explore the many customization options available and will look at some examples like customizing the UI, notifications, blog themes, profiles or even metrics reports. This will give you an idea of the various possibilities Connections is offering and should act as a starting point for your own customizations.

1. Customize
it!
Make
IBM
Connec3ons
look
your
way
–
Klaus
Bild

2. About
me
kbild.ch
twitter.com/kbild
linkedin.com/in/kbild

3. Agenda
• Easy
(User
Interface,
No1fica1ons)
• Intermediate
(Blog,
Communi1es,
Profiles)
• Advanced
(Document
types,
Media
gallery
object
types)
• Pro
(Richtext
Editor,
Reports)
• Extras
(Desktop
Plugin/Wikis
Welcome/
Mobile
App)

4. Agenda
• Easy
-­‐>
css,
jsp,
well
documented
• Intermediate
-­‐>
wsadmin
• Advanced
-­‐>
badly
documented,
xml,
Admin
UI’s
• Pro
-­‐>
complex,
tools/editors,
bad
documented

5. So,
who
are
you?

6. Goal
Show
you
what
can
be
customized
and
give
you
a
star3ng
point
for
your
own
customiza3ons

7. Easy
–
User
Interface
-­‐
Example
Custom
Menu
Custom
permanent
Link
Custom
colors,
logos,
styles

8. User
Interface
–
How
to
• For
all
these
changes
only
2
files
were
changed
and
3
were
added
– …customiza1oncommonnavtemplatesheader.jsp
– …com.ibm.social.gen4.theme_4.0.0.20130627-­‐1409.jar
resourcescssdefaultThemedefaultTheme.css
– …customiza1oncommonnavtemplatesmenubelso4.jsp
– belso4solu5ons.png,
ques5on.png

9. User
Interface
–
How
to

10. User
Interface
–
Resources
• Customizing
the
user
interface
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic45
• Customiza1on
of
the
Next
Gen
Theme
hap://kbild.ch/2013/07/customiza1on-­‐of-­‐the-­‐next-­‐gen-­‐theme-­‐for-­‐ibm-­‐connec1ons/

11. No3fica3ons
-­‐
Example
Custom
text
Custom
colors,
logo

12. No3fica3ons
–
How
to
• For
all
these
changes
3
files
were
changed
and
1
was
added
• …resourcesnlsno5fica5on.proper5es
(text)
• …newsresourcesnlsno5fica5on.proper5es
(text)
• …newsaggregatedstyle.4l
(colors,
logo)
• Added
…resourcesimagesbelso4.png
Full
path:
WAS_profilesDmgr01configcellsCELLLotusConnec1ons-­‐configno1fica1ons

13. No3fica3ons
–
How
to
• Special
Tipp:
Enable
mobile
links
in
no1fica1ons
-­‐>
no5fica5on-­‐config.xml
<property name="includeMobileLinksInNotifications">true</property>!

14. No3fica3ons
–
Resources
• Customizing
no1fica1ons
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_no1fica1ons_ic45
• Including
mobile
links
in
no1fica1ons
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Including_mobile_links_in_no1fica1ons_ic45

15. Intermediate
-­‐
Blog
-­‐
Example

16. Blog
–
Remarks
• You
can
only
customize
non
Community
Blogs!
• I
don’t
see
a
clear
“roadmap”
for
Blog
customiza1ons
• I
would
not
recommend
to
customize
Blogs

17. Blog
–
Resources
• Customizing
a
blog
theme
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_a_blog_theme_ic45
• Many
customiza1on
examples
like
Tweet
buaon
(Bob
Leah)
haps://www.ibm.com/developerworks/community/blogs/bobleah

18. Communi3es
-­‐
Example

19. Communi3es
–
How
to
• Take
defaultTheme.css
as
template
and
create
a
new
theme
css
(nameTheme.css)
in
folder
…customiza1onthemesnameTheme

20. Communi3es
–
How
to
• Add
your
new
theme
to
Communi1es
– Check
out
communi5es-­‐config.xml
and
add
theme
– Checkin
communi5es-­‐config.xml
– Add
com.ibm.lconn.communi5es.strings.ui.proper5es
to
strings
folder
and
add
your
labels

21. Communi3es
–
How
to
• Take
the
NextGen
defaultTheme.css
if
you
are
using
this
theme
and
change
all
rela1ve
paths
to
absolute
../../sprite/sprite16.png - > /com.ibm.social.gen4.theme/sprite/sprite16.png!
• Pay
special
aaen1on
where
you
place
images

22. Communi3es
–
Resources
• Adding
a
custom
theme
to
Communi1es
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Adding_a_custom_theme_to_Communi1es_ic45
• Branding
Communi1es
in
IBM
Connec1ons
(Jerald
Mahurin)
hap://www.sociallycurious.com/2013/05/21/branding-­‐communi1es-­‐ibm-­‐connec1ons

23. Profiles
-­‐
Example
Added
home
address
which
can
be
opened
in
Google
Maps
Click
to
Call
Addi3onal
Tab

24. Profiles
–
How
to
–
Home
address
• Create
a
resource
bundle
for
your
labels
– Check
out
LotusConnec5ons-­‐config.xml
and
add
bundle
–
– Check
in
LotusConnec5ons-­‐config.xml
– Create
property
file
for
each
language

25. Profiles
–
How
to
–
Home
address
• Check
out
profiles-­‐config.xml
and
add
aaribute
• DO
NOT
Check
in
profiles-­‐config.xml
YET
• Open
profiles-­‐types.xml
and
add

26. Profiles
–
How
to
–
Home
address
• Open
profileDetails.ll
and
add
following
code
to
the
contactInforma1on
sec1on:
<@util.renderProperty ref="heimadresse" nlsBundle="belsoft"
nlsKey="label.belsoft.homeAddress" hideIfEmpty=true ; ref, dataId, dataKey,
nlsKey, nlsBundle>!
<tr>!
<th scope="row”><@util.renderNls nlsKey=nlsKey nlsBundle=nlsBundle/></th>!
<td><p>!
<a target="_blank" href="http://google.com/maps?q=<@util.renderValue ref=ref/>"
>!
<@util.renderValue ref=ref/> </a> !
</p></td></tr> !

27. Profiles
–
How
to
–
Home
address
• Open
profileEdit.4l
and
add
following
code
to
the
contactInforma1on
sec1on:
<@util.renderFormControl ref="heimadresse" singleColumnLayout=false
nlsBundle="belsoft" nlsKey="label.belsoft.homeAddress"/>!
• Check
in
profiles-­‐config.xml
and
restart
profiles
app
• Power
Tipp:
If
you
enable
templateReloading
in
profiles-­‐config.xml
you
don’t
have
to
restart
the
app!

28. Profiles
–
Resources
• Customizing
Profiles
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_Profiles_ic45
• Customizing
IBM
Connec1ons
4.0
Profiles
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_IBM_Connec1ons_4.0_Profiles
• Profile
Types
and
locking
profile
features
(Wannes
Rams)
hap://www.slideshare.net/palmke/profile-­‐types-­‐and-­‐locking-­‐profile-­‐features-­‐15498931
• A
Profiles
is
the
key
to
a
users’
Connec1ons
iden1ty.
Exploit
it!
(Stuart
McIntyre&Wannes
Rams)
hap://www.slideshare.net/palmke/profile-­‐types-­‐and-­‐locking-­‐profile-­‐features-­‐15498931

29. Advanced
-­‐
Media
gallery
object
types
-­‐
Example
• A
new
photo
template
with
4
fields
added

30. Media
gallery
object
types
–
How
to
• Create
XML
document
that
defines
CMIS
(Content
Management
Interoperability
Services)
object
type
for
your
custom
photo
or
video
file
• Add
the
key
value
pairs
to
com.ibm.lconn.files.strings.cmis_*.proper5es

31. Media
gallery
object
types
–
How
to
• This
is
how
a
choice
list
looks
like

32. Media
gallery
object
types
–
Resources
• Import
the
new
object
type
– FilesObjectTypeService.importType("path_cmis_file")!
• Restart
the
Files
app
• Add
the
new
template
as
default
template
for
a
community

33. Media
gallery
object
types
–
Resources
• Crea1ng
custom
media
gallery
object
types
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Crea1ng_custom_media_gallery_object_types_ic45
• Files
administra1ve
commands
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Files_administra1ve_commands_ic45
• Having
fun
with
CMIS
object
types
in
IBM
Connec1ons
hap://kbild.ch/2013/08/fun-­‐cmis-­‐object-­‐types-­‐ibm-­‐connec1ons/

34. Document
Types
(CCM)
-­‐
Example

35. Document
Types
(CCM)
–
How
to
• Open
the
Administra1on
Console
for
Content
Plaqorm
Engine
(hap://yourserver.com/acce)
and
logon
as
CCM
Admin
• Open
the
ICObjectStore
and
add
your
new
fields
to
Data
Design
–
Property
Templates
• Create
new
Document
Type
in
Data
Design
–
Classes
-­‐
Document

36. Document
Types
(CCM)
–
How
to
• Open
as
community
owner
a
community
where
you
want
to
use
the
new
document
type
• Go
to
Community
Ac5ons
–
Edit
Community
–
Library
and
allow
members
to
change
the
Document
Type

37. Document
Types
(CCM)
–
Resources
• Crea1ng
and
managing
document
types
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Crea1ng_and_managing_document_types_ic45
• Create
new
document
types
in
IBM
Connec1ons
Content
Manager
(Roberto
Boccadoro)
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Create_new_document_types_in_IBM_Connec1ons_Content_Manager

38. Pro
-­‐Richtext
Editor
-­‐
Example
• Adding
of
3
plugins:
hap://www.youtube.com/watch?v=tFpkBOoOmaE
Maximize
As
the
name
suggests,
it
maximizes
the
editor
inside
a
browser
window
Templates
This
plugin
provides
a
dialog
to
offer
predefined
content
templates
–
with
page
layout,
text
formaVng
and
styles.
Business
Card
hover
This
custom
build
plugin
lets
you
easily
add
links
to
a
persons
Business
Card
(hover
effect)

39. How
to
–
Business
Card
• You
have
to
know
how
to
create
CKEditor
Plugins
• Place
your
plugin
in
…customiza1onjavascriptcomibmoneuickeditoreditorplugins

40. How
to
–
Business
Card
• Copy
ckeditor.js
from
inside
…sharedprovisionwebresourcescom.ibm.lconn.blogs.web.resources_*.jar
to
D:IBMDatasharedcustomiza1onjavascriptlconnblogs
(or
wikis)
• Add
the
new
plugin
to
ckeditor.js

41. Richtext
Editor
–
Resources
• CKEditor
Tutorials
hap://docs.cksource.com/CKEditor_3.x/Tutorials
• Tutorial
–
Extending
the
IBM
Connec1ons
Rich
Text
Editor
(Rob
Novak)
hap://ibmrockstar.com/2013/05/tutorial-­‐extending-­‐the-­‐ibm-­‐connec1ons-­‐rich-­‐text-­‐editor

42. Reports
-­‐
Example
Number
of
visits
per
App
over
the
3me

43. Reports
–
How
to
• Define
the
custom
report
&
check
dimensions/events
–
Pencil&Paper
• Create
Report
with
IBM
Cognos
Report
Studio
(I
would
recommend
to
use
Firefox
Version
3.5/3.6!)
• Add
Report
to
Global/Community
Report
list

44. Reports
–
Resources
• Community
report
customiza1on
for
Connec1ons
4.0
Metrics
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Community_report_customiza1on_for_Connec1ons_4.0_Metrics
• Create
new
Cognos
metrics
report
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Connec1ons_4.0_Metrics_customiza1oncol_create_new_Cognos_metrics_report
• Customizing
reports
based
on
the
events
captured
in
Metrics
4.0
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Customizing_reports_based_on_the_events_captured_in_Metrics4.0
• Give
your
community
owners
the
reports
they
really
need
hap://www.slideshare.net/kbild/give-­‐your-­‐community-­‐owners-­‐the-­‐reports-­‐they-­‐really-­‐need

45. Extras
-­‐
Desktop
Plugin
-­‐
Example
It’s
possible
to
customize
images/text

46. Desktop
Plugin
–
How
to
(1)
• Edit
the
registry
sewngs:
[HKEY_CLASSES_ROOTCLSID{21034BDC-B57E-400B-A5D5-2B1E98502805}]!
@="Belsoft Connections"!
"InfoTip"="Belsoft Connections"!
!
[HKEY_CLASSES_ROOTCLSID{21034BDC-B57E-400B-A5D5-2B1E98502805}DefaultIcon]!
@="C:PATH_TO_IMAGEimage256.ico"!
!
[HKEY_LOCAL_MACHINESOFTWAREWow6432NodeIBMSocial ConnectorsBranding]!
"Main Title"="Belsoft Connections"!
!
[HKEY_LOCAL_MACHINESOFTWAREWow6432NodeIBMSocial ConnectorsBrandingMonitor]!
"SystemTray Idle Image"="C:PATH_TO_IMAGEimage16.ico"!
"SystemTray Pending Image"="C:PATH_TO_IMAGEimage16pending.ico"!
"SystemTray Busy Image"="C:PATH_TO_IMAGEimage16busy.ico"!
"SystemTray Title"="Belsoft Connections"!
!

47. Desktop
Plugin
–
How
to
(2)
[HKEY_LOCAL_MACHINESOFTWAREWow6432NodeIBMSocial ConnectorsBrandingOffice]!
"Backstage SendTo Image"="C:PATH_TO_IMAGEimage32.bmp"!
"Backstage SendTo Title"="Belsoft Connections"!
"RibbonTab Title"="Belsoft Connections"!
!
[HKEY_LOCAL_MACHINESOFTWAREWow6432NodeIBMSocial ConnectorsBrandingOutlook]!
"ContextMenu ContactCard Image"="C:PATH_TO_IMAGEimage16.bmp"!
"ContextMenu ContactCard Title"="Belsoft Connections"!
"Menu Title"=" Belsoft Connections"!
"Toolbar Title"="Belsoft Connections"!
"Inspector RibbonTab Title"="Belsoft Connections"!
"Explorer RibbonTab Title"="Belsoft Connections"!
!
[HKEY_LOCAL_MACHINESOFTWAREWow6432NodeIBMSocial ConnectorsBrandingShellExt]!
"ContextMenu Image"="C:PATH_TO_IMAGEimage13.bmp"!
"ContextMenu Title"=" Belsoft Connections"!
!

48. Desktop
Plugin
–
Resources
• Customizing
the
branding
strings
and
images
for
the
desktop
plug-­‐in
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Customizing_the_branding_strings_and_images_for_the_desktop_plugin_lv45

49. Wiki
Welcome
-­‐
Example
It’s
possible
to
customize
the
page
3tle
and
html
code

50. Wiki
Welcome
–
How
to
• Create
com.ibm.lconn.share.services.handlers.wiki.nls.WikiWelcomeMessages_*.proper5es
in
…customiza1onstrings
and
add
your
1tle,
html
code
• Restart
the
Wiki
App

51. Wiki
Welcome
–
Resources
• Customizing
the
Wikis
welcome
page
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45

52. Mobile
App
-­‐
Example

53. Mobile
App
–
How
to
• Check
out
mobile-­‐config.xml
and
add
following

54. Mobile
App
–
How
to
• Check
in
mobile-­‐config.xml
and
add
images
to
…customiza1onmobile
• Sync
nodes
and
restart
Mobile
App

55. Mobile
App
–
Resources
• Mobile
configura1on
proper1es
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Mobile_configura1on_proper1es_ic45

56. Further
Resources
• Customizing
the
IBM
Connec1ons
3.0.1
UI:
Different
Themes
in
a
Single
Installa1on
(Roberto
Boccadoro,
Andrea
Fontana)
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/
Customizing_the_IBM_Connec1ons_3.0.1_UI_Different_Themes_in_a_Sin
gle_Installa1on
• AusLUG
2011
customising
ibm
connec1ons
(Adam
Brown)
hap://de.slideshare.net/adambrownaus/auslug-­‐2011-­‐customising-­‐ibm-­‐
connec1ons
• IBM
Redbooks:
Customizing
IBM
Connec1ons
3.0.1
hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/xpViewCategories.xsp?
lookupName=IBM%20Redbooks:%20Customizing%20IBM%20Connec1ons
%203.0.1
• Customizing
&
Beau1fying
Connec1ons
–
Who’s
the
fairest
of
them
all?
(Sharon
Bellamy)
hap://www.slideshare.net/dillechnical/connec1ons-­‐customiza1on-­‐lite

57. What
you
have
not
seen
• Widgets
• Open
Social
gadgets
• Custom
Applica1ons

58. What
you
have
seen

59. Ques1ons?
Thank
you!
kbild.ch
twitter.com/kbild
linkedin.com/in/kbild

60. Grazie
agli
sponsor
per
aver
reso
possibile
i
Dominopoint
Days
2013!
Main
Sponsor
Vad
sponsor
Pla1num
sponsor
Gold
sponsor