From setting up your development environment to shipping a great new app for your IBM Connections Cloud instance, this session shows you how to achieve all that and more. We define and review a baseline project with basic scaffold code, including a structured layout, events, modules, package conventions, functional skeletons for streams, embedded experiences, apps interactions, native UI/UX dialogs, buttons, and more. We review best practice tips and "gotcha" areas, and provide detailed examples. Full code samples available at: https://github.com/dvdsmpsn/ibm-connect-2016-examples/

1. 1402 - Getting Technically Cozy with IBM
Connections Cloud APIs and App Dev
Patrick Li, AppFusions; David Simpson, AppFusions

2. Introduction
• Who?
• Inside-out vs. outside-in integrations
• Activity Stream Integration
• Embedded Experience
• Community Apps
• UI Extension Points

3. Who are we?
David Simpson
Senior Developer and Architect at AppFusions
@dvdsmpsn
Patrick Li
Co-Founder / CTO and Architect at AppFusions
@patrickli

4. Who are we?
AppFusions solves 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. Using real code…
https://github.com/dvdsmpsn/ibm-connect-2016-examples

6. Integration types
Inside-out: Injecting IBM Connections content
to your external app
Outside-in: Injecting your external content
into IBM Connections

7. Inside-out integrations
Enhances the stickiness 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 the stickiness 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 in IBM Connections Cloud

15. Deep Dive: Posting to Activity Streams

16. Steps to build smart looking activity events
Reference
http://tiny.cc/activity-streams-api

17. Several REST endpoints available
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. Basic Activity

20. Basic Activity with title

21. Activity with templated title

22. Activity with templated title & 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. Activity with generator

25. Activity with basic HTML content

26. Deep Dive: Embedded Experience

27. Embedded Experience
• Based on 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 in activity
External App URL
Custom data / payload
iframe dimensions

32. Message posted

33. Message posted
Context data as a string

34. Message posted
personData

35. Message posted
customPayload (from openSocial object)

36. Message posted
Cloud EE URL

37. Message posted
concise userData

38. Embed responsively…
https://cdn.rawgit.com/dvdsmpsn/ibm-connect-2016-
examples/master/activity-streams/cloud-embedded-experience/ee.html

39. Deep Dive: Community Apps

40. Community Apps
• A single 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
iframe dimensions

44. Community Apps – in situ

45. Persisting user data in 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. UI Extensions

47. Adding the IBM Connections header into your
external app

48. • Add an empty 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 for the 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. Service Menu extension
Documentation:
http://tiny.cc/service-menu

51. Service Menu extension
Use a 1 pixel x 1 pixel
transparent gif/png for the
icon
Documentation:
http://tiny.cc/service-menu

52. Service Menu extension
Documentation:
http://tiny.cc/service-menu

53. Contact Record extension
Documentation:
http://tiny.cc/contact-record

54. Contact Record extension
${contact_id}
The ID of the contact record.
Use a 1 pixel x 1 pixel
transparent gif/png for the
icon

55. Contact Record extension

56. Person Component extension
Documentation:
http://tiny.cc/person-component

57. Person Component extension
${user_id}
The ID 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. Person Component extension

59. File Menu extension
Documentation:
http://tiny.cc/file-menu

60. File Menu extension
${file_id}
The ID 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. File Menu extension

63. New File Menu extension
Documentation:
http://tiny.cc/new-file-menu

64. New File Menu extension

65. New File Menu extension

66. What’s next?

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…
David Simpson
david@appfusions.com
@dvdsmpsn
Patrick Li
patrick@appfusions.com
@patrickli

69. We are grateful and 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 Disclaimers cont.
© 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.