customize it! make ibm connections look your way
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
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
About me
kbild.ch
twitter.com/kbild
linkedin.com/in/kbild
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)
Agenda
• Easy -‐> css, jsp, well documented • Intermediate -‐> wsadmin • Advanced -‐> badly documented, xml, Admin UI’s
• 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 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
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/
No3fica3ons -‐ Example
Custom text
Custom colors, logo
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\
No3fica3ons – How to
• Special Tipp: Enable mobile links in no1fica1ons -‐> no5fica5on-‐config.xml <property name="includeMobileLinksInNotifications">true</property>!
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
Intermediate -‐ Blog -‐ Example
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
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 …\customiza1on\themes\nameTheme\
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
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
Profiles -‐ Example
Added home address which can be opened in Google Maps
Click to Call Addi3onal Tab
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
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
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> !
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!
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
Advanced -‐ Media gallery object types -‐ Example
• A new photo template with 4 fields added
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
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 fields 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 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)
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\
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
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
• 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
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
It’s possible to customize images/text
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"!
!
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"!!
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 It’s 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 …\customiza1on\strings\ and add your 1tle, html code
• Restart the Wiki App
Wiki Welcome – Resources
• Customizing the Wikis welcome pagehap://www-‐10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45
Mobile App -‐ Example
Mobile App – How to
• Check out mobile-‐config.xml and add following
Mobile App – How to
• Check in mobile-‐config.xml and add images to …\customiza1on\mobile\
• Sync nodes and restart Mobile App
Mobile App – Resources
• Mobile configura1on proper1es hap://www-‐10.lotus.com/ldd/lcwiki.nsf/dx/Mobile_configura1on_proper1es_ic45
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
What you have not seen
• Widgets
• Open Social gadgets
• Custom Applica1ons
What you have seen
[slide finale]
Ques1ons?
Thank you!
Your final slide La tua ultima slide
kbild.ch twitter.com/kbild
linkedin.com/in/kbild
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