IBM Connections Customizer: From Zero To Hero

Philadelphia, April 26-27 2018
13
IBM Connections Customizer:
From Zero To Hero
Brian Gleeson, IBM @BGleesonIE
Martin Donnelly, IBM @TweeterDonnelly

PLATINUM SPONSOR
GOLD SPONSORS
BRONZE SPONSORS
GOLD PLUS SPONSOR
SILVER SPONSORS
SPEEDSPONSORING BEER SPONSOR

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

Social Connections 13 Philadelphia, April 26-27 2018
Agenda
• IBM Connections Customizer – A Brief Overview
• Hello World Examples
• Advanced Examples
• Events, CSS and Themes
• Wrap Up

13
IBM Customizer
Brief Overview

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

IBM Connections Customizer
• 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

IBM
Customizer
Request
Lifecycle

What is App Registry ?
In general terms…
• A central app design repo, with UI and API access
• Helps manage and deploy apps on a per-org basis
• Provides a hierarchical model for defining applications
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 Anatomy of an 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

13
Hello World Examples

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

• What is needed:
1. IBM Connections Cloud organization
2. IBM Connections Cloud admin user id
3. GitHub Account

Use App Registry to enable a Hello World customizaton
• Click Admin > Manage Organization > Organization Extensions
• Choose New Apps Manager from the apps workspace window

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

Enable and validate the app
• Click on the Basic Information tab
• Select Enabled
• Click Save Changes
• Navigate to Connections Homepage
• Check that “Hello World!” text appears

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

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

Validate the DOM element using the browser debugging tools
The DOM element
span.shareSome-title
used in JS as a target

Recap
• Customizer used to insert custom text into the Homepage
• The text was inserted by injected JavaScript code
• The JS code assigned “Hello World!” to a Homepage DOM element
• The element can be identified via browser DOM inspector
Questions
• Where do the JavaScript resources live ?
• How do you add your own JS customizations ?

Where do the “include-files” reside?
• On-Cloud include-files always live in GitHub repositories
• GitHub repository is identified by the include-repo property
• That repo is located in:
(A) public IBM Connections Developer GitHub organization
OR
(B) a private repository in github.ibm.com
• IBM projects like “Visual Update 1” and “global-samples” live in github.ibm.com
• All other Customizer projects live in the public IBM Connections Developer GitHub organization
On-Prem Customizer resources stored here: /pv-connections/customizations

To customize Hello World …
• Edit helloWorld.user.js by clicking the pen icon
• Find and modify the “Hello World! ” string
• Save the changes by committing
Change string value to
your name
Click here
Click here1.
2.
3.

In Connections Cloud App Reg…
• Edit the Introductory Customizer App
• Select the Code Editor
• Change the include-repo value
• Click Save Changes
• Validate that the Homepage reflects the change

Hello World Examples – Dynamic JS
Challenge – Update helloWorld.user.js to display user name dynamically
• HINT: Global lconn JS object exists in Conn. Cloud
• You can explore the lconn object from the browser debug console
• Let’s take advantage of it in our JavaScript code injection

Hello World Examples – Dynamic JS
Solution – use lconn.homepage.userName in the JS code

Hello World Examples – API Calls
Challenge – Use Connections APIs to display the user name
• 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
Solution – Update helloWorld.user.js to use Connections APIs
• 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

13
Advanced Examples
Handling Events, CSS and
Themes

Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• Click the Person icon in the top right corner, then select My Profile
• Observe the layout of the standard Profile page – below:

• Return to the App Registry apps workspace
• Click on the Profiles Customization Sample

• Enable the app
• Select the Code Editor and view the app design (relevant fragment below)

• All global-samples are open sourced in the IBM Connections Developers GitHub org
• https://github.com/ibmcnxdev/customizer/blob/master/samples/profiles/profilesCustomization.js

• profilesCustomization.js just inserts a CSS resource into the HTML page
• i.e. profilesCustomization.css from the same folder
• Save the app (to enable it)

• Refresh the Profiles page and observe the new layout
OLD NEW

• Can anyone think of a more efficient way of applying this CSS resource ?
• HINT: Think about Line 17 …

Load the CSS file directly rather than via the JS file
• CSS files can now be listed as “include-files”

Use Visual Update 1 to decorate your whole organization
• Visual Update 1 is a Customizer application that will do just that !
• Available free from the IBM Connections App Catalog
• Project code name = Persicope

• 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

• Visual Update 1 is an open source project
• See cnx-custom-theme project on the IBM Connections Developers

• The JSON for this app comes from cnx-custom-theme

Extend Visual Update 1 to change the NavBar rendering
• Create new extension called Xtend Visual Update 1
• Change the repo name
• Change the include file name to visualUpdate/navbar-lab.css
Delete this line

• Save the app updates and refresh the UI
• Observe the newly decorated NavBar

• Right click and view the source of the Homepage
• Observe that the extensions are loaded in alphabetical order
• First Visual Update 1 then Xtend Visual Update 1
• The properties at the top of visualUpdate/navbar-lab.css override Visual Update 1

13
Wrap Up

Summary
In the pipeline
• Managed Proxy Service for 3rd party URIs
• Enhanced Matching Capabilities, e.g. arbitrary header values, local payload JS code
• Customizer Payload Validation via App Reg Schema Rules
• App Reg Wizard Experience for Customizer to move beyond JSON-only editing
Recent additions
• Out-of-the-box browser cache management support
• Roll out to Asia Pacific data center (apps.ap.collabserv.com)

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

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.

IBM Customizer Big Picture

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

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

Status Tone Analyzer
• https://github.com/OpenCode4Connections/status-update-tone-analyzer
• John Jardin

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

3D Search
IBM internal sample - ! Not Open Source

Summary
Customizer is available now for public and private cloud
• Customizer operates on a server-side proxy approach
• Works with App Reg to intercept and modify appropriate request/responses
• In public cloud, orgs need to be enabled for Customizer on request (24hr turnaround)
• Contact: ibmcndev@ibm.com
• Very useful for customizing Connections Green/Blue components
• Customizer also works with Pink components
• Pink components (OrientMe, ITM) also have extensions points for customization

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 Customizer: From Zero To Hero

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to IBM Connections Customizer: From Zero To Hero

Similar to IBM Connections Customizer: From Zero To Hero (20)

More from LetsConnect

More from LetsConnect (20)

Recently uploaded

Recently uploaded (20)

IBM Connections Customizer: From Zero To Hero