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

©2014BelsoftAG|www.belsoft.ch
Über mich
kbild.ch
twitter.com/kbild
linkedin.com/in/kbild

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

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

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)

Einleitung – Wer ist hier im Publikum?

Einleitung – Ziel der Session?
Dieser Vortrag soll Ihnen die
Grundlage vermitteln, um
Anpassungen Ihrer
Umgebung zu planen und in
Angriff zu nehmen.

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!

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)

Benutzeroberfläche - Beispiel
Zusätzliches
Menu
Permanenter Link
Angepasste
Farben und Logo

How to – Farben und Logo
•  Öffnen der WAS Administrative Console und navigieren zu “Applications –
WebSphere enterprise applications”
•  Stoppen der
Common App

•  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

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

•  Extrahieren aller Dateien nach
provision_dirwebresourcescom.ibm.social.gen4.theme_4.0.0.cr3

•  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

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

•  Suchen nach .lotusui30 div.lotusBanner .lotusRightCorner
•  Ersetzen des Farbgradienten #3c404 - #151718 durch #00b2ef - #00649d

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

•  Kopieren des referenzierten Logos ibmconnect.png ins Verzeichnis htdocsimages

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

Resultat – Farben und Logo
•  Refresh des Browsers

How to – Neues Menu und permanenter Link
•  Kopieren von header.jsp im Verzeichnis
profiles_dirAppSrv01installedAppsconnectionsCell01Homepage.earhomepage.warnavtemplates
nach custom_dircommonnavtemplates

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

•  Kopieren des referenzierten Bildes question.png ins Verzeichnis htdocsimages

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

Resultat – Neues Menu und permanenter Link
•  Refresh des Browsers

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

Benachrichtigungen - Beispiel
Angepasste Farben, Logo
Angepasster
Text
Angepasster
Sender

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

How to – Anpassen des Textes
•  Öffnen von notification(_de).properties im resourcesnls Verzeichnis

•  Anpassen des Textes IBM Connections zu IBM Connect 14
•  Gleiche Anpassung für jegliche Sprache, welche man auch verwenden will

•  Zurück zum notifications Verzeichnis und nun öffnen von
notification(_de).properties in newsresourcesnls
•  Ändern von allen IBM Connections Textstellen auf IBM Connect 14

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

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

•  Zurück zum notifications Verzeichnis und kopieren von ibmconnect.png nach
resourcesimages

•  Stoppen und starten
der News App

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

•  Öffnen von notification-config.xml in D:temp
•  Ändern der Werte für Sender und mobile Links

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

•  Schliessen der Datei und einchecken
LCConfigService.checkInNotificationConfig()
•  Ausführen von newsAdmin.py

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

Resultat – Anpassen des Standard Benachrichtungsintervall
•  Testen der neuen Standard Einstellungen im Browser durch zurücksetzen der Standard
Werte

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

Resultat – Anpassen des Logos und der Farben
•  Newsletters im Mail Client kontrollieren (Desktop und Mobile)
Mail auf Mobile

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

Communities - Beispiel
Zwei neue Themes
(Belsoft, Gfi)

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

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)

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

How to – Themes
•  Starten des wsadmin Clients und ausführen von communitiesAdmin.py
•  Auschecken von communities-config.xml
CommunitiesConfigService.checkOutConfig('D:/temp','connectionsCell01’)

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)

How to – Themes
•  Einchecken von communities-config.xml
CommunitiesConfigService.checkInConfig()

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

How to – Themes
•  Kopieren der Theme Vorschaubilder ins Verzeichnis
custom_dircommunitiesimages

How to – Themes
•  Öffnen der WAS Administrative Console und navigieren nach „Applications –
WebSphere enterprise applications“
•  Stoppen und starten der Communities App

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

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

Wikis - Beispiel

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

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

•  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

•  Öffnen der WAS Administrative Console und navigieren nach “Applications –
der Wikis App

Resultat – Willkommens Seite
•  Erstellen eines neuen Wikis

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

Profile - Beispiel
Anzeige derBüroadresse inGoogle Maps

How to – Widget
•  Erstellen des Widgets im Verzeichnis custom_dirprofiles mit Namen
googleMap.xml

How to – Widget

How to – Widget
http://kbild.ch/2014/02/google-maps-widget-ibm-connections-profiles/

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

How to – Widget
•  Öffnen der Datei widgets-config.xml im Verzeichnis D:temp
•  Hinzufügen des neuen Widgets

How to – Widget
•  Einchecken von widgets-config.xml
ProfilesConfigService.checkInWidgetConfig()

How to – Widget
der Profiles App

Resultat – Widget
•  Öffnen eines Profiles und testen des Widgets

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

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

Richtext Editor - Beispiel

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/

How to
•  Kopieren des Plugins ins Verzeichnis
custom_dirjavascriptcomibmoneuickeditoreditorplugins

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

How to
•  Kopieren der Datei ckeditor.js ins Verzeichnis
custom_dirjavascriptlconnblogs (oder wikis)

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

How to
der Common App

Resultat
•  Refresh des Browsers Cache
•  Erstellen eines neuen Blogbeitrags und testen des Plugins

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

Weitere Beispiele

Danke
http://belsoft.ch
http://youtube.com/belsoftag
http://linkedin.com/in/kbild
http://twitter.com/kbild
http://kbild.ch
http://slideshare.com/kbild

Make your IBM connections deployment your own - customize it

Weitere ähnliche Inhalte

Was ist angesagt?

Mehr von Belsoft

Make your IBM connections deployment your own - customize it