Make your IBM connections deployment your own - customize it

972 Aufrufe

Veröffentlicht am

Veröffentlicht in: Soziale Medien
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
972
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
201
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Make your IBM connections deployment your own - customize it

  1. 1. Make Your IBM Connections Deployment Your Own: Customize It! Klaus Bild, Belsoft AG IBM Connect Rheintal 27. März 2014
  2. 2. ©2014BelsoftAG|www.belsoft.ch Über mich kbild.ch twitter.com/kbild linkedin.com/in/kbild
  3. 3. ©2014BelsoftAG|www.belsoft.ch Über diesen Vortrag http://www.slideshare.net/kbild/show301-make-your-ibm-connections-deployment-your-own-customize-it
  4. 4. ©2014BelsoftAG|www.belsoft.ch Agenda an der IBM Connect in Orlando •  Introduction •  User Interface •  Login Page •  Notifications •  Getting Started Page •  Communities •  Wikis •  Profiles •  Richtext Editor Im Slideset auch vorhanden •  Media Gallery Object Types •  Mobile App •  Reports •  Desktop Plugin •  IBM Connections Content Manager
  5. 5. ©2014BelsoftAG|www.belsoft.ch Heutige Agenda •  Introduction •  User Interface •  Login Page •  Notifications •  Getting Started Page •  Communities •  Wikis •  Profiles •  Richtext Editor •  Einleitung •  Benutzeroberfläche •  Benachrichtigungen •  Communities (nur Themes) •  Wikis •  Profile (nur Widget) •  Richtext Editor
  6. 6. ©2014BelsoftAG|www.belsoft.ch Einleitung – Wer ist hier im Publikum?
  7. 7. ©2014BelsoftAG|www.belsoft.ch Einleitung – Ziel der Session? Dieser Vortrag soll Ihnen die Grundlage vermitteln, um Anpassungen Ihrer Umgebung zu planen und in Angriff zu nehmen.
  8. 8. ©2014BelsoftAG|www.belsoft.ch Einleitung – Die Systemumgebung •  Microsoft Windows Server 2008 R2 •  IBM Connections 4.5 CR3 (IBM Domino LDAP, single box Installation) •  CONNECTIONS_CUSTOMIZATION_DEBUG aktiviert •  Next Generation Theme •  Profile templateReloading in profiles-config.xml auf 15s eingestellt •  Login Daten gespeichert in soap.client.properties •  -> Bitte debug & reloading Einstellungen für die Produktion IMMER deaktivieren!
  9. 9. ©2014BelsoftAG|www.belsoft.ch Einleitung – Bemerkungen •  Folgende Abkürzungen werden verwendet: •  custom_dir: Customization Verzeichnis, kann in der WebSphere Variable CONNECTIONS_CUSTOMIZATION_PATH gefunden werden (Hier D:IBMConnectionsdatasharedcustomization ) •  provision_dir: Provision Verzeichnis, kann in der WebSphere Variable CONNECTIONS_PROVISION_PATH gefunden werden (Hier D:IBMConnectionsdatasharedprovision) •  profiles_dir: WebSphere profiles Verzeichnis (Hier D:IBMWebSphereAppServerprofiles) •  htdocs: HTTP Server htdocs Verzeichnis (Hier D:IBMHTTPServerhtdocs)
  10. 10. ©2014BelsoftAG|www.belsoft.ch Benutzeroberfläche - Beispiel Zusätzliches Menu Permanenter Link Angepasste Farben und Logo
  11. 11. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications” •  Stoppen der Common App
  12. 12. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Wir nutzen hier das Next Generation Theme http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_themes_for_IBM_Connections_4.5_CR1_ic451 •  Das NextGen Theme funktioniert anders als das Standard Theme •  Wir müssen direkt eine Quelldatei anpassen (com.ibm.social.gen4.theme_4.0.0.cr3.jar) •  Das ist eher ein Hack und nicht dokumentiert (wird aber supported!) •  Deshalb müssen diese Änderungen immer weggespeichert werden, bevor ein Fix/Fixpack installiert oder ein Upgrade durchgeführt wird (die Änderungen könnten sonst überschrieben werden) •  Das Anpassen des Standard Theme ist einfacher, dort muss man lediglich eine Theme css Datei erstellen im Verzeichnis custom_dirthemesdefaultTheme
  13. 13. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Navigieren zum Verzeichnis provision_dirwebresources •  Öffnen von com.ibm.social.gen4.theme_4.0.0.cr3.jar mit Zip Programm
  14. 14. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Extrahieren aller Dateien nach provision_dirwebresourcescom.ibm.social.gen4.theme_4.0.0.cr3
  15. 15. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Löschen der Datei com.ibm.social.gen4.theme_4.0.0.cr3.jar •  Umbenennen des Verzeichnis zu com.ibm.social.gen4.theme_4.0.0.cr3.jar Bemerkung: So können die Änderungen direkt ohne repacking getestet werden
  16. 16. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Öffnen des neuen Verzeichnis com.ibm.social.gen4.theme_4.0.0.cr3.jar und navigieren nach resourcescssdefaultTheme •  Öffnen von defaultTheme.css mit einem Text Editor
  17. 17. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Suchen nach .lotusui30 div.lotusBanner .lotusRightCorner •  Ersetzen des Farbgradienten #3c404 - #151718 durch #00b2ef - #00649d
  18. 18. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Verbergen des IBM Logos und hinzufügen eines neuen Logos
  19. 19. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Kopieren des referenzierten Logos ibmconnect.png ins Verzeichnis htdocsimages
  20. 20. ©2014BelsoftAG|www.belsoft.ch How to – Farben und Logo •  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications” •  Starten der Common App
  21. 21. ©2014BelsoftAG|www.belsoft.ch Resultat – Farben und Logo •  Refresh des Browsers
  22. 22. ©2014BelsoftAG|www.belsoft.ch How to – Neues Menu und permanenter Link •  Kopieren von header.jsp im Verzeichnis profiles_dirAppSrv01installedAppsconnectionsCell01Homepage.earhomepage.warnavtemplates nach custom_dircommonnavtemplates
  23. 23. ©2014BelsoftAG|www.belsoft.ch How to – Neues Menu und permanenter Link •  Öffnen von header.jsp mit einem Text Editor •  Verändern/Hinzufügen von einigen Zeilen am Ende der Datei Permanenter Link Referenz zum neuen Menu
  24. 24. ©2014BelsoftAG|www.belsoft.ch How to – Neues Menu und permanenter Link •  Kopieren des referenzierten Bildes question.png ins Verzeichnis htdocsimages
  25. 25. ©2014BelsoftAG|www.belsoft.ch How to – Neues Menu und permanenter Link •  Erstellen eines Verzeichnis mit dem Namen menu und erstellen der referenzierten jsp Datei ibmconnect14.jsp
  26. 26. ©2014BelsoftAG|www.belsoft.ch How to – Neues Menu und permanenter Link
  27. 27. ©2014BelsoftAG|www.belsoft.ch Resultat – Neues Menu und permanenter Link •  Refresh des Browsers
  28. 28. ©2014BelsoftAG|www.belsoft.ch Benutzeroberfläche – Ressourcen •  Customizing the user interface http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic45 •  Customization of the Next Gen Theme http://kbild.ch/2013/07/customization-of-the-next-gen-theme-for-ibm-connections/ •  Customizing the navigation bar http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_navigation_bar_ic45
  29. 29. ©2014BelsoftAG|www.belsoft.ch Benachrichtigungen - Beispiel Angepasste Farben, Logo Angepasster Text Angepasster Sender
  30. 30. ©2014BelsoftAG|www.belsoft.ch Benachrichtigungen - Beispiel Anpassen der Standard Einstellungen damit tägliche und nicht wöchentliche Benachrichtigungen verschickt werden
  31. 31. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Textes •  Öffnen von notification(_de).properties im resourcesnls Verzeichnis
  32. 32. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Textes •  Anpassen des Textes IBM Connections zu IBM Connect 14 •  Gleiche Anpassung für jegliche Sprache, welche man auch verwenden will
  33. 33. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Textes •  Zurück zum notifications Verzeichnis und nun öffnen von notification(_de).properties in newsresourcesnls •  Ändern von allen IBM Connections Textstellen auf IBM Connect 14
  34. 34. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Logos und der Farben •  Zurück zum notifications Verzeichnis und nun öffnen von style.ftl in newsaggregated •  Ändern von allen Farbwerten #474747 auf #025d9c
  35. 35. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Logos und der Farben •  Ändern des referenzierten footer Bildes von ibmLogoWhite23.png auf ibmconnect.png
  36. 36. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Logos und der Farben •  Zurück zum notifications Verzeichnis und kopieren von ibmconnect.png nach resourcesimages
  37. 37. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Logos und der Farben •  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications” •  Stoppen und starten der News App
  38. 38. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Standard Benachrichtungsintervall •  Starten des wsadmin Clients und ausführen von connectionsConfig.py •  Auschecken von notification-config.xml LCConfigService.checkOutNotificationConfig('D:/temp','connectionsCell01’)
  39. 39. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Standard Benachrichtungsintervall •  Öffnen von notification-config.xml in D:temp •  Ändern der Werte für Sender und mobile Links
  40. 40. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Standard Benachrichtungsintervall •  Ändern aller defaultFollowFrequency="WEEKLY” auf defaultFollowFrequency=”DAILY"
  41. 41. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Standard Benachrichtungsintervall •  Schliessen der Datei und einchecken LCConfigService.checkInNotificationConfig() •  Ausführen von newsAdmin.py
  42. 42. ©2014BelsoftAG|www.belsoft.ch How to – Anpassen des Standard Benachrichtungsintervall •  Ausführen des folgenden Befehls um die Standard Einstellungen für Benachrichtungen neu zu laden: NewsEmailDigestService.refreshDefaultEmailPrefsFromConfig()
  43. 43. ©2014BelsoftAG|www.belsoft.ch Resultat – Anpassen des Standard Benachrichtungsintervall •  Testen der neuen Standard Einstellungen im Browser durch zurücksetzen der Standard Werte
  44. 44. ©2014BelsoftAG|www.belsoft.ch Resultat – Anpassen des Logos und der Farben •  Man kann das Versenden von Benachrichtigungen durch das aufrufen folgendes Links auslösen (nur Admins erhalten Banchrichtigung) http://connections.snt.com/news/web/testEmailDigestSendMail.action?type=daily •  Für alle Benutzer http://connections.snt.com/news/web/testEmailDigestSendMail.action? type=daily&initNextTranche=true
  45. 45. ©2014BelsoftAG|www.belsoft.ch Resultat – Anpassen des Logos und der Farben •  Newsletters im Mail Client kontrollieren (Desktop und Mobile) Mail auf Mobile
  46. 46. ©2014BelsoftAG|www.belsoft.ch Benachrichtigung – Ressourcen •  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
  47. 47. ©2014BelsoftAG|www.belsoft.ch Communities - Beispiel Zwei neue Themes (Belsoft, Gfi)
  48. 48. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  defaultTheme.css als Template verwenden für ein neues Theme css (nameTheme.css) im Verzeichnis custom_dirthemesnameTheme -> Erstellen der Verzeichnisse belsoftTheme und gfiTheme und anlegen der Dateien belsoftTheme.css sowie gfiTheme.css in diesen Verzeichnissen
  49. 49. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Das angepasste NextGen defaultTheme.css als Quelle für die neue css Datei verwenden (provision_dirwebresourcescom.ibm.social.gen4.theme_4.0.0.cr3.jarresources cssdefaultTheme) •  Alle relativen Pfade umwandeln in absolute Pfade ../../sprite/sprite16.png - > /com.ibm.social.gen4.theme/sprite/sprite16.png •  Anpassen der Farbegradienten in den Theme css Dateien (Belsoft, Gfi)
  50. 50. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Vor allem darauf achten wie die neuen Bilder verlinkt werden und wo sie abgelegt werden müssen
  51. 51. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Starten des wsadmin Clients und ausführen von communitiesAdmin.py •  Auschecken von communities-config.xml CommunitiesConfigService.checkOutConfig('D:/temp','connectionsCell01’)
  52. 52. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Öffnen von communities-config.xml im Verzeichnis D:temp •  Hinzufügen der neuen Themes (Beschriftung und Vorschaubilder werden in den nächsten Schritten hinzugefügt)
  53. 53. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Einchecken von communities-config.xml CommunitiesConfigService.checkInConfig()
  54. 54. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Hinzufügen der Datei com.ibm.lconn.communities.strings.ui.properties zum custom_dirstrings Verzeichnis, sowie das Hinzufügen der Beschriftungen zu dieser Datei
  55. 55. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Kopieren der Theme Vorschaubilder ins Verzeichnis custom_dircommunitiesimages
  56. 56. ©2014BelsoftAG|www.belsoft.ch How to – Themes •  Öffnen der WAS Administrative Console und navigieren nach „Applications – WebSphere enterprise applications“ •  Stoppen und starten der Communities App
  57. 57. ©2014BelsoftAG|www.belsoft.ch Resultat – Themes •  Öffnen einer Community und ändern des Theme in eines der zwei neuen Themes
  58. 58. ©2014BelsoftAG|www.belsoft.ch Communities – Ressourcen •  Adding a custom theme to Communities http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Adding_a_custom_theme_to_Communities_ic45 •  Branding Communities in IBM Connections (Jerald Mahurin) http://www.sociallycurious.com/2013/05/21/branding-communities-ibm-connections •  Enabling custom widgets for Communities http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Enabling_custom_widgets_for_Communities_ic45
  59. 59. ©2014BelsoftAG|www.belsoft.ch Wikis - Beispiel
  60. 60. ©2014BelsoftAG|www.belsoft.ch How to – Willkommens Seite •  Erstellen eines neuen Wikis und dann klick auf edit •  Ändern der Willkommens Seite in die gewünschte Form, wir werden dann diese Seite als Vorlage für unsere Anpassung verwenden •  Wechseln in die „HTML Source“ Ansicht und kopieren des HTML code
  61. 61. ©2014BelsoftAG|www.belsoft.ch How to – Willkommens Seite •  Einfügen des HTML code in eine Textdatei und entfernen aller “end of lines” (EOL)
  62. 62. ©2014BelsoftAG|www.belsoft.ch How to – Willkommens Seite •  Erstellen der Datei com.ibm.lconn.share.services.handlers.wiki.nls.WikiWelcomeMessag es_en.properties im Verzeichnis custom_dirstrings und hinzufügen des Titels einer neuen Seite sowie des HTML code (Eine Zeile!) •  Erstellen einer Property Datei für jedwelche Sprache, welche genutzt werden soll
  63. 63. ©2014BelsoftAG|www.belsoft.ch How to – Willkommens Seite •  Öffnen der WAS Administrative Console und navigieren nach “Applications – WebSphere enterprise applications” •  Stoppen und starten der Wikis App
  64. 64. ©2014BelsoftAG|www.belsoft.ch Resultat – Willkommens Seite •  Erstellen eines neuen Wikis
  65. 65. ©2014BelsoftAG|www.belsoft.ch Wikis – Ressourcen •  Customizing the Wikis welcome page http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45
  66. 66. ©2014BelsoftAG|www.belsoft.ch Profile - Beispiel Anzeige derBüroadresse inGoogle Maps
  67. 67. ©2014BelsoftAG|www.belsoft.ch How to – Widget •  Erstellen des Widgets im Verzeichnis custom_dirprofiles mit Namen googleMap.xml
  68. 68. ©2014BelsoftAG|www.belsoft.ch How to – Widget
  69. 69. ©2014BelsoftAG|www.belsoft.ch How to – Widget http://kbild.ch/2014/02/google-maps-widget-ibm-connections-profiles/
  70. 70. ©2014BelsoftAG|www.belsoft.ch How to – Widget •  Nun wird das Widget zu unseren Connections Profilen hinzugefügt, dafür muss der wsadmin Client gestartet werden und profilesAdmin.py ausgeführt werden •  Auschecken von widgets-config.xml ProfilesConfigService.checkOutWidgetConfig('D:/temp','connectionsCell01')
  71. 71. ©2014BelsoftAG|www.belsoft.ch How to – Widget •  Öffnen der Datei widgets-config.xml im Verzeichnis D:temp •  Hinzufügen des neuen Widgets
  72. 72. ©2014BelsoftAG|www.belsoft.ch How to – Widget •  Einchecken von widgets-config.xml ProfilesConfigService.checkInWidgetConfig()
  73. 73. ©2014BelsoftAG|www.belsoft.ch How to – Widget •  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications” •  Stoppen und starten der Profiles App
  74. 74. ©2014BelsoftAG|www.belsoft.ch Resultat – Widget •  Öffnen eines Profiles und testen des Widgets
  75. 75. ©2014BelsoftAG|www.belsoft.ch Profile – Ressourcen •  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
  76. 76. ©2014BelsoftAG|www.belsoft.ch Profile – Ressourcen •  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
  77. 77. ©2014BelsoftAG|www.belsoft.ch Richtext Editor - Beispiel
  78. 78. ©2014BelsoftAG|www.belsoft.ch How to •  Grundlagen für die Erweiterungen des RTE ist, wie man ein CKEditor Plugin erstellt http://docs.cksource.com/CKEditor_3.x/Tutorials •  Erstellen eines Business Card plugins http://kbild.ch/2014/02/business-card-function-ibm-connections-richtext-editor/
  79. 79. ©2014BelsoftAG|www.belsoft.ch How to •  Kopieren des Plugins ins Verzeichnis custom_dirjavascriptcomibmoneuickeditoreditorplugins
  80. 80. ©2014BelsoftAG|www.belsoft.ch How to •  Öffnen von provision_dirwebresourcescom.ibm.lconn.blogs.web.resources_*.jar mit einem Zip Programm und extrahieren der Datei ckeditor.js, welche im Verzeichnis resources liegt
  81. 81. ©2014BelsoftAG|www.belsoft.ch How to •  Kopieren der Datei ckeditor.js ins Verzeichnis custom_dirjavascriptlconnblogs (oder wikis)
  82. 82. ©2014BelsoftAG|www.belsoft.ch How to •  Öffnen der Datei ckeditor.js und hinzufügen des neuen Plugins
  83. 83. ©2014BelsoftAG|www.belsoft.ch How to •  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications” •  Stoppen und starten der Common App
  84. 84. ©2014BelsoftAG|www.belsoft.ch Resultat •  Refresh des Browsers Cache •  Erstellen eines neuen Blogbeitrags und testen des Plugins
  85. 85. ©2014BelsoftAG|www.belsoft.ch Richtext Editor – Ressourcen •  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
  86. 86. ©2014BelsoftAG|www.belsoft.ch Weitere Beispiele
  87. 87. ©2014BelsoftAG|www.belsoft.ch Weitere Beispiele
  88. 88. ©2014BelsoftAG|www.belsoft.ch
  89. 89. ©2014BelsoftAG|www.belsoft.ch Danke http://belsoft.ch http://youtube.com/belsoftag http://linkedin.com/in/kbild http://twitter.com/kbild http://kbild.ch http://slideshare.com/kbild

×