Make Your IBM Connections Deployment Your Own - Customize it! German Version

Make Your IBM Connections Deployment
Your Own: Customize It!
Klaus Bild, Belsoft AG
IBM Connect Switzerland, Trafo Baden
06. März 2014

Über mich

twitter.com/kbild

linkedin.com/in/kbild

© 2014 Belsoft AG | www.belsoft.ch

kbild.ch

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


Über diesen Vortrag

Agenda an der IBM Connect in Orlando
Im Slideset auch vorhanden

•  User Interface

•  Media Gallery Object Types

•  Login Page

•  Mobile App

•  Notifications

•  Reports

•  Getting Started Page

•  Desktop Plugin

•  Communities

•  IBM Connections Content
Manager

•  Wikis
•  Profiles
•  Richtext Editor


•  Introduction

Heutige Agenda
•  Einleitung

•  User Interface

•  Benutzeroberfläche

•  Login Page

•  Benachrichtigungen

•  Notifications

•  Communities (nur Themes)

•  Getting Started Page

•  Wikis

•  Communities

•  Profile (nur Widget)

•  Wikis


•  Profiles


•  Introduction


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

•  -> Bitte debug & reloading Einstellungen für die Produktion IMMER deaktivieren!


•  Login Daten gespeichert in soap.client.properties

Einleitung – Bemerkungen
•  Folgende Abkürzungen werden verwendet:
•  custom_dir: Customization Verzeichnis, kann in der WebSphere Variable
CONNECTIONS_CUSTOMIZATION_PATH gefunden werden
(Hier D:IBMConnectionsdatasharedcustomization )

•  profiles_dir: WebSphere profiles Verzeichnis
(Hier D:IBMWebSphereAppServerprofiles)
•  htdocs: HTTP Server htdocs Verzeichnis
(Hier D:IBMHTTPServerhtdocs)


•  provision_dir: Provision Verzeichnis, kann in der WebSphere Variable
CONNECTIONS_PROVISION_PATH gefunden werden
(Hier D:IBMConnectionsdatasharedprovision)

Benutzeroberfläche - Beispiel

Permanenter Link

Angepasste
Farben und Logo


Zusätzliches
Menu

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

•  Das Anpassen des Standard Theme ist einfacher, dort muss man lediglich eine
Theme css Datei erstellen im Verzeichnis custom_dirthemesdefaultTheme


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

•  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

Angepasster
Sender

Angepasste Farben, Logo


Angepasster
Text

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/
•  Verifying email digests
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Verifying_email_digests_ic45


Setting_the_default_frequency_of_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

http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Enabling_custom_widgets_for_Communities_ic45


•  Enabling custom widgets for Communities


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

•  Erstellen einer Property Datei für jedwelche Sprache, welche genutzt werden soll


im Verzeichnis custom_dirstrings und hinzufügen des Titels einer neuen
Seite sowie des HTML code (Eine Zeile!)

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


Anzei
g
Büroa e der
Googl dresse in
e Map
s

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


googleMap.xml


How to – Widget

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


How to – Widget

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


http://www-10.lotus.com/ldd/lcwiki.nsf/dx/development-guide

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

•  How to Create a Perfect Profile: A Hitchiker’s Guide to A Smarter Workforce
http://www.slideshare.net/curiousmitch/show304


http://www.slideshare.net/palmke/profile-types-and-locking-profile-features-15498931


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

http://kbild.ch/2014/02/business-card-function-ibm-connections-richtext-editor/


•  Erstellen eines Business Card plugins

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://slideshare.com/kbild
http://linkedin.com/in/kbild

http://kbild.ch


http://twitter.com/kbild

Make Your IBM Connections Deployment Your Own - Customize it! German Version

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Klaus Bild

Make Your IBM Connections Deployment Your Own - Customize it! German Version