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.
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
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/
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
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
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
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/
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
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
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
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