IBM Connections - Have it YOUR Way!

Philadelphia, April 26-27 2018
IBM Connections
Have it Way!
Martin Donnelly, IBM - @TweeterDonnelly

IBM Connections Customizer Social Connections 14, Berlin 2018
Introductions
Martin Donnelly
STSM – IBM ICS

Please Note
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without
notice at IBM’s sole discretion. Information regarding potential future products is intended to outline our
general product direction and it should not be relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or legal
obligation to deliver any material, code or functionality. Information about potential future products may not
be incorporated into any contract.
The development, release, and timing of any future features or functionality described for our products
remains at our sole discretion.
Performance is based on measurements and projections using standard IBM benchmarks in a controlled
environment. The actual throughput or performance that any user will experience will vary depending upon
many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the
I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be
given that an individual user will achieve results similar to those stated here.
3

Agenda
• Customizer – A High Level Overview
• Demo Time – Out-of-the-Box Samples
• Apps from Customers and Community
• Managing Customizer in Production
• Wrap Up

IBM Connections Customizer
High Level Overview

• Solution for modifying the IBM Connections UX
• A server that acts as an intermediary between
an endpoint device and another server from
which a user is requesting a service … an
intelligent proxy
• … formerly known as Muse

• Proxy between the request and response
• Customizer can:
• change behavior of the service it’s sitting in front of…
• rewrite requests
• rewrite responses
• inject custom items
• do predictive caching
• proxy requests
• log traffic
• do pretty much anything :-)

Simple Request Routing
Connections
21

Simple Request Routing
Connections Customizer
1
2
3
4

Customizer with App Registry
Connections Customizer
Adjust payload
Customer1
forUser X
Customization
Manager App
Registry
Customer2
forall Users

IBM
Customizer
Request
Lifecycle

What is App Registry ?
• A database – apps declared in JSON
• A central app design repo, with UI and API access
• Provides a hierarchical model for defining apps on a per-org basis
1. Services declare Extension Points
2. Apps are just containers for one or more extensions
3. Extension = implementation of an Extension Point
Service
App
Ext1 Ext2
App
Ext

Simplified Customizer App
{
"services": ["Customizer"],
"name": "Custom Communities",
"extensions": [ {
"type": "com.ibm.customizer.ui",
"path": "communities",
"payload": {
"include-files":["flipcard.js"]
}}]}
Customizer
Homepage
Customizations
Kanban
Watson Tone
Analysis
Custom
Communities
Flip Card
Layout

App Reg Design Properties
• type – identifies the extension point being implemented
com.ibm.customizer.ui | com.ibm.customizer.api | com.ibm.customizer.proxy
• path – in Customizer context it identifies the URL path
https://apps.na.collabserv.com/profiles/html/myProfileView.do#&tabinst=Updates
activities
blogs
communities
files
forums
global *
homepage
mycontacts
meetings
news
profiles
search
GET /appregistry/api/v3/services/Customizer/extensions?type= com.ibm.customizer.ui&path=profiles
App Reg
REST
Query
Valid
Paths
social
viewer
wikis

IBM Customizer Big Picture

Demo Time !
Out-of-the-Box Samples

Hello World
The object of this exercise…
• Make a simple UI change to the IBM Connections Homepage
Replace
“Share Something:”
with
“Hello World!”

Hello World
Use App Registry to enable a Hello World customization
• For Cloud: Admin > Manage Organization > Organization Extensions > New Apps Manager
• For On-Premises use this URL
http://*yourOnPremConnectionsUrl.com*/appreg/

Hello World
Hello World App Design
• Click on Code Editor
• Note the highlighted props:
• services
• type
• payload
• path

Hello World
Verify the Customizer Code Injection
• Right-click View Page Source in the Homepage to view the HTML source
• Jump to the source window
• See the JavaScript link injected by Customizer …
• Click on the src link to view the JavaScript source code
include-file include-repoJS injection

Hello World Examples
helloWorld.user.js
JS locates a DOM
element and sets
its value to “Hello
World! “

Hello World
Explore the DOM
element using the
browser debugger
The DOM element
span.shareSome-title
used in JS as a target

Hello World
The DOM element
span.shareSome-title
updated via JavaScript

Hello World – Applying Dynamic JS
• Global lconn JS object exists in Connections Cloud
• You can explore the lconn object from the browser debug console
• Take advantage of it in your JavaScript code injection

Hello World – Applying Dynamic JS
Like so…

Hello World – Making API Calls
• JS code injected by Customizer is authenticated to call any Connections APIs
• For more info on People APIs - https://ibm.biz/ConnectionsPeopleAPI

Hello World Examples – API Calls
• Use Dojo Ajax capabilities to call the /opensocial/rest/people/@me/@self API
• Pick the displayName from the result and insert it in the DOM
Insert this code
fragment in
helloWorld.user.js

CSS Samples
Customize the look and feel of the Connections Profile page

Other Samples – CSS Customizations
Load one or more CSS files directly
• CSS files can now be listed as “include-files”

CSS Samples
OLD
NEW

Communities Flipcard Sample
Enables the user to toggle between the standard row-based layout to flipcards
• https://github.com/ibmcnxdev/customizer/tree/master/samples/flipCard

NewsRiver Sample
Applies a colour-coded background for Homepage updates/mentions/notifications etc
• Provides an example of how to handle #Hash anchor links

Proxy Samples
Demonstrates how to securely route requests to 3rd party services on ICC Cloud
• Shows simple proxy service
• Uses Watson sentiment analysis service and basic auth

Out-of-the-Box Sample Summary
You have seen Customizer do the following…
• Inject JavaScript in the HTML body
• Take advantage of in-memory JS objects
• Make Connections API Calls
• Insert CSS files into the HTML head
• Leverage DOJO
• Handle Single Page App designs
• Proxy request to a 3rd party web service

