Download - Customize it! Make IBM Connections look your way

Transcript
Page 1: Customize it! Make IBM Connections look your way

Customize  it!  

Make  IBM  Connec3ons  look  your  way  –  Klaus  Bild  

Change with your picture, add a 4pt border color 255,204,0 Cambia con la tua foto, aggiungi un bordo spesso 4pt colore 255,204,0

Please make sure that your slide deck renders fine in Lotus Symphony Per favore controlla che le tue slide si vedano bene con Lotus Symphony

Page 2: Customize it! Make IBM Connections look your way

About  me  

kbild.ch

twitter.com/kbild

linkedin.com/in/kbild

Page 3: Customize it! Make IBM Connections look your way

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)  

Page 4: Customize it! Make IBM Connections look your way

Agenda  

•  Easy  -­‐>  css,  jsp,  well  documented  •  Intermediate  -­‐>  wsadmin  •  Advanced  -­‐>  badly  documented,  xml,  Admin  UI’s  

•  Pro  -­‐>  complex,  tools/editors,  bad  documented  

Page 5: Customize it! Make IBM Connections look your way

So,  who  are  you?  

Page 6: Customize it! Make IBM Connections look your way

Goal  

Show  you  what  can  be  customized  and  give  you  a  star3ng  point  for  

your  own  customiza3ons  

Page 7: Customize it! Make IBM Connections look your way

Easy  –  User  Interface  -­‐  Example  Custom  Menu  

Custom  permanent  Link  

Custom  colors,  logos,  styles  

Page 8: Customize it! Make IBM Connections look your way

User  Interface  –  How  to  

•  For  all  these  changes  only  2  files    were  changed  and  3  were  added  

–  …\customiza1on\common\nav\templates\header.jsp  

–  …\com.ibm.social.gen4.theme_4.0.0.20130627-­‐1409.jar\resources\css\defaultTheme\defaultTheme.css  

–  …\customiza1on\common\nav\templates\menu\belso4.jsp  

–  belso4solu5ons.png,  ques5on.png  

Page 9: Customize it! Make IBM Connections look your way

User  Interface  –  How  to  

Page 10: Customize it! Make IBM Connections look your way

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/  

 

Page 11: Customize it! Make IBM Connections look your way

No3fica3ons  -­‐  Example  

Custom  text  

Custom  colors,  logo  

Page 12: Customize it! Make IBM Connections look your way

No3fica3ons  –  How  to  

•  For  all  these  changes  3  files    were  changed  and  1  was  added  

•  …\resources\nls\no5fica5on.proper5es  (text)  

•  …\news\resources\nls\no5fica5on.proper5es  (text)  

•  …\news\aggregated\style.4l  (colors,  logo)  

•  Added  …\resources\images\belso4.png  

Full  path:    WAS_profiles\Dmgr01\config\cells\CELL\LotusConnec1ons-­‐config\no1fica1ons\  

Page 13: Customize it! Make IBM Connections look your way

No3fica3ons  –  How  to  

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

Page 14: Customize it! Make IBM Connections look your way

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  

Page 15: Customize it! Make IBM Connections look your way

Intermediate  -­‐  Blog  -­‐  Example  

Page 16: Customize it! Make IBM Connections look your way

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  

Page 17: Customize it! Make IBM Connections look your way

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  

Page 18: Customize it! Make IBM Connections look your way

Communi3es  -­‐  Example  

Page 19: Customize it! Make IBM Connections look your way

Communi3es  –  How  to  

•  Take  defaultTheme.css  as  template  and  create  a  new  theme  css  (nameTheme.css)  in  folder    …\customiza1on\themes\nameTheme\  

Page 20: Customize it! Make IBM Connections look your way

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  

Page 21: Customize it! Make IBM Connections look your way

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  

Page 22: Customize it! Make IBM Connections look your way

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  

Page 23: Customize it! Make IBM Connections look your way

Profiles  -­‐  Example  

Added  home  address  which  can  be  opened  in  Google  Maps  

Click  to  Call   Addi3onal  Tab  

Page 24: Customize it! Make IBM Connections look your way

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  

Page 25: Customize it! Make IBM Connections look your way

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  

   

Page 26: Customize it! Make IBM Connections look your way

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> !  

Page 27: Customize it! Make IBM Connections look your way

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!  

Page 28: Customize it! Make IBM Connections look your way

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  

Page 29: Customize it! Make IBM Connections look your way

Advanced  -­‐  Media  gallery  object  types  -­‐  Example  

•  A  new  photo  template  with  4  fields  added    

Page 30: Customize it! Make IBM Connections look your way

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  

Page 31: Customize it! Make IBM Connections look your way

Media  gallery  object  types  –  How  to  

•  This  is  how  a  choice  list  looks  like    

Page 32: Customize it! Make IBM Connections look your way

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  

Page 33: Customize it! Make IBM Connections look your way

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/  

Page 34: Customize it! Make IBM Connections look your way

Document  Types  (CCM)  -­‐  Example  

Page 35: Customize it! Make IBM Connections look your way

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  

Page 36: Customize it! Make IBM Connections look your way

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  

Page 37: Customize it! Make IBM Connections look your way

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  

Page 38: Customize it! Make IBM Connections look your way

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)  

