Here are the key steps to customize the CSS of the Connections profile page using the Customizer:1. Create a Customizer app that targets the "profiles" path. 2. In the app's JavaScript file, include any CSS files you want to inject using the "include-files" property.3. The CSS files can override or add new styles to customize elements on the profile page. For example, changing colors, sizes, positions etc. 4. Commit the app files to a GitHub repo and specify that repo in the app configuration in App Registry. 5. Save and enable the app. The CSS will be injected and applied to the profile page.6. To see changes
Come to this session and follow Customizer exercises to create real apps in IBM Connections Cloud. Don’t worry – all you need is your laptop and browser and you’re all set – no special set up, very light on broadband … what’s not to like? Initially we will walk you through some lo-code/no-code exercises to show how easy it is to get customizations up and running in IBM Connections. Then we can move on to some more challenging exercises but ultimately all the code and solutions are provided – no pressure. Attend this session to get comfortable with IBM Connections Customizer and its app dev model… well worth an hour of your time any day!
Similar to Here are the key steps to customize the CSS of the Connections profile page using the Customizer:1. Create a Customizer app that targets the "profiles" path. 2. In the app's JavaScript file, include any CSS files you want to inject using the "include-files" property.3. The CSS files can override or add new styles to customize elements on the profile page. For example, changing colors, sizes, positions etc. 4. Commit the app files to a GitHub repo and specify that repo in the app configuration in App Registry. 5. Save and enable the app. The CSS will be injected and applied to the profile page.6. To see changes
Protection and Verification of Security Design FlawsHdiv Security
Similar to Here are the key steps to customize the CSS of the Connections profile page using the Customizer:1. Create a Customizer app that targets the "profiles" path. 2. In the app's JavaScript file, include any CSS files you want to inject using the "include-files" property.3. The CSS files can override or add new styles to customize elements on the profile page. For example, changing colors, sizes, positions etc. 4. Commit the app files to a GitHub repo and specify that repo in the app configuration in App Registry. 5. Save and enable the app. The CSS will be injected and applied to the profile page.6. To see changes (20)
Here are the key steps to customize the CSS of the Connections profile page using the Customizer:1. Create a Customizer app that targets the "profiles" path. 2. In the app's JavaScript file, include any CSS files you want to inject using the "include-files" property.3. The CSS files can override or add new styles to customize elements on the profile page. For example, changing colors, sizes, positions etc. 4. Commit the app files to a GitHub repo and specify that repo in the app configuration in App Registry. 5. Save and enable the app. The CSS will be injected and applied to the profile page.6. To see changes
1. Philadelphia, April 26-27 2018
13
IBM Connections Customizer:
From Zero To Hero
Brian Gleeson, IBM @BGleesonIE
Martin Donnelly, IBM @TweeterDonnelly
3. 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
4. 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
5. Social Connections 13 Philadelphia, April 26-27 2018
13
IBM Customizer
Brief Overview
6. Social Connections 13 Philadelphia, April 26-27 2018
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
7. Social Connections 13 Philadelphia, April 26-27 2018
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 :-)
8. Social Connections 13 Philadelphia, April 26-27 2018
Simple Request Routing
Connections
21
9. Social Connections 13 Philadelphia, April 26-27 2018
Simple Request Routing
Connections Customizer
1
2
3
4
10. Social Connections 13 Philadelphia, April 26-27 2018
IBM
Customizer
Request
Lifecycle
11. Social Connections 13 Philadelphia, April 26-27 2018
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
12. Social Connections 13 Philadelphia, April 26-27 2018
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
13. Social Connections 13 Philadelphia, April 26-27 2018
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
15. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
The Object of the Exercise…
• Make a simple UI change to the IBM Connections Homepage
Replace
“Share Something:”
with
“Hello World!”
16. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
• What is needed:
1. IBM Connections Cloud organization
2. IBM Connections Cloud admin user id
3. GitHub Account
17. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
Use App Registry to enable a Hello World customizaton
• Click Admin > Manage Organization > Organization Extensions
• Choose New Apps Manager from the apps workspace window
18. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
Hello World App Design
• Click on Code Editor
• Note the highlighted props:
• services
• type
• payload
• path
19. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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
20. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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
21. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
helloWorld.user.js
JS locates a DOM
element and sets
its value to “Hello
World! “
22. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
Validate the DOM element using the browser debugging tools
The DOM element
span.shareSome-title
used in JS as a target
23. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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 ?
24. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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
25. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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.
26. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples
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
27. Social Connections 13 Philadelphia, April 26-27 2018
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
28. Social Connections 13 Philadelphia, April 26-27 2018
Hello World Examples – Dynamic JS
Solution – use lconn.homepage.userName in the JS code
29. Social Connections 13 Philadelphia, April 26-27 2018
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
30. Social Connections 13 Philadelphia, April 26-27 2018
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
31. Social Connections 13 Philadelphia, April 26-27 2018
13
Advanced Examples
Handling Events, CSS and
Themes
32. Social Connections 13 Philadelphia, April 26-27 2018
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:
33. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• Return to the App Registry apps workspace
• Click on the Profiles Customization Sample
34. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• Enable the app
• Select the Code Editor and view the app design (relevant fragment below)
35. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• All global-samples are open sourced in the IBM Connections Developers GitHub org
• https://github.com/ibmcnxdev/customizer/blob/master/samples/profiles/profilesCustomization.js
36. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• 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)
37. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• Refresh the Profiles page and observe the new layout
OLD NEW
38. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Customize the look and feel of the Connections Profile page
• Can anyone think of a more efficient way of applying this CSS resource ?
• HINT: Think about Line 17 …
39. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Load the CSS file directly rather than via the JS file
• CSS files can now be listed as “include-files”
40. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
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
41. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
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
42. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Use Visual Update 1 to decorate your whole organization
• Visual Update 1 is an open source project
• See cnx-custom-theme project on the IBM Connections Developers
43. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Use Visual Update 1 to decorate your whole organization
• The JSON for this app comes from cnx-custom-theme
44. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
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
45. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Extend Visual Update 1 to change the NavBar rendering
• Save the app updates and refresh the UI
• Observe the newly decorated NavBar
46. Social Connections 13 Philadelphia, April 26-27 2018
Advanced Examples – CSS Customizations
Extend Visual Update 1 to change the NavBar rendering
• 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
48. Social Connections 13 Philadelphia, April 26-27 2018
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)
49. Social Connections 13 Philadelphia, April 26-27 2018
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
50. Social Connections 13 Philadelphia, April 26-27 2018
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.
52. Social Connections 13 Philadelphia, April 26-27 2018
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
53. Social Connections 13 Philadelphia, April 26-27 2018
Enhanced Activity Stream
• https://github.com/OpenCode4Connections/enhanced-activity-stream
• Jay Agrawal
54. Social Connections 13 Philadelphia, April 26-27 2018
Status Tone Analyzer
• https://github.com/OpenCode4Connections/status-update-tone-analyzer
• John Jardin
55. Social Connections 13 Philadelphia, April 26-27 2018
Communities Weather App
• https://github.com/OpenCode4Connections/bluemix-weather-widget
• https://github.com/OpenCode4Connections/watson-workspace-links
• Brian Gleeson
56. Social Connections 13 Philadelphia, April 26-27 2018
3D Search
IBM internal sample - ! Not Open Source
57. Social Connections 13 Philadelphia, April 26-27 2018
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
58. Social Connections 13 Philadelphia, April 26-27 2018
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
59. Social Connections 13 Philadelphia, April 26-27 2018
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