Apps from Customers & Community

Persicope In Action
Use Visual Update 1 to decorate your whole organization
• Install and enable Visual Update 1 to the org
• Explore Connections components like Files, Homepage, Communities etc
• After the app is enabled … note the different fonts, buttons, colors, images…
Old Files New Files

Simplified Connections UX
Eurapco/Belsoft used Customizer to reduce the Connections UX to just their needs

Community with a Shared Calendar
• OnTime Suite – Shared Calendering

Community with Bulk Delete
• https://github.com/OpenCode4Connections/communities-bulk-delete-members
• Dale Parish

Enhanced Activity Stream
• https://github.com/OpenCode4Connections/enhanced-activity-stream
• Jay Agrawal

Communities Weather App
• https://github.com/OpenCode4Connections/bluemix-weather-widget
• https://github.com/OpenCode4Connections/watson-workspace-links
• Brian Gleeson

Box Integration
• Customizer wraps the Box widget to make it available anywhere in IBM Connections UX
• … not just as a Community app
Box on Homepage

3D Search
IBM internal sample - ! Not Open Source

The Nifty Scripties App
Install 10 nifty JS samples from the IBM Catalog
Also from GitHub – OpenCode4Connections

Managing Customizer in Production

About Payload Properties
Customizer payload section offers various control properties
• match-url
• A regular expression can be used to match against the current request
• e.g. id=[a-z0-9]{8}-([a-z0-9]{4}-){3}[a-z0-9]{12} to test for a GUID in the URL
• match-condition - A regular expression can be matched against various criteria
• user-name – compares value(s) to the currently logged in user
• user-email – compares value(s) to the email of current user
• user-id – compares value(s) to user id (a.k.a. subscriber id)
• include-files – one or more files to inject e.g. “main.js”
• include-repo – name of GitHub repository containing the include files
• cache-headers – one or more HTTP cache headers manage Customizer resources

Payload Filter Tips
Be Precise with your Customizer Target Paths
• Use the match.url property to inject extensions only as needed
• Avoid global paths unless necessary
Extension does not apply
to all Communities pages
Extension hits Homepage
and Communities only

Payload Filter Tips
Use filters to test Customizer extensions before rollout
• For example, set the user-name in the JSON payload to match a test account
• Once testing is complete you can remove this filter and target all users in org

Advanced Filters
Regular Expressions and User Group Support

Customizer Caching Policy
Customizer has an OOTB resource caching policy
• A unique ETag header is set for each CSS/JS resource in an app
• This is ETag is regenerated whenever the source repo is updated
• A max-age header of 12 hours is also automatically set
• Browser requests CSS/JS from server when max-age expires
• If no content changed then a 304 Not Modified is returned
• Policy can be overridden using the payload cache-headers
Default
cache
headers
Override
defaults in
App JSON

Customizer Test Framework
Automated Test Framework for Customizer Extensions
• Available on GitHub
• Covers standard samples like HelloWorld, Profiles etc
• Extensible to test your own specific apps
• https://github.com/ibmcnxdev/Cisco-Preview-IR3/tree/master/test
npm install
npm run webdriver-update
npm run webdriver-start
npm run test
• https://www.protractortest.org/#/api

Customization Maintenance
New extension point controls the exposure of new features
• com.ibm.connections.preview

Futures
Lightweight
On-Prem
Version
Guest
Model
Support
Enabling All
Cloud Orgs
Smart UI
Container
Automated
GitHub Code
Updates
IDE
Developer
Experience
Future-proofing
App Reg Ext Pts
Ecosystem
Development
Customers/BPs
OpenSource etc

Wrap Up

Managing Include Files
How to upload your include files to IBM Connections Cloud?
a) Share your repo with IBM – add "ibmcndev" as a collaborator
b) IBM creates a fork of your repo in github.com/ibmcnxdev and
grants you read access by default
c) Continue to work on your extension using your original repo,
and once ready create a pull request
d) IBM merges your pull request once acceptance criteria are met
e) Upon merge, the repo files are automatically pushed to IBM
Customizer via a webhook
f) Rinse & repeat starting at Step (c) for extension updates.
Customizer
GitHub
ibmcnxdev
repositories
Code Sync via webhook
IBM Connections Cloud

Expand your Customizer Horizons
• A new open source community puts more extensions at your fingertips
• https://opencode4connections.org
• Associated open source repo – github.com/opencode4connections

Useful Resources
Check out the doc and samples on the Connections Developer GitHub site
https://github.com/ibmcnxdev/customizer/
https://github.com/ibmcnxdev/customizer/blob/master/README.md
https://github.com/ibmcnxdev/customizer/tree/master/docs
https://github.com/ibmcnxdev/customizer/tree/master/samples
https://github.com/ibmcnxdev/customizer/blob/master/docs/IBMConnectionsCustomizer.pdf
Help the new community : https://opencode4connections.org
Watch some short videos on the OpenNTF YouTube channel http://bit.ly/2xmUuj5

Useful Resources
For a Jump Start with User Script Add-Ons etc.
• https://greasyfork.org/en
• https://tampermonkey.net/
• http://www.greasespot.net/
• https://zach-adams.com/2014/05/best-userscripts-tampermonkey-greasemonkey/
• https://www.lifewire.com/top-greasemonkey-tampermonkey-user-scripts-4134335

IBM Connections - Have it YOUR Way!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to IBM Connections - Have it YOUR Way!

Similar to IBM Connections - Have it YOUR Way! (20)

More from LetsConnect

More from LetsConnect (17)

Recently uploaded

Recently uploaded (20)

IBM Connections - Have it YOUR Way!