This session was held at the Engage UG Event in Breda (NL) 2014. IBM Connections offers a lot of customization possibilities to enable you to have the platform comply to your corporate standards or exhaustive needs. In this session we will explore all customization options available and will show you examples on customizations on UI, notifications, profiles, Richtext Editor, metric reports and more. This will allow you to better decide what you want to customize and should offer you a technical starting point for your own customizations

1. Make
Your
IBM
Connec/ons
Deployment
Your
Own:
Customize
It!
Klaus
Bild,
Belso@
AG
Wannes
Rams,
GFI
1
#engageug

2. About
Us
–
Klaus
Bild
2
#engageug
kbild.ch
twitter.com/kbildlinkedin.com/in/kbild

3. About
Us
–
Wannes
Rams
3
#engageug
wannes.rams.be
twitter.com/wannesramslinkedin.com/in/wannesrams

4. About
this
Presenta/on
http://www.slideshare.net/palmke/show301-make-your-ibm-connections-deployment-your-own-
customize-it-30628456
4
#engageug

5. Goal
of
this
Presenta/on
5
#engageug
Show you live what
can be customized
and give you a starting point
for your
own customizations

6. Agenda
in
Orlando
• Introduction
• User Interface
• Login Page
• Notifications
• Getting Started Page
• Communities
• Wikis
• Profiles
• Richtext Editor
• Media Gallery Object
Types
• Mobile App
• Reports
• Desktop Plugin
• IBM Connections Content
Manager
6
#engageug

7. Todays
Agenda
• Introduction
• User Interface
• Login Page
• Notifications
• Getting Started Page
• Communities
• Wikis
• Profiles
• Richtext Editor
• Introduction
• Notifications
• Profile Types
• Wikis
• Profiles Widgets
• Richtext Editor
7
#engageug

8. Introduc/on
–
So,
who
are
you?
8
#engageug

9. Introduc/on
–
Our
environment
• Microsoft Windows Server 2008 R2
• IBM Connections 4.5 CR3 (IBM Domino LDAP, single box
installation)
• CONNECTIONS_CUSTOMIZATION_DEBUG enabled
• Next Generation Theme
• Profile templateReloading in profiles-config.xml set to 15 secs
• Login credentials stored in soap.client.properties
-> Always disable debug & reloading settings in production!
9
#engageug

10. Introduc/on
–
Remarks
• We use following abbreviations:
• custom_dir:
Customiza/on
directory,
check
the
WebSphere
variable
CONNECTIONS_CUSTOMIZATION_PATH
(here
D:IBMConnectionsdatasharedcustomization )
• provision_dir:
Provision
directory,
check
the
WebSphere
variable
CONNECTIONS_PROVISION_PATH
(here
D:IBMConnectionsdatasharedprovision)
• profiles_dir:
WebSphere
profiles
directory
(here
D:IBMWebSphereAppServerprofiles)
• htdocs:
HTTP
Server
htdocs
directory
(here
D:IBMHTTPServerhtdocs)
10
#engageug

11. No/fica/ons
–
Example
11
#engageug
Custom colors, logo
Custom
text
Changed
sender

12. No/fica/ons
–
Example
12
#engageug
Change default weekly
newsle8ers to daily

13. How
to
–
Change
Text
• Open following folder:
profiles_dirDmgr01configcells
connectionsCell01LotusConnections-confignotifications
• Here you can find the source files for all the different notifications
13
#engageug

14. How
to
–
Change
Text
• Open notification(_en).properties in the resourcesnls folder
14
#engageug

15. How
to
–
Change
Text
• Change the text IBM Connections to IBM Connect 14
• Do the same for each language file which you want to use
15
#engageug

16. How
to
–
Change
Text
• Go back to the notifications folder and now open the
notification(_en).properties in newsresourcesnls
• Change every occurrence of IBM Connections to IBM Connect 14
16
#engageug

