Downloaded 13 times
![IBM Connections Customizer Social Connections 14, Berlin 2018
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](https://image.slidesharecdn.com/customizer-soccnx-2018-181030214049/75/IBM-Connections-Have-it-YOUR-Way-13-2048.jpg)
![IBM Connections Customizer Social Connections 14, Berlin 2018
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](https://image.slidesharecdn.com/customizer-soccnx-2018-181030214049/75/IBM-Connections-Have-it-YOUR-Way-46-2048.jpg)
![IBM Connections Customizer Social Connections 14, Berlin 2018
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](https://crownmelresort.com/image.slidesharecdn.com/customizer-soccnx-2018-181030214049/75/IBM-Connections-Have-it-YOUR-Way-13-2048.jpg)
![IBM Connections Customizer Social Connections 14, Berlin 2018
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](https://crownmelresort.com/image.slidesharecdn.com/customizer-soccnx-2018-181030214049/75/IBM-Connections-Have-it-YOUR-Way-46-2048.jpg)
Uploaded byLetsConnect
IBM Connections - Have it YOUR Way!
The document provides an overview of a presentation on IBM Connections Customizer given in Berlin, Germany on April 26-27, 2018. The summary includes: - IBM Connections Customizer allows modifying the IBM Connections user experience by acting as a proxy between requests and responses and injecting custom JavaScript, CSS, and other items. - The presentation covered Customizer capabilities like request routing, the app registry for managing extensions, and demoed samples for UI changes, API calls, and CSS customizations. - Examples of customer and community apps that use Customizer were shown, and tips for managing Customizer in production environments were provided, including payload filtering and caching policies.
More Related Content
Similar to IBM Connections - Have it YOUR Way!
IBM Connections - Have it YOUR Way!
- 1. Philadelphia, April 26-272018 IBM Connections Have it Way! Martin Donnelly, IBM - @TweeterDonnelly
- 2. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Introductions Martin Donnelly STSM – IBM ICS
- 3. Please Note IBM’s statementsregarding 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. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Agenda • Customizer – A High Level Overview • Demo Time – Out-of-the-Box Samples • Apps from Customers and Community • Managing Customizer in Production • Wrap Up
- 5. IBM Connections CustomizerSocial Connections 14, Berlin 2018 IBM Connections Customizer High Level Overview
- 6. IBM Connections CustomizerSocial Connections 14, Berlin 2018 IBM Connections Customizer • 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
- 7. IBM Connections CustomizerSocial Connections 14, Berlin 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. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Simple Request Routing Connections 21
- 9. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Simple Request Routing Connections Customizer 1 2 3 4
- 10. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Customizer with App Registry Connections Customizer Adjust payload Customer1 forUser X Customization Manager App Registry Customer2 forall Users
- 11. IBM Connections CustomizerSocial Connections 14, Berlin 2018 IBM Customizer Request Lifecycle
- 12. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 13. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 14. IBM Connections CustomizerSocial Connections 14, Berlin 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. IBM Connections CustomizerSocial Connections 14, Berlin 2018 IBM Customizer Big Picture
- 16. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Demo Time ! Out-of-the-Box Samples
- 17. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World The object of this exercise… • Make a simple UI change to the IBM Connections Homepage Replace “Share Something:” with “Hello World!”
- 18. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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/
- 19. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World Hello World App Design • Click on Code Editor • Note the highlighted props: • services • type • payload • path
- 20. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 21. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World Examples helloWorld.user.js JS locates a DOM element and sets its value to “Hello World! “
- 22. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World Explore the DOM element using the browser debugger The DOM element span.shareSome-title used in JS as a target
- 23. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World The DOM element span.shareSome-title updated via JavaScript
- 24. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 25. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Hello World – Applying Dynamic JS Like so…
- 26. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 27. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 28. IBM Connections CustomizerSocial Connections 14, Berlin 2018 CSS Samples Customize the look and feel of the Connections Profile page
- 29. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Other Samples – CSS Customizations Load one or more CSS files directly • CSS files can now be listed as “include-files”
- 30. IBM Connections CustomizerSocial Connections 14, Berlin 2018 CSS Samples OLD NEW
- 31. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 32. IBM Connections CustomizerSocial Connections 14, Berlin 2018 NewsRiver Sample Applies a colour-coded background for Homepage updates/mentions/notifications etc • Provides an example of how to handle #Hash anchor links
- 33. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 34. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 35. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Apps from Customers & Community
- 36. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 37. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Simplified Connections UX Eurapco/Belsoft used Customizer to reduce the Connections UX to just their needs
- 38. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Community with a Shared Calendar • OnTime Suite – Shared Calendering
- 39. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Community with Bulk Delete • https://github.com/OpenCode4Connections/communities-bulk-delete-members • Dale Parish
- 40. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Enhanced Activity Stream • https://github.com/OpenCode4Connections/enhanced-activity-stream • Jay Agrawal
- 41. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Communities Weather App • https://github.com/OpenCode4Connections/bluemix-weather-widget • https://github.com/OpenCode4Connections/watson-workspace-links • Brian Gleeson
- 42. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 43. IBM Connections CustomizerSocial Connections 14, Berlin 2018 3D Search IBM internal sample - ! Not Open Source
- 44. IBM Connections CustomizerSocial Connections 14, Berlin 2018 The Nifty Scripties App Install 10 nifty JS samples from the IBM Catalog Also from GitHub – OpenCode4Connections
- 45. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Managing Customizer in Production
- 46. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 47. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 48. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 49. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Advanced Filters Regular Expressions and User Group Support
- 50. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 51. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 52. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Customization Maintenance New extension point controls the exposure of new features • com.ibm.connections.preview
- 53. IBM Connections CustomizerSocial Connections 14, Berlin 2018 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
- 54. IBM Connections CustomizerSocial Connections 14, Berlin 2018 Wrap Up
- 55. IBM Connections CustomizerSocial Connections 14, Berlin 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. Customizer GitHub ibmcnxdev repositories Code Sync via webhook IBM Connections Cloud
- 56. IBM Connections CustomizerSocial Connections 14, Berlin 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
- 57. IBM Connections CustomizerSocial Connections 14, Berlin 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
- 58. IBM Connections CustomizerSocial Connections 14, Berlin 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
- 59. IBM Connections CustomizerSocial Connections 14, Berlin 2018