Uploaded byDavid Simpson
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev
The document presents an overview of IBM Connections Cloud APIs and application development, focusing on various integration types including inside-out and outside-in integrations. It highlights the framework developed by AppFusions to enhance workflows and the capabilities for embedding external apps and activity streams within the IBM Connections environment. Additionally, it includes technical details, coding examples, and future plans for integration applications across multiple platforms such as Salesforce and Google Drive.
More Related Content
Similar to IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev
- 1. 1402 - GettingTechnically Cozy with IBM Connections Cloud APIs and App Dev Patrick Li, AppFusions; David Simpson, AppFusions
- 2. Introduction • Who? • Inside-outvs. outside-in integrations • Activity Stream Integration • Embedded Experience • Community Apps • UI Extension Points
- 3. Who are we? DavidSimpson Senior Developer and Architect at AppFusions @dvdsmpsn Patrick Li Co-Founder / CTO and Architect at AppFusions @patrickli
- 4. Who are we? AppFusionssolves mixed-technology integration problems, bringing engineering and business workflows together, so you can work better, faster, smoother. Lately, we have been developing a scalable framework to develop, enable and deploy dozens of integrations for IBM Connections Cloud and on-premise. … and many more… IBM Connections
- 5.
- 6. Integration types Inside-out: InjectingIBM Connections content to your external app Outside-in: Injecting your external content into IBM Connections
- 7. Inside-out integrations Enhances thestickiness of the external app • Adding the IBM Connections header into your external app • Community Cards & Business Cards (on-premise only) • Using IBM Connections Cloud for authentication • Using any published IBM Connections REST API to pull content from IBM Connections into your app
- 8. Inside-out integrations -example 1507: Building Applications Using the IBM Connections Cloud Developer Experience
- 9. Outside-in integrations Enhances thestickiness of IBM Connections • Adding external links into to the IBM Connections Cloud header • Activity Streams • Cloud Embedded Experiences • Community Apps • Profiles
- 10. Outside-in integrations -example Powered by
- 11. Outside-in integrations -example Powered by
- 12. Outside-in integrations -example Powered by
- 13. Outside-in integrations -example Powered by
- 14. Live Demo: Salesforce inIBM Connections Cloud
- 15. Deep Dive: Postingto Activity Streams
- 16. Steps to buildsmart looking activity events Reference http://tiny.cc/activity-streams-api
- 17. Several REST endpointsavailable Public Updates /connections/opensocial/basic/rest/activitystreams/@public/@all/@all /connections/opensocial/oauth/rest/activitystreams/@public/@all/@all Personal Updates /connections/opensocial/basic/rest/activitystreams/@me/@all/@all /connections/opensocial/oauth/rest/activitystreams/@me/@all/@all Community Updates /connections/opensocial/basic/rest /activitystreams/urn:lsid:lconn.ibm.com:communities.community:COMMUNITY_UUID_HERE/@all/@all /connections/opensocial/oauth/rest /activitystreams/urn:lsid:lconn.ibm.com:communities.community:COMMUNITY_UUID_HERE/@all/@all Reference http://tiny.cc/activity-streams-api
- 18. A little setup •Using curl on the command line • Using some variables to hide user credentials, community_uuid
- 19.
- 20. Basic Activity withtitle
- 21.
- 22. Activity with templatedtitle & target
- 23. Templated titles ==i18n for free http://tiny.cc/templated-titles In English: • ${add}=${Actor} added ${Object}. • ${add.target}=${Actor} added ${Object} to ${Target}. • ${create}=${Actor} created ${Object}. • ${create.target}=${Actor} created ${Object} in ${Target}. • ${post}=${Actor} posted ${Object}. • ${post.target}=${Actor} posted ${Object} to ${Target}. • ${comment}=${Actor} created a comment. • ${comment.target}=${Actor} commented on ${Target}. • ${update}=${Actor} updated ${Object}. • ${update.target}=${Actor} updated ${Object} in ${Target}.
- 24.
- 25. Activity with basicHTML content
- 26. Deep Dive: EmbeddedExperience
- 27. Embedded Experience • Basedon opensocial technology • Produces an iframe which points to your server • iframe uses HTML5 sandbox attribute for security sandbox="allow-scripts allow-popups allow-forms allow-same-origin” • Cross-origin communication made possible with window.postMessage Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe#attr-sandbox https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
- 28. Embedded Experience -Registration • Customers must register each cloud embedded experience • Registration is in the admin UI • As a user with the AppDeveloper role
- 29. Embedded Experience -Registration
- 30. Embedded Experience -Posting an activity
- 31. OpenSocial object inactivity External App URL Custom data / payload iframe dimensions
- 32.
- 33. Message posted Context dataas a string
- 34.
- 35. Message posted customPayload (fromopenSocial object)
- 36.
- 37.
- 38.
- 39.
- 40. Community Apps • Asingle reusable embedded app* hosted on the IBM Connections Cloud server • Produces an iframe which points to your server • iframe uses HTML5 sandbox attribute for security sandbox="allow-scripts allow-popups allow-forms allow-same-origin” • Cross-origin communication made possible with window.postMessage * Embedded Apps – the term iWidget is retired from the lexicon!
- 41. Community Apps -Registration • Via REST API • As a user with the AppDeveloper role • Using curl: Documentation: http://tiny.cc/create-community-app
- 42. skeleton.json External App URL iframedimensions
- 44. Community Apps –in situ
- 45. Persisting user datain your app • OAuth 2 against IBM Connections Cloud /manage/oauth2/authorize /manage/oauth2/token • Collect user info /connections/opensocial/oauth/rest/people/@me • Store user data in your app
- 46.
- 47. Adding the IBMConnections header into your external app
- 48. • Add anempty div only when you want to display the IBM Connections header in your external app: • Isolate OneUI styles from the rest of your page Adding the IBM Connections header into your external app
- 49. • Test forthe presence of this div and only then inject the IBM Connections banner CSS & JS • apps.na.collabserv.com - North America • apps.ce.collabserv.com - Central Europe • apps.ap.collabserv.com - Asia Pacific Example: https://cdn.rawgit.com/dvdsmpsn/ibm-connect-2016-examples/master/connections-header/example/index.html Adding the IBM Connections header into your external app
- 50.
- 51. Service Menu extension Usea 1 pixel x 1 pixel transparent gif/png for the icon Documentation: http://tiny.cc/service-menu
- 52.
- 53.
- 54. Contact Record extension ${contact_id} TheID of the contact record. Use a 1 pixel x 1 pixel transparent gif/png for the icon
- 55.
- 56.
- 57. Person Component extension ${user_id} TheID of the current user from where the this button was clicked (i.e. the ID of the user whose Profile this was clicked from). Use a 1 pixel x 1 pixel transparent gif/png for the icon
- 58.
- 59.
- 60. File Menu extension ${file_id} TheID of the file. ${user_id} The ID of the current user. ${subscriber_id} The ID of the current user. ${org_id} The ID of the organization of the current user. ${customer_id} The ID of the organization of the current user.
- 61. File Menu extension •Specifies which mime type to use • Leave blank for all file types • Otherwise, a separate extension definition per mime type
- 62.
- 63. New File Menuextension Documentation: http://tiny.cc/new-file-menu
- 64. New File Menuextension
- 65. New File Menuextension
- 66.
- 67. Coming soon –Q1/Q2 2016 • General availability of integration apps for IBM Connections Cloud & on-premise • Dozens of flavors: … and many more… IBM Connections OneDrive/Office 365, Google Drive, IBM Jazz, Box, Dropbox, Asana, Salesforce, GitHub, Zendesk, Trello, JIRA, Confluence, Twitter, New Relic, IBM Maximo, WordPress, Chatter, Sharepoint, Alfresco and many more
- 68. Talk to us… DavidSimpson david@appfusions.com @dvdsmpsn Patrick Li patrick@appfusions.com @patrickli
- 69. We are gratefuland thankful for the support of the IBM Connections Cloud product and engineering teams. Thank you
- 71. Acknowledgements and Disclaimers Availability.References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
- 72. Acknowledgements and Disclaimerscont. © Copyright IBM Corporation 2016. All rights reserved. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. IBM, the IBM logo, ibm.com, and IBM Connections are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml AppFusions and AppSpokes are trademarks of AppFusions, Inc. in the United States and other countries. Other company, product, or service names may be trademarks or service marks of others.
Editor's Notes
- #18 We can post using Basic Auth or OAuth Public updates – for the Discover stream Personal updates – for your followers Community updates – for community members
- #19 For my examples I’m using curl on the command line rather than any browser based REST client This means that if you have the code, you can copy and paste it in your terminal window and it should easily produce an event in IBM Connections
- #20 No `event.title`, so the title defaults to use the actor’s displayName, the verb and the `event.object.displayName` Verb examples: `post`, `shares`, `update`
- #21 `event.title` is provided, so this is used for the title
- #24 Always use templated titles whenever you can. With templated titles, you get i18n for free.
- #25 Now added an icon, tooltip and link
- #26 * HTML support is limited. * All attributes are stripped. * Use tables for layout! Yes.
- #33 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
- #34 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
- #35 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
- #36 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
- #37 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections – including the opensocial info from the posted event `useData` - concise alternativeof `personData`
- #38 `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections – including the opensocial info from the posted event `useData` - concise alternativeof `personData`
- #39 Cloud embedded experiences will work on desktop and mobile, so embed responsively, so that they display correctly on both
- #49 Deviate from the documentation here… Don't ever add the Lotus/OneUI classes to your body tag …unless you use OneUI yourself Add an empty div as the first body element only when you want to display the IBM Connections header in your external app: … This one act isolates the OneUI styles from the rest of your page, removing untold pain.
- #51 Adds external links into to the IBM Connections header
- #52 - Added in Admin | Organization Extensions - Use a 1 pixel x 1 pixel transparent gif/png for the icon - This makes the design consistent with the rest of the dropdown menu - This is just a dumb link – no templating of parameters
- #54 - Contact Record Extension - Adds a new menu item in the contact record before the “More” dropdown
- #55 Added in Admin | Organization Extensions Supports URL Templating With the contact_id of the displayed contact record Use a 1px transparent image to keep the UI consistent
- #56 In Profile pages - Adds new button / menu item next to the Download vCard menu
- #58 Added in Admin | Organization Extensions Use a 1px transparent image to keep the UI consistent Supports templating of the user_id in the URL
- #59 Click on the new menu item and you can see the URL templating in action Here, we’re just echoing out the user_id, but I’ve also added the header integration in the external web page for fun
- #60 Add an item to the files dropdown/context menu next to any file listing
- #61 Use a 1 pixel x 1 pixel transparent gif/png for the icon
- #65 - Added in Admin | Organization Extensions - Use a 1 pixel x 1 pixel transparent gif/png for the icon - This makes the design consistent with the rest of the dropdown menu - This is just a dumb link – no templating of parameters
- #68 Lets extend IBM Connections together..
- #69 Lets extend IBM Connections together..