Successfully reported this slideshow.
Your SlideShare is downloading. ×

IBM Connections - Have it YOUR Way!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 59 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

More from LetsConnect (17)

Recently uploaded (20)

Advertisement

IBM Connections - Have it YOUR Way!

  1. 1. Philadelphia, April 26-27 2018 IBM Connections Have it Way! Martin Donnelly, IBM - @TweeterDonnelly
  2. 2. IBM Connections Customizer Social Connections 14, Berlin 2018 Introductions Martin Donnelly STSM – IBM ICS
  3. 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. 4. IBM Connections Customizer Social 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. 5. IBM Connections Customizer Social Connections 14, Berlin 2018 IBM Connections Customizer High Level Overview
  6. 6. IBM Connections Customizer Social 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. 7. IBM Connections Customizer Social 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. 8. IBM Connections Customizer Social Connections 14, Berlin 2018 Simple Request Routing Connections 21
  9. 9. IBM Connections Customizer Social Connections 14, Berlin 2018 Simple Request Routing Connections Customizer 1 2 3 4
  10. 10. IBM Connections Customizer Social Connections 14, Berlin 2018 Customizer with App Registry Connections Customizer Adjust payload Customer1 forUser X Customization Manager App Registry Customer2 forall Users
  11. 11. IBM Connections Customizer Social Connections 14, Berlin 2018 IBM Customizer Request Lifecycle
  12. 12. IBM Connections Customizer Social 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. 13. 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
  14. 14. IBM Connections Customizer Social 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. 15. IBM Connections Customizer Social Connections 14, Berlin 2018 IBM Customizer Big Picture
  16. 16. IBM Connections Customizer Social Connections 14, Berlin 2018 Demo Time ! Out-of-the-Box Samples
  17. 17. IBM Connections Customizer Social 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. 18. IBM Connections Customizer Social 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. 19. IBM Connections Customizer Social Connections 14, Berlin 2018 Hello World Hello World App Design • Click on Code Editor • Note the highlighted props: • services • type • payload • path
  20. 20. IBM Connections Customizer Social 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. 21. IBM Connections Customizer Social Connections 14, Berlin 2018 Hello World Examples helloWorld.user.js JS locates a DOM element and sets its value to “Hello World! “
  22. 22. IBM Connections Customizer Social 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. 23. IBM Connections Customizer Social Connections 14, Berlin 2018 Hello World The DOM element span.shareSome-title updated via JavaScript
  24. 24. IBM Connections Customizer Social 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. 25. IBM Connections Customizer Social Connections 14, Berlin 2018 Hello World – Applying Dynamic JS Like so…
  26. 26. IBM Connections Customizer Social 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. 27. IBM Connections Customizer Social 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. 28. IBM Connections Customizer Social Connections 14, Berlin 2018 CSS Samples Customize the look and feel of the Connections Profile page
  29. 29. IBM Connections Customizer Social 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. 30. IBM Connections Customizer Social Connections 14, Berlin 2018 CSS Samples OLD NEW
  31. 31. IBM Connections Customizer Social 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. 32. IBM Connections Customizer Social 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. 33. IBM Connections Customizer Social 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. 34. IBM Connections Customizer Social 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. 35. IBM Connections Customizer Social Connections 14, Berlin 2018 Apps from Customers & Community
  36. 36. IBM Connections Customizer Social 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. 37. IBM Connections Customizer Social Connections 14, Berlin 2018 Simplified Connections UX Eurapco/Belsoft used Customizer to reduce the Connections UX to just their needs
  38. 38. IBM Connections Customizer Social Connections 14, Berlin 2018 Community with a Shared Calendar • OnTime Suite – Shared Calendering
  39. 39. IBM Connections Customizer Social Connections 14, Berlin 2018 Community with Bulk Delete • https://github.com/OpenCode4Connections/communities-bulk-delete-members • Dale Parish
  40. 40. IBM Connections Customizer Social Connections 14, Berlin 2018 Enhanced Activity Stream • https://github.com/OpenCode4Connections/enhanced-activity-stream • Jay Agrawal
  41. 41. IBM Connections Customizer Social Connections 14, Berlin 2018 Communities Weather App • https://github.com/OpenCode4Connections/bluemix-weather-widget • https://github.com/OpenCode4Connections/watson-workspace-links • Brian Gleeson
  42. 42. IBM Connections Customizer Social 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. 43. IBM Connections Customizer Social Connections 14, Berlin 2018 3D Search IBM internal sample - ! Not Open Source
  44. 44. IBM Connections Customizer Social Connections 14, Berlin 2018 The Nifty Scripties App Install 10 nifty JS samples from the IBM Catalog Also from GitHub – OpenCode4Connections
  45. 45. IBM Connections Customizer Social Connections 14, Berlin 2018 Managing Customizer in Production
  46. 46. 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
  47. 47. IBM Connections Customizer Social 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. 48. IBM Connections Customizer Social 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. 49. IBM Connections Customizer Social Connections 14, Berlin 2018 Advanced Filters Regular Expressions and User Group Support
  50. 50. IBM Connections Customizer Social 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. 51. IBM Connections Customizer Social 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. 52. IBM Connections Customizer Social Connections 14, Berlin 2018 Customization Maintenance New extension point controls the exposure of new features • com.ibm.connections.preview
  53. 53. IBM Connections Customizer Social 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. 54. IBM Connections Customizer Social Connections 14, Berlin 2018 Wrap Up
  55. 55. IBM Connections Customizer Social 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. 56. IBM Connections Customizer Social 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. 57. IBM Connections Customizer Social 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. 58. IBM Connections Customizer Social 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. 59. IBM Connections Customizer Social Connections 14, Berlin 2018

×