Make your IBM connections deployment your own - customize it

Make Your IBM Connections Deployment Your Own: Customize It!

Klaus Bild, Belsoft AG IBM Connect Rheintal 27. März 2014

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Über mich

kbild.ch

twitter.com/kbild

linkedin.com/in/kbild

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Über diesen Vortrag

http://www.slideshare.net/kbild/show301-make-your-ibm-connections-deployment-your-own-customize-it

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Heutige Agenda

•  Introduction

•  User Interface

•  Login Page

•  Notifications

•  Getting Started Page

•  Communities

•  Wikis

•  Profiles


•  Einleitung

•  Benutzeroberfläche

•  Benachrichtigungen

•  Communities (nur Themes)

•  Wikis

•  Profile (nur Widget)


© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Einleitung – Wer ist hier im Publikum?

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Einleitung – Ziel der Session?

Dieser Vortrag soll Ihnen die Grundlage vermitteln, um

Anpassungen Ihrer Umgebung zu planen und in

Angriff zu nehmen.

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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!

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Einleitung – Bemerkungen

•  Folgende Abkürzungen werden verwendet: •  custom_dir: Customization Verzeichnis, kann in der WebSphere Variable

CONNECTIONS_CUSTOMIZATION_PATH gefunden werden (Hier D:\IBM\Connections\data\shared\customization\ )

•  provision_dir: Provision Verzeichnis, kann in der WebSphere Variable CONNECTIONS_PROVISION_PATH gefunden werden (Hier D:\IBM\Connections\data\shared\provision\)

•  profiles_dir: WebSphere profiles Verzeichnis (Hier D:\IBM\WebSphere\AppServer\profiles)

•  htdocs: HTTP Server htdocs Verzeichnis (Hier D:\IBM\HTTPServer\htdocs)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Benutzeroberfläche - Beispiel

Zusätzliches Menu

Permanenter Link

Angepasste Farben und Logo

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Farben und Logo

•  Öffnen der WAS Administrative Console und navigieren zu “Applications – WebSphere enterprise applications”

•  Stoppen der Common App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  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_dir\themes\defaultTheme

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Navigieren zum Verzeichnis provision_dir\webresources\

•  Öffnen von com.ibm.social.gen4.theme_4.0.0.cr3.jar mit Zip Programm

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Extrahieren aller Dateien nach provision_dir\webresources\com.ibm.social.gen4.theme_4.0.0.cr3\

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Öffnen des neuen Verzeichnis com.ibm.social.gen4.theme_4.0.0.cr3.jar und navigieren nach resources\css\defaultTheme

•  Öffnen von defaultTheme.css mit einem Text Editor

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Suchen nach .lotusui30 div.lotusBanner .lotusRightCorner

•  Ersetzen des Farbgradienten #3c404 - #151718 durch #00b2ef - #00649d

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Verbergen des IBM Logos und hinzufügen eines neuen Logos

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Kopieren des referenzierten Logos ibmconnect.png ins Verzeichnis htdocs\images

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h



•  Starten der Common App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Farben und Logo

•  Refresh des Browsers

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Neues Menu und permanenter Link

•  Kopieren von header.jsp im Verzeichnis profiles_dir\AppSrv01\installedApps\connectionsCell01\Homepage.ear\homepage.war\nav\templates nach custom_dir\common\nav\templates

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Ö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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Kopieren des referenzierten Bildes question.png ins Verzeichnis htdocs\images

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Erstellen eines Verzeichnis mit dem Namen menu und erstellen der referenzierten jsp Datei ibmconnect14.jsp

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Neues Menu und permanenter Link

•  Refresh des Browsers

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Benachrichtigungen - Beispiel

Angepasste Farben, Logo

Angepasster Text

Angepasster Sender

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Benachrichtigungen - Beispiel

Anpassen der Standard Einstellungen damit tägliche und nicht wöchentliche Benachrichtigungen verschickt werden

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Anpassen des Textes

•  Öffnen von notification(_de).properties im \resources\nls\ Verzeichnis

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Anpassen des Textes IBM Connections zu IBM Connect 14

•  Gleiche Anpassung für jegliche Sprache, welche man auch verwenden will

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Zurück zum notifications Verzeichnis und nun öffnen von notification(_de).properties in \news\resources\nls\

•  Ändern von allen IBM Connections Textstellen auf IBM Connect 14

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Anpassen des Logos und der Farben

•  Zurück zum notifications Verzeichnis und nun öffnen von style.ftl in \news\aggregated\

•  Ändern von allen Farbwerten #474747 auf #025d9c

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Ändern des referenzierten footer Bildes von ibmLogoWhite23.png auf ibmconnect.png

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Zurück zum notifications Verzeichnis und kopieren von ibmconnect.png nach resources\images

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h



•  Stoppen und starten der News App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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’)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Öffnen von notification-config.xml in D:\temp

