Customize it! Make IBM Connections look your way

Click here to load reader

Embed Size (px)

description

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.

Transcript of Customize it! Make IBM Connections look your way

  • Customize it! Make IBM Connec3ons look your way Klaus Bild
  • About me kbild.ch twitter.com/kbild linkedin.com/in/kbild
  • Agenda Easy (User Interface, No1ca1ons) Intermediate (Blog, Communi1es, Proles) Advanced (Document types, Media gallery object types) Pro (Richtext Editor, Reports) Extras (Desktop Plugin/Wikis Welcome/ Mobile App)
  • Agenda Easy -> css, jsp, well documented Intermediate -> wsadmin Advanced -> badly documented, xml, Admin UIs Pro -> complex, tools/editors, bad documented
  • So, who are you?
  • Goal Show you what can be customized and give you a star3ng point for your own customiza3ons
  • Easy User Interface - Example Custom Menu Custom permanent Link Custom colors, logos, styles
  • User Interface How to For all these changes only 2 les 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
  • User Interface How to
  • 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/
  • No3ca3ons - Example Custom text Custom colors, logo
  • No3ca3ons How to For all these changes 3 les were changed and 1 was added resourcesnlsno5ca5on.proper5es (text) newsresourcesnlsno5ca5on.proper5es (text) newsaggregatedstyle.4l (colors, logo) Added resourcesimagesbelso4.png Full path: WAS_prolesDmgr01congcellsCELLLotusConnec1ons-congno1ca1ons
  • No3ca3ons How to Special Tipp: Enable mobile links in no1ca1ons -> no5ca5on-cong.xml true!
  • No3ca3ons Resources Customizing no1ca1ons hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_no1ca1ons_ic45 Including mobile links in no1ca1ons hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Including_mobile_links_in_no1ca1ons_ic45
  • Intermediate - Blog - Example
  • Blog Remarks You can only customize non Community Blogs! I dont see a clear roadmap for Blog customiza1ons I would not recommend to customize Blogs
  • 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
  • Communi3es - Example
  • Communi3es How to Take defaultTheme.css as template and create a new theme css (nameTheme.css) in folder customiza1onthemesnameTheme
  • Communi3es How to Add your new theme to Communi1es Check out communi5es-cong.xml and add theme Checkin communi5es-cong.xml Add com.ibm.lconn.communi5es.strings.ui.proper5es to strings folder and add your labels
  • 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
  • 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
  • Proles - Example Added home address which can be opened in Google Maps Click to Call Addi3onal Tab
  • Proles How to Home address Create a resource bundle for your labels Check out LotusConnec5ons-cong.xml and add bundle Check in LotusConnec5ons-cong.xml Create property le for each language
  • Proles How to Home address Check out proles-cong.xml and add aaribute DO NOT Check in proles-cong.xml YET Open proles-types.xml and add
  • Proles How to Home address Open proleDetails.ll and add following code to the contactInforma1on sec1on: ! ! ! ! !
  • Proles How to Home address Open proleEdit.4l and add following code to the contactInforma1on sec1on: ! Check in proles-cong.xml and restart proles app Power Tipp: If you enable templateReloading in proles-cong.xml you dont have to restart the app!
  • Proles Resources Customizing Proles hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_Proles_ic45 Customizing IBM Connec1ons 4.0 Proles hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_IBM_Connec1ons_4.0_Proles Prole Types and locking prole features (Wannes Rams) hap://www.slideshare.net/palmke/prole-types-and-locking-prole-features-15498931 A Proles is the key to a users Connec1ons iden1ty. Exploit it! (Stuart McIntyre&Wannes Rams) hap://www.slideshare.net/palmke/prole-types-and-locking-prole-features-15498931
  • Advanced - Media gallery object types - Example A new photo template with 4 elds added
  • Media gallery object types How to Create XML document that denes CMIS (Content Management Interoperability Services) object type for your custom photo or video le Add the key value pairs to com.ibm.lconn.les.strings.cmis_*.proper5es
  • Media gallery object types How to This is how a choice list looks like
  • 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
  • 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/
  • Document Types (CCM) - Example
  • 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 elds to Data Design Property Templates Create new Document Type in Data Design Classes - Document
  • 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
  • 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
  • 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 oer predened 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 eect)
  • How to Business Card You have to know how to create CKEditor Plugins Place your plugin in customiza1onjavascriptcomibmoneuickeditoreditorplugins
  • 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
  • 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
  • Reports - Example Number of visits per App over the 3me
  • Reports How to Dene 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
  • 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
  • Extras - Desktop Plugin - Example Its possible to customize images/text
  • 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"! !
  • 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"! !
  • 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
  • Wiki Welcome - Example Its possible to customize the page 3tle and html code
  • 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
  • Wiki Welcome Resources Customizing the Wikis welcome page hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45
  • Mobile App - Example
  • Mobile App How to Check out mobile-cong.xml and add following
  • Mobile App How to Check in mobile-cong.xml and add images to customiza1onmobile Sync nodes and restart Mobile App
  • Mobile App Resources Mobile congura1on proper1es hap://www-10.lotus.com/ldd/lcwiki.nsf/dx/Mobile_congura1on_proper1es_ic45
  • Further Resources Customizing the IBM Connec1ons 3.0.1 UI: Dierent 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_Dierent_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 Whos the fairest of them all? (Sharon Bellamy) hap://www.slideshare.net/dillechnical/connec1ons-customiza1on-lite
  • What you have not seen Widgets Open Social gadgets Custom Applica1ons
  • What you have seen
  • Ques1ons? Thank you! kbild.ch twitter.com/kbild linkedin.com/in/kbild
  • Grazie agli sponsor per aver reso possibile i Dominopoint Days 2013! Main Sponsor Vad sponsor Pla1num sponsor Gold sponsor