17. How
to
–
Change
Logo
and
Colors
• Go back to the notifications folder and now open the style.ftl in
newsaggregated
• Change every occurrence of color #474747 to #025d9c
17
#engageug

18. How
to
–
Change
Logo
and
Colors
• Change the referenced footer image from ibmLogoWhite23.png to
ibmconnect.png
18
#engageug

19. How
to
–
Change
Logo
and
Colors
• Go back to notification and copy ibmconnect.png to resourcesimages
19
#engageug

20. How
to
–
Change
Logo
and
Colors
• Open WAS Administrative Console and navigate to „Applications –
WebSphere enterprise applications“
• Stop an Start
the News App
20
#engageug

21. How
to
–
Change
Default
No/fica/ons
Segngs
• Start the wsadmin client and execute connectionsConfig.py
• Check out the notification-config.xml
LCConfigService.checkOutNotificationConfig('D:/temp','connectionsCell01’)
21
#engageug

22. How
to
–
Change
Default
No/fica/ons
Segngs
• Open notification-config.xml in D:temp
• Change properties for sender and mobile links
22
#engageug

23. How
to
–
Change
Default
No/fica/ons
Segngs
• Change all defaultFollowFrequency="WEEKLY” to
defaultFollowFrequency=”DAILY"
23
#engageug

24. How
to
–
Change
Default
No/fica/ons
Segngs
• Close the file and check it in
LCConfigService.checkInNotificationConfig()
• Execute newsAdmin.py
24
#engageug

25. How
to
–
Change
Default
No/fica/ons
Segngs
• Run following command to refresh the default Email settings:
NewsEmailDigestService.refreshDefaultEmailPrefsFromConfig()
25
#engageug

26. Result
–
Change
Default
No/fica/ons
Segngs
• Check the new settings in the browser by resetting to default notifications settings
26
#engageug

27. Result
–
Change
Logo
and
Colors
• You can trigger the email digests by accessing the following URL to verify
your settings (admin will only receive digest)
http://connections.snt.com/news/web/testEmailDigestSendMail.action?type=daily
• Or for all users
http://connections.snt.com/news/web/testEmailDigestSendMail.action?type=daily&initNextTranche=true
27
#engageug

28. Result
–
Change
Logo
and
Colors
• Check Newsletters in your mail client (Desktop and Mobile)
28
#engageug
Mail on Mobile

29. No/fica/ons
–
Resources
• Customizing notifications
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_notifications_ic45
• Including mobile links in notifications
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Including_mobile_links_in_notifications_ic45
• Setting the default frequency of email digests
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Setting_the_default_frequency_of_email_digests_ic45
• Verifying email digests
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Verifying_email_digests_ic45
29
#engageug

30. Profiles
Types
-­‐
Introduc/on
30
#engageug
• In
this
part
we
will
add
a
second
profile
type.
This
profile
type
will
contain
only
a
subset
of
the
profile
ajributes
that
the
default
profile
will
have.
We
will
also
disable
widgets
based
on
the
profile
• What
are
profile
types
• Defini/on
of
different
types
of
users
• Allows
to
change
look
and
feel
of
the
profiles
applica/on
• Example:
customer,
employee,
contractor
• Why
use
profile
types
• Show
different
data
for
different
types
of
users
• Block
certain
features
• Block
built
in
widgets
• Block
custom
widgets
• Limit
informa/on
stream
• Phase
a
rollout

31. Profiles
Types
–
Example
31
#engageug

32. How
to
–
Profile
Types
• First thing we need to decide is what field in LDAP will define the profile
type.
In this example we will use an existing field that is not used for anything
else
• Now we need to configure TDI to add the profile type to the Profiles
database. Alter the map_dbrepos_from_source.properties file in
your TDI Solution directory and map profileType to your field in LDAP
32
#engageug

33. How
to
–
Profile
Types
• Now run your TDI sync command
• This is what you will see in the Employee database
33
#engageug

34. How
to
–
Profile
Types
• Start the wsadmin client and execute profilesAdmin.py
• Check out the profiles-config.xml
ProfilesConfigService.checkOutConfig('D:/temp','connectionsCell01’)
34
#engageug

35. How
to
–
Profile
Types
• We need to define the profile types and the profile fields we want to show in
the file profiles-types.xml
35
#engageug

36. How
to
–
Profile
Types
36
#engageug

37. How
to
–
Profile
Types
• We can now disable profile features or widgets based on the profile type.
We will start with the profile features
• Open profiles-policy.xml and add the desired configuration
37
#engageug

38. How
to
–
Profile
Types
• Check in the profiles configuration
ProfilesConfigService.checkInConfig()
38
#engageug

39. How
to
–
Profile
Types
• Open WAS Administrative Console and navigate to “Applications –
WebSphere enterprise applications”
• Stop and Start
the Profiles App
39
#engageug

40. Result
–
Profile
Types
• Login with the external user
40
#engageug
Tagging
enabled
when
logged on
as external
user
No Twitter Id

41. Result
–
Profile
Types
41
#engageug
Tagging disabled No invitation
button Disabled
• Login with the internal user

42. How
To
–
Profile
Types
• We will now disable widgets based on the profile type
• Check out the widget configuration.
• Disable the widgets you don’t want to show in widgets-config.xml
42
#engageug

43. How
To
–
Profile
Types
• Check in the widget configuration again and restart the profiles application
43
#engageug

44. Result–
Profile
Types
44
#engageug
Tags and sand gone
Tabs gone All widgets gone except
links

45. Profile
Types–
Resources
• Customizing Profiles
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_Profiles_ic45
• Phasing an IBM Connections Rollout? Profile Types May Be the Answer
https://www-304.ibm.com/connections/blogs/socialbusiness/entry/
phasing_an_ibm_connections_rollout_profile_types_may_be_the_answer4
• Profile types and locking profile features
http://www.slideshare.net/palmke/profile-types-and-locking-profile-features-1549893
45
#engageug

46. Wikis
–
Example
46
#engageug

47. How
to
–
Welcome
Page
• Create a new Wiki and click edit
• Change the Welcome Page to your needs, we will use it as template for the
customization
• Switch to the HTML Source view and copy the HTML code
47
#engageug

48. How
to
–
Welcome
Page
• Paste the HTML code into a file and remove all “end of lines” (EOL)
48
#engageug

49. How
to
–
Welcome
Page
• Create
com.ibm.lconn.share.services.handlers.wiki.nls.WikiWelcomeMes
sages_en.properties
in custom_dirstrings and add your title and HTML code (one line!)
• Create a property file for every language you want to support
49
#engageug

50. How
to
–
Welcome
Page
• Open WAS Administrative Console and navigate to “Applications –
WebSphere enterprise applications”
• Stop and Start
the Wikis App
50
#engageug

51. Result
–
Welcome
Page
• Create a new Wiki
51
#engageug

52. Wiki
–
Resources
• Customizing the Wikis welcome page
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45
52
#engageug

53. Profiles
–
Example
53
#engageug
Office address displayed on Google Maps

54. How
to
–
Widget
• Create your widget called googleMap.xml in custom_dirprofiles
54
#engageug

55. How
to
–
Widget
55
#engageug

56. How
to
–
Widget
56
#engageug
http://kbild.ch/2014/02/google-maps-widget-ibm-connections-profiles/

57. How
to
–
Widget
• Now we add the widget to our Connections profiles, start the wsadmin
client and execute profilesAdmin.py
• Check out the widgets-config.xml
ProfilesConfigService.checkOutWidgetConfig('D:/temp','connectionsCell01')
57
#engageug

58. How
to
–
Widget
• Open widgets-config.xml in D:temp
• Add your new widget
58
#engageug

59. How
to
–
Widget
• Check in widgets-config.xml
ProfilesConfigService.checkInWidgetConfig()
59
#engageug

60. How
to
–
Widget
• Open WAS Administrative Console and navigate to “Applications –
WebSphere enterprise applications”
• Stop and Start
the Profiles App
60
#engageug

61. Profiles
–
Result
• Open a profile and test your widget
61
#engageug

62. Profiles
–
Resources
• Adding custom widgets to Profiles
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Adding_custom_widgets_to_Profiles_ic45
• Customizing IBM Connections – Modifying the Report-To Chain iWidget to include
profile data retrieved via Ajax (Hunter Medney)
https://www.ibm.com/developerworks/community/blogs/hmedney/entry/
customizing_connections_modifying_the_report_to_chain_widget_using_profile_data
• Connections iWidget Development Guide
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/development-guide
• Easy as a pie – Creating Widgets for IBM Connections (Mikkel Heisterberg)
http://www.slideshare.net/lekkim/bp207-easy-as-pie-creating-widgets-for-ibm-connections
• Customizing IBM Connections 4.0 Profiles
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_IBM_Connections_4.0_Profiles
62
#engageug

63. Profiles
–
Resources
• Customizing Profiles
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_Profiles_ic45
• Phasing an IBM Connections Rollout? Profile Types May Be the Answer
https://www-304.ibm.com/connections/blogs/socialbusiness/entry/
phasing_an_ibm_connections_rollout_profile_types_may_be_the_answer4
• Profile types and locking profile features
http://www.slideshare.net/palmke/profile-types-and-locking-profile-features-15498931
• How to Create a Perfect Profile: A Hitchiker’s Guide to A Smarter Workforce
http://www.slideshare.net/curiousmitch/show304
63
#engageug

64. Richtext
Editor
–
Example
64
#engageug

65. Richtext
Editor
–
How
to
• You have to know how to create CKEditor Plugins
http://docs.cksource.com/CKEditor_3.x/Tutorials
• Create your Business Card plugin
65
#engageug
http://kbild.ch/2014/02/business-card-function-ibm-connections-richtext-editor/

66. Richtext
Editor
–
How
to
• Place your plugin in
custom_dirjavascriptcomibmoneuickeditoreditorplugins
66
#engageug

67. Richtext
Editor
–
How
to
• Open
provision_dirwebresourcescom.ibm.lconn.blogs.web.resources_*.jar
with a zip program and extract ckeditor.js from resources folder
67
#engageug

68. Richtext
Editor
–
How
to
• Copy ckeditor.js to custom_dirjavascriptlconnblogs (or wikis)
68
#engageug

69. Richtext
Editor
–
How
to
• Open ckeditor.js and add the new plugin
69
#engageug

70. Richtext
Editor
–
How
to
• Open WAS Administrative Console and navigate to “Applications –
WebSphere enterprise applications”
• Stop and Start
the Common App
70
#engageug

71. Richtext
Editor
–
Result
• Refresh your browser cache
• Create a new Blog entry and test the plugin
71
#engageug

72. Richtext
Editor
–
Resources
• CKEditor Tutorials
http://docs.cksource.com/CKEditor_3.x/Tutorials
• Tutorial – Extending the IBM Connections Rich Text Editor
(Rob Novak)
http://ibmrockstar.com/2013/05/tutorial-extending-the-ibm-
connections-rich-text-editor
72
#engageug

73. Further
Examples
73
#engageug

74. Further
Examples
74
#engageug

75. Ques/ons
75
#engageug

76. Thank
You!
76
#engageug
http://www.gfi.be
http://linkedin.com/in/wannesrams
http://twitter.com/wannesrams
http://wannes.rams.be
http://slideshare.com/palmke
http://belsoft.ch
http://youtube.com/belsoftag
http://linkedin.com/in/kbild
http://twitter.com/kbild
http://kbild.ch
http://slideshare.com/kbild