Page 39: Customize it! Make IBM Connections look your way

How  to  –  Business  Card  

•  You  have  to  know  how  to  create  CKEditor  Plugins    

•  Place  your  plugin  in    …\customiza1on\javascript\com\ibm\oneui\ckeditor\editor\plugins\  

 

Page 40: Customize it! Make IBM Connections look your way

How  to  –  Business  Card  

•  Copy  ckeditor.js  from  inside  …\shared\provision\webresources\com.ibm.lconn.blogs.web.resources_*.jar    

to  D:\IBM\Data\shared\customiza1on\javascript\lconn\blogs\  (or  wikis)  

•  Add  the  new  plugin  to  ckeditor.js  

Page 41: Customize it! Make IBM Connections look your way

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  

 

Page 42: Customize it! Make IBM Connections look your way

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

Page 43: Customize it! Make IBM Connections look your way

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  

Page 44: Customize it! Make IBM Connections look your way

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  

Page 45: Customize it! Make IBM Connections look your way

Extras  -­‐  Desktop  Plugin  -­‐  Example  

It’s  possible  to  customize  images/text  

Page 46: Customize it! Make IBM Connections look your way

Desktop  Plugin  –  How  to  (1)  •  Edit  the  registry  sewngs:  [HKEY_CLASSES_ROOT\CLSID\{21034BDC-B57E-400B-A5D5-2B1E98502805}]!

@="Belsoft Connections"!

"InfoTip"="Belsoft Connections"!!

[HKEY_CLASSES_ROOT\CLSID\{21034BDC-B57E-400B-A5D5-2B1E98502805}\DefaultIcon]!

@="C:\\PATH_TO_IMAGE\\image256.ico"!

!

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\IBM\Social Connectors\Branding]!"Main Title"="Belsoft Connections"!

!

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\IBM\Social Connectors\Branding\Monitor]!

"SystemTray Idle Image"="C:\\PATH_TO_IMAGE\\image16.ico"!

"SystemTray Pending Image"="C:\\PATH_TO_IMAGE\\image16pending.ico"!"SystemTray Busy Image"="C:\\PATH_TO_IMAGE\\image16busy.ico"!

"SystemTray Title"="Belsoft Connections"!

!

Page 47: Customize it! Make IBM Connections look your way

Desktop  Plugin  –  How  to  (2)  

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\IBM\Social Connectors\Branding\Office]!"Backstage SendTo Image"="C:\\PATH_TO_IMAGE\\image32.bmp"!

"Backstage SendTo Title"="Belsoft Connections"!

"RibbonTab Title"="Belsoft Connections"!

!

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\IBM\Social Connectors\Branding\Outlook]!"ContextMenu ContactCard Image"="C:\\PATH_TO_IMAGE\\image16.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_MACHINE\SOFTWARE\Wow6432Node\IBM\Social Connectors\Branding\ShellExt]!

"ContextMenu Image"="C:\\PATH_TO_IMAGE\\image13.bmp"!

"ContextMenu Title"=" Belsoft Connections"!!

Page 48: Customize it! Make IBM Connections look your way

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  

Page 49: Customize it! Make IBM Connections look your way

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

Page 50: Customize it! Make IBM Connections look your way

Wiki  Welcome  –  How  to  

•  Create  com.ibm.lconn.share.services.handlers.wiki.nls.WikiWelcomeMessages_*.proper5es    

in  …\customiza1on\strings\  and  add  your  1tle,  html  code  

•  Restart  the  Wiki  App  

Page 51: Customize it! Make IBM Connections look your way

Wiki  Welcome  –  Resources  

•  Customizing  the  Wikis  welcome  pagehap://www-­‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45  

Page 52: Customize it! Make IBM Connections look your way

Mobile  App  -­‐  Example  

Page 53: Customize it! Make IBM Connections look your way

Mobile  App  –  How  to  

•  Check  out  mobile-­‐config.xml  and  add  following  

Page 54: Customize it! Make IBM Connections look your way

Mobile  App  –  How  to  

•  Check  in  mobile-­‐config.xml  and  add  images  to    …\customiza1on\mobile\  

•  Sync  nodes  and  restart  Mobile  App  

Page 55: Customize it! Make IBM Connections look your way

Mobile  App  –  Resources  

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

Page 56: Customize it! Make IBM Connections look your way

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_Single_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  

Page 57: Customize it! Make IBM Connections look your way

What  you  have  not  seen  

• Widgets  

•  Open  Social  gadgets  

•  Custom  Applica1ons  

Page 58: Customize it! Make IBM Connections look your way

What  you  have  seen  

Page 59: Customize it! Make IBM Connections look your way

[slide  finale]  

Ques1ons?    

Thank  you!  

Your final slide La tua ultima slide

kbild.ch twitter.com/kbild

linkedin.com/in/kbild

Page 60: Customize it! Make IBM Connections look your way

Grazie  agli  sponsor  per  aver  reso  possibile  i  Dominopoint  Days  2013!  

Keep this as last slide, we’ll send You and updated sponsors slide as soon as we finalize the list Lascia questa come ultima slide, ti manderemo una slide degli sponsor aggiornata appena finalizzeremo l’elenco.

Main  Sponsor        

Vad  sponsor        

Pla1num  sponsor          

Gold  sponsor