Customize it! Make IBM Connections look your way

5,380 views
4,999 views

Published on

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.

Published in: Self Improvement, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,380
On SlideShare
0
From Embeds
0
Number of Embeds
818
Actions
Shares
0
Downloads
227
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Customize it! Make IBM Connections look your way

  1. 1. Customize  it!   Make  IBM  Connec3ons  look  your  way  –  Klaus  Bild  
  2. 2. About  me   kbild.ch twitter.com/kbild linkedin.com/in/kbild
  3. 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. 4. Agenda   •  Easy  -­‐>  css,  jsp,  well  documented   •  Intermediate  -­‐>  wsadmin   •  Advanced  -­‐>  badly  documented,  xml,  Admin   UI’s   •  Pro  -­‐>  complex,  tools/editors,  bad  documented  
  5. 5. So,  who  are  you?  
  6. 6. Goal   Show  you  what  can  be  customized   and  give  you  a  star3ng  point  for   your  own  customiza3ons  
  7. 7. Easy  –  User  Interface  -­‐  Example   Custom  Menu   Custom  permanent  Link   Custom  colors,  logos,  styles  
  8. 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. 9. User  Interface  –  How  to  
  10. 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. 11. No3fica3ons  -­‐  Example   Custom  text   Custom  colors,  logo  
  12. 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. 13. No3fica3ons  –  How  to   •  Special  Tipp:  Enable  mobile  links  in  no1fica1ons   -­‐>  no5fica5on-­‐config.xml     <property name="includeMobileLinksInNotifications">true</property>!
  14. 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. 15. Intermediate  -­‐  Blog  -­‐  Example  
  16. 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. 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. 18. Communi3es  -­‐  Example  
  19. 19. Communi3es  –  How  to   •  Take  defaultTheme.css  as  template  and  create   a  new  theme  css  (nameTheme.css)  in  folder     …customiza1onthemesnameTheme  
  20. 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. 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. 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. 23. Profiles  -­‐  Example   Added  home  address  which  can  be  opened  in  Google  Maps   Click  to  Call   Addi3onal  Tab  
  24. 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. 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. 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. 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. 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. 29. Advanced  -­‐  Media  gallery  object  types  -­‐  Example   •  A  new  photo  template  with  4  fields  added    
  30. 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. 31. Media  gallery  object  types  –  How  to   •  This  is  how  a   choice  list   looks  like    
  32. 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. 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. 34. Document  Types  (CCM)  -­‐  Example  
  35. 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. 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. 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. 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. 39. How  to  –  Business  Card   •  You  have  to  know  how  to  create  CKEditor   Plugins     •  Place  your  plugin  in     …customiza1onjavascriptcomibmoneuickeditoreditorplugins    
  40. 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. 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. 42. Reports  -­‐  Example   Number  of  visits  per   App  over  the  3me  
  43. 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. 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. 45. Extras  -­‐  Desktop  Plugin  -­‐  Example   It’s  possible  to  customize  images/text  
  46. 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. 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. 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. 49. Wiki  Welcome  -­‐  Example   It’s  possible  to  customize  the  page  3tle  and  html  code  
  50. 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. 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. 52. Mobile  App  -­‐  Example  
  53. 53. Mobile  App  –  How  to   •  Check  out  mobile-­‐config.xml  and  add  following  
  54. 54. Mobile  App  –  How  to   •  Check  in  mobile-­‐config.xml  and  add  images  to     …customiza1onmobile   •  Sync  nodes  and  restart  Mobile  App  
  55. 55. Mobile  App  –  Resources   •  Mobile  configura1on  proper1es   hap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Mobile_configura1on_proper1es_ic45  
  56. 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. 57. What  you  have  not  seen   •  Widgets   •  Open  Social  gadgets   •  Custom  Applica1ons  
  58. 58. What  you  have  seen  
  59. 59. Ques1ons?     Thank  you!   kbild.ch twitter.com/kbild linkedin.com/in/kbild
  60. 60. Grazie  agli  sponsor  per  aver  reso  possibile  i   Dominopoint  Days  2013!   Main  Sponsor        Vad  sponsor        Pla1num  sponsor           Gold  sponsor    

×