•  Ändern der Werte für Sender und mobile Links

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Ändern aller defaultFollowFrequency="WEEKLY” auf defaultFollowFrequency=”DAILY"

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Schliessen der Datei und einchecken LCConfigService.checkInNotificationConfig()

•  Ausführen von newsAdmin.py

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Ausführen des folgenden Befehls um die Standard Einstellungen für Benachrichtungen neu zu laden: NewsEmailDigestService.refreshDefaultEmailPrefsFromConfig()

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Anpassen des Standard Benachrichtungsintervall

•  Testen der neuen Standard Einstellungen im Browser durch zurücksetzen der Standard Werte

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Anpassen des Logos und der Farben

•  Newsletters im Mail Client kontrollieren (Desktop und Mobile)

Mail auf Mobile

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Communities - Beispiel

Zwei neue Themes (Belsoft, Gfi)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  defaultTheme.css als Template verwenden für ein neues Theme css (nameTheme.css) im Verzeichnis custom_dir\themes\nameTheme\ -> Erstellen der Verzeichnisse belsoftTheme und gfiTheme und anlegen der Dateien belsoftTheme.css sowie gfiTheme.css in diesen Verzeichnissen

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Das angepasste NextGen defaultTheme.css als Quelle für die neue css Datei verwenden (provision_dir\webresources\com.ibm.social.gen4.theme_4.0.0.cr3.jar\resources\css\defaultTheme)

•  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)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Vor allem darauf achten wie die neuen Bilder verlinkt werden und wo sie abgelegt werden müssen

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Starten des wsadmin Clients und ausführen von communitiesAdmin.py

•  Auschecken von communities-config.xml CommunitiesConfigService.checkOutConfig('D:/temp','connectionsCell01’)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Einchecken von communities-config.xml CommunitiesConfigService.checkInConfig()

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Hinzufügen der Datei com.ibm.lconn.communities.strings.ui.properties zum custom_dir\strings Verzeichnis, sowie das Hinzufügen der Beschriftungen zu dieser Datei

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Kopieren der Theme Vorschaubilder ins Verzeichnis custom_dir\communities\images

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Themes

•  Öffnen der WAS Administrative Console und navigieren nach „Applications – WebSphere enterprise applications“

•  Stoppen und starten der Communities App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Themes

•  Öffnen einer Community und ändern des Theme in eines der zwei neuen Themes

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Wikis - Beispiel

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Einfügen des HTML code in eine Textdatei und entfernen aller “end of lines” (EOL)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Erstellen der Datei com.ibm.lconn.share.services.handlers.wiki.nls.WikiWelcomeMessages_en.properties

im Verzeichnis custom_dir\strings\ 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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h


•  Öffnen der WAS Administrative Console und navigieren nach “Applications – WebSphere enterprise applications”

•  Stoppen und starten der Wikis App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Willkommens Seite

•  Erstellen eines neuen Wikis

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Wikis – Ressourcen

•  Customizing the Wikis welcome page http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_Wikis_welcome_page_ic45

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Profile - Beispiel

Anzeige der Büroadresse in Google Maps

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget

•  Erstellen des Widgets im Verzeichnis custom_dir\profiles mit Namen googleMap.xml

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget

http://kbild.ch/2014/02/google-maps-widget-ibm-connections-profiles/

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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')

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget

•  Öffnen der Datei widgets-config.xml im Verzeichnis D:\temp

•  Hinzufügen des neuen Widgets

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget

•  Einchecken von widgets-config.xml ProfilesConfigService.checkInWidgetConfig()

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to – Widget


•  Stoppen und starten der Profiles App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat – Widget

•  Öffnen eines Profiles und testen des Widgets

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Richtext Editor - Beispiel

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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/

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to

•  Kopieren des Plugins ins Verzeichnis custom_dir\javascript\com\ibm\oneui\ckeditor\editor\plugins\

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to

•  Öffnen von provision_dir\webresources\com.ibm.lconn.blogs.web.resources_*.jar mit einem Zip Programm und extrahieren der Datei ckeditor.js, welche im Verzeichnis \resources liegt

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to

•  Kopieren der Datei ckeditor.js ins Verzeichnis custom_dir\javascript\lconn\blogs\ (oder wikis)

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to

•  Öffnen der Datei ckeditor.js und hinzufügen des neuen Plugins

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

How to


•  Stoppen und starten der Common App

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Resultat

•  Refresh des Browsers Cache

•  Erstellen eines neuen Blogbeitrags und testen des Plugins

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

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

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Weitere Beispiele

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Weitere Beispiele

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

© 20

14 B

elsoft

AG

| ww

w.be

lsoft.c

h

Danke http://belsoft.ch http://youtube.com/belsoftag

http://linkedin.com/in/kbild

http://twitter.com/kbild

http://kbild.ch

http://slideshare.com/kbild

Date post:	12-May-2015
Category:	Social Media
Upload:	belsoft
View:	402 times
Download:	0 times

Make your IBM connections deployment your own - customize it

Social Media