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

elsoft

lsoft.c

Über mich

kbild.ch

twitter.com/kbild

linkedin.com/in/kbild

elsoft

lsoft.c

Über diesen Vortrag

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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)

elsoft

lsoft.c

Einleitung – Wer ist hier im Publikum?

elsoft

lsoft.c

Einleitung – Ziel der Session?

Dieser Vortrag soll Ihnen die Grundlage vermitteln, um

Anpassungen Ihrer Umgebung zu planen und in

Angriff zu nehmen.

elsoft

lsoft.c

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!

elsoft

lsoft.c

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)

elsoft

lsoft.c

Benutzeroberfläche - Beispiel

Zusätzliches Menu

Permanenter Link

Angepasste Farben und Logo

elsoft

lsoft.c

How to – Farben und Logo

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

•  Stoppen der Common App

elsoft

lsoft.c

•  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

elsoft

lsoft.c

•  Navigieren zum Verzeichnis provision_dir\webresources\

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

elsoft

lsoft.c

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

elsoft

lsoft.c

•  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

elsoft

lsoft.c

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

elsoft

lsoft.c

•  Suchen nach .lotusui30 div.lotusBanner .lotusRightCorner

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

•  Starten der Common App

elsoft

lsoft.c

Resultat – Farben und Logo

•  Refresh des Browsers

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

elsoft

lsoft.c

Resultat – Neues Menu und permanenter Link

•  Refresh des Browsers

elsoft

lsoft.c

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

elsoft

lsoft.c

Benachrichtigungen - Beispiel

Angepasste Farben, Logo

Angepasster Text

Angepasster Sender

elsoft

lsoft.c

Benachrichtigungen - Beispiel

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

elsoft

lsoft.c

How to – Anpassen des Textes

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

elsoft

lsoft.c

•  Anpassen des Textes IBM Connections zu IBM Connect 14

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

elsoft

lsoft.c

•  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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

•  Stoppen und starten der News App

elsoft

lsoft.c

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

elsoft

lsoft.c

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

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

elsoft

lsoft.c

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

elsoft

lsoft.c

•  Schliessen der Datei und einchecken LCConfigService.checkInNotificationConfig()

•  Ausführen von newsAdmin.py

elsoft

lsoft.c

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

elsoft

lsoft.c

Resultat – Anpassen des Standard Benachrichtungsintervall

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

elsoft

lsoft.c

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

elsoft

lsoft.c

Resultat – Anpassen des Logos und der Farben

•  Newsletters im Mail Client kontrollieren (Desktop und Mobile)

Mail auf Mobile

elsoft

lsoft.c

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

elsoft

lsoft.c

Communities - Beispiel

Zwei neue Themes (Belsoft, Gfi)

elsoft

lsoft.c

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

elsoft

lsoft.c

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)

elsoft

lsoft.c

How to – Themes

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

elsoft

lsoft.c

How to – Themes

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

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

elsoft

lsoft.c

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)

elsoft

lsoft.c

How to – Themes

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

elsoft

lsoft.c

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

elsoft

lsoft.c

How to – Themes

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

elsoft

lsoft.c

How to – Themes

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

•  Stoppen und starten der Communities App

elsoft

lsoft.c

Resultat – Themes

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

elsoft

lsoft.c

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

elsoft

lsoft.c

Wikis - Beispiel

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

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

es_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

elsoft

lsoft.c

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

•  Stoppen und starten der Wikis App

elsoft

lsoft.c

Resultat – Willkommens Seite

•  Erstellen eines neuen Wikis

elsoft

lsoft.c

Wikis – Ressourcen

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

elsoft

lsoft.c

Profile - Beispiel

Anzeige der Büroadresse in Google Maps

elsoft

lsoft.c

How to – Widget

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

elsoft

lsoft.c

How to – Widget

elsoft

lsoft.c

How to – Widget

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

elsoft

lsoft.c

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

elsoft

lsoft.c

How to – Widget

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

•  Hinzufügen des neuen Widgets

elsoft

lsoft.c

How to – Widget

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

elsoft

lsoft.c

How to – Widget

•  Stoppen und starten der Profiles App

elsoft

lsoft.c

Resultat – Widget

•  Öffnen eines Profiles und testen des Widgets

elsoft

lsoft.c

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

elsoft

lsoft.c

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

elsoft

lsoft.c

Richtext Editor - Beispiel

elsoft

lsoft.c

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/

elsoft

lsoft.c

How to

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

elsoft

lsoft.c

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

elsoft

lsoft.c

How to

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

elsoft

lsoft.c

How to

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

elsoft

lsoft.c

How to

•  Stoppen und starten der Common App

elsoft

lsoft.c

Resultat

•  Refresh des Browsers Cache

•  Erstellen eines neuen Blogbeitrags und testen des Plugins

elsoft

lsoft.c

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

elsoft

lsoft.c

Weitere Beispiele

elsoft

lsoft.c

Weitere Beispiele

elsoft

lsoft.c

elsoft

lsoft.c

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! German Version

Self Improvement

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

How to customize your hangers

Customize your Wordpress site

steinfeldt.de · brons k-brons s-brons s-alu k-alu alu original customize y our chair original customize y our sofa original customize your cabinet customize your cabinet ... everton

Customize Your Font Not Your Brand

Show301 make your ibm® connections deployment your own customize it!

your campaign How to customize - Amazon Web …...How to customize your campaign It’s important to customize your campaign and make it stand out of the crowd. Doing so will engage

CUSTOMIZE YOUR OWN SWEET KINE CUSTOMIZE YOUR OWN …

CUSTOMIZE YOUR COLLECTION MAKE IT YOUR OWN 1500

Customize your Wrike account

Customize Your Ribbon, - ilta.personifycloud.comilta.personifycloud.com/webfiles/productfiles/1065/ILTA U_Ribbon_Microsystems.pdf · Customize Your Ribbon, Quick Access Toolbar and

CUSTOMIZE YOUR RIDE ZERO-TURN MOWERS

How to customize your Microsoft SharePoint Online website€¦ · How to customize your Microsoft SharePoint Online website Customize logo You can change the logo for your site. Customize

Customize Your Video Surveillance System

CUSTOMIZE YOUR DESTINATION EXPERIENCE

How to Customize Your Documents

Customize your Wrike account wrike.com/blog/How-to-customize-Wrike-1-2-3.

Microsoft Dynamics CRM Online Deployment (MB2- 706)...Deploy Microsoft Dynamics CRM Online Create a deployment plan, identify objects that you can customize, implement customizations,

Customize Your Experience 2012

Tumblr: Customize The Look of Your Blog

CARVE YOUR CORE 21-DAY WORKOUT CUSTOMIZE YOUR WORKOUT