Calling all Developers: Building Connections Apps and Integrating with Pink

Vienna, October 16-17 2017
Building Connections Apps
and Integrating with Pink
Heath McCarthy
@heathwulf
Sam Bobo
@srbobo9
#PinkIsHere

PLATINUM SPONSORS
GOLD SPONSORS
SILVER SPONSORS
BRONZE SPONSORS

Social Connections 11 Chicago, June 1-2 2017Social Connections 12 Vienna, October 16-17 2017
Too Much of a Good Thing
• The explosion in
niche apps, driven
by “consumerization
of IT” has given
users choice.
• But productivity has
decreased because
“we” are not using
the same tools.
• And we ended up
working in
fragmented silos so
we are reinventing
and confused

Connections puts Collaboration in
Context
IBM Connections Cloud
(Integration Framework)
Content Apps Tools People Cognitive
Private
Cloud

Connections as Integrated
Collaboration
Tailored to Me
(Orient)
Tailored Spaces
for Us
(Communities)
Engagement
Centers
(ICEC Sites)

IBM Connections
Engagement Center
Communities
Extensions and Community Widgets
Security
App Catalog & Registry
Profiles
Orient Engagement Center Site
Files WikisBlogs
Forums Activities Activities
Widgets
Security
Widget Palette

Tailored Experiences
Spaces
Consistent Extension Model
Security
Unified Catalog
Orient Engagement Center Site
People Service Content Service
AppRegistry
Templates

The Connections App
A way to add value to
Connections
An Integrated Tool or
Feature
A collaboration solution
Collection of Extensions

User Experience Creation Spectrum
UX
Flow
Data Model
LiveGrid
Content
App
Integrated
App Customizer ICEC
Micro-Services
Data Storage

Who Creates Apps
By IBM
3rd Party
Solution
Providers
(ISVs)
Integration
Framework
Provider
App
Developer
Community
Business
Users
• Situational
Apps
• No/low code
• Template
Driven
• Content-
driven
• Data-driven
• Workflow
• Customers
• VARs
• ISSC

Business User

Who Creates Apps – Business Users
By IBM
3rd Party
Solution
Providers
(ISVs)
Integration
Framework
Provider
App
Developer
Community
Business
Users
• Situational
Apps
• No/low code
• Template
Driven
• Content-
driven
• Data-driven
• Workflow

Pink Applications Can Be Built by Anyone
Including extensions and integrations
Bill Renney
End User
Heather Reed
Citizen Developer
Jasmine Haj
Developer
Position: Software Engineer
Coding
Experience
:
Full stack
development
Use case:
Creating applications
that add value to
Connections and
contributing to the
LiveGrid ecosystem
Position:
Business Expert in the
Line of Business
Coding
Experience:
None
Use case:
Creating light-weight
applications to
overcome business
challenges
Position: Part Time Developer
Coding
Experience
:
Knowledge of
scripting and web
development
languages
Use case:
Rapid prototyping and
creating applications
internally for an
organization

Changing the Paradigm of
Development
Factors Causing the Shift
1. Growing technical skills of the
workforce
2. Decrease cycle times between ideas
and execution
3. Knowledge Workers increasing need for
efficiency amongst disparate tools
4. Speed of innovation is challenging the
traditional models of business growth
Leading Indicators of the Shift
1. Availability of Education
2. Modularization,
Microservices, and APIs
3. Low/No Code Environments
4. Standardization of
communication protocols on
the cloud
5. World Digitization

Catalyze Your Internal Ecosystem!

Analysts Predictions
By 2020, at least 70% of large enterprises
will have established successful citizen
development policies, up from 20% in 2010.
-- Gartner

LiveGrid App Creation Spectrum
Drag and Drop User Interface,
Low-Code App Builder
N/A
UX
Flow
HTML, CSS
@Formula Language
React, APIs
Custom Javascript
Micro-Services
Data Storage
End User Citizen Developer Developer
Spreadsheet, Scratch, TemplateData Model Connector, Domino REST API

Extensibility At Our Core
Join and contribute to the LiveGrid Ecosystem
• Ships with 3-5
predefined apps
• Ability to save apps as
templates to orgs app
registry
• Purchase partner grids
compatible with ISV
integrations
• Ships with 3-5
themes based on
IBM Design
principals
• Ability to save
themes to a registry
(including org-
branded designs)
• Ships with a library
of @functions based
on user research
• Documentation for
building and
contributing to the
library
• Ships with basic set of
visualization tools,
form controls, and
grid
• Ability to extend
component list with
custom objects
Components Templates Themes
@
functions

Integrated Apps

Flow of creating an integrated
Create your
solution deployed
as Cloud solution
Define your app in
Connections
Leverage
Connections APIs
Integrate into
Connections - via
Extensions and
Customizer
Set Security –
Oauth
Share with my org Submit to Catalog
Sell via IBM
Marketplace

Basic Architecture of an Integrated App
Catalog
IBM Connections
Cloud
(Multi-tenant)
Extension
Extension
Extension
Extension
Customizer
CSS
JS, etc
APP
Registry
Solution
Run-Time
Service
Service
Service
My Org
APPs

New Connections App Registry
• Registry is the definition for a
specific ORG of what is
deployed to the ORG
• Defined JSON Schema

Pink Extensions are Here

Sample ITM Customization
• Important To Me (ITM) Bar – A New Pink Component
• Out-of-the-box ITM Bar is populated with entries (people and
communities)
• Content is auto-populated for each user based on user’s own choices
and ITM suggestions
• Extensibility empowers organizations and users by
• Enabling control over ITM Bar content and entry behavior
• Overriding the auto-population with what is known to be important
to ourselves!
• ITM Bar Anatomy
Suggested PeopleFavourites
Add RemoveCommunity
Home
(Go to Activity
Stream)

Proxy
Middleware layer
API gateway
API assembler GraphQL
Mapping
Pink
feature
Authentication Response modification
Throttling Caching ……
Green
feature
New-to-IC6 APIs IC6-to-New APIs
How do we transition without breaking customers and
partners?

Customizing the Cloud

• Customize the Look
and Feel
• Modify the UX to meet
business needs
• Inject Something New
IBM Connections Blue
On Premise
IBM Connections Green
Cloud
IBM Connections Pink
Coming Soon: IBM Connections Customizer

Cloud Customization Risks and
Mitigations
Risk Description
Self-Harm
Situation where your customization impacts you users in a way you did
not intend
Multi-tenant impact When your customization negatively impacts other organizations
Trust of 3rd Party
injections
How do you know that a customization you acquired from someone
else is doing what you expect and have assumed.
Future Breakage
When the underlying Connections experience (eg. DOM) changes, and
it causes an issue with your customization or one you acquired from
others
Customizer Conflicts
When one customization (from what ever source) breaks or otherwise
impacts the working of another

Cloud Customization Risks and
Mitigations
• IBM will not support your customizations
• Terms of Use
• Cloud Extensions before Customizer
• Only Org Admin or Developer Role
• Regression testing
• Low risk of changes to Green/Blue DOM (except Periscope)
• IBM retains right to disable an Org’s access to Customizer
• Catalog Code review (not a guarantee)

ICEC

Why ICEC
• Extend Connections to new Audiences
• Build Engaging Experiences
• Define Widgets that drive integration into
Engagement Center sites

IBM Connections Engagement Center
• IBM Connections engagement
Center provides customizing on 3
different layer
• Design (CSS)
• Page layout
• Custom widgets
• Each element can be exported
and imported by default
• Sharing between various
implementations
• Easy transition from development
to production systems
Design
Page layout
Custom widgets

ICEC Design & Page customization
• The design of ICEC is based on css
stylesheets that can be extended
and customized as needed
• Pages are based on grid layouts.
Administrators can place widgets
as needed on pages
• Pages / widgets can be
personalized based on people
attributes, LDAP names, aso
• Import of new widgets or page
layouts through standard processes

ICEC Widgets
• ICEC supports
• creation of simple widgets
based on shipped frameworks
(e.g. atom feeds, web
clipping, connections content)
• fully custom widgets based
on HTML / Jscript
• Open for custom development
projects
• Widgets can be self contained
or leverage external
components, e.g. node.js app
as proxy

Out of the box ICEC Widgets & Page Elements
1. Activity-stream
2. ATOM / RSS Feed
3. Clipping
4. Community description
5. Community members
6. Community overview
7. Event
8. Files
9. Files explorer
10. Forum
11. HTML
12. Ideation-blog
13. iFrame
14. Important links
15. Kudos leaderboard 2
16. Links
17. Media gallery
18. My Communities
19. My Links
20. My Notes
21. My Quicklinks
22. Navigation
23. News
24. News channel
25. News list
26. News overview
27. News slider
28. People birthday 1
29. People finder
30. People selector
31. Pinned files
32. Popular content
33. Preferences
34. Profile completion
35. Profile picture
36. Profile tagging
37. Saved search
38. Static content - blog
39. Static content - wiki
40. Suggestions 1
(people& communities)
41. Tag cloud
42. Teaser
43. Top news
1 Not available in IBM Connections Cloud

Further information
• IBM Knowledge Center:
• https://www.ibm.com/support/knowledgecenter/en/SSYGQH_6.0.0/c
onnectors/icec/intro/cec-introduction_top.html
• Connections-apps
• http://connections-apps.com/product/icec-ibm-connections-
engagement-center/#training

Directions
• Widget Catalog
• Common Integration Model
• ICEC and AppReg
• Expand the Connections Catalog

More Resources for Developers
& Partners

From Connect to Now
Developer Activation
and Enablement
•As an independent
developer, I am
excited to
participate in the
Pink development
community, which
enables me to be
productive and
successful as quickly
as possible.
Add Value to Pink
•As a business
partner, I can
customize and
extend the pink
experience so that
my customer
becomes successful
in their deployment.
Powered by Pink
•As a business
partner, I can
consume all or some
of Pink services so
that I can build and
deliver a new
solution at low cost.
Go to Market
•As a business
partner, I can market
and sell my solution
in a way that suits
my business model,
so that I can reach
my target audience.

From Connect to Now
and Enablement
•Workshops:
Customizer and
LiveGrid
•DeveloperWorks
•Playbacks
Add Value to Pink
•Connections
Customizer
•ICEC
Powered by Pink
•LiveGrid
Go to Market
•Connections Catalog

Ready for IBM
Collaboration
Benefits to Developers
1. Mark provides increased visibility to
users, customers, partners and IBM
marketing resources.
2. Mark shows that solution leverages key
IBM product APIs and integration
standards.
3. Awareness to IBM global sales team
including IBM Business Partners
Benefits to Customers
1. Assurance that the solution’s
integration has been validated for IBM
Collaboration Solutions.
2. Reduced technical issues with pre-
installation testing
3. Easier access to validated Business
Partner products and solutions
http://bit.ly/readycollab
The updated “Ready for “ mark program is now available to software
developers who want to validate their solutions that integrate with ICS
offerings. Ready for IBM Collaboration also includes Watson Workspace,
Watson Work Services and IBM Connections Engagement Center (ICEC).

2018 Plans
and Enablement
•More Workshops
•DeveloperWorks
Hub
•IBM Think
Add Value to Pink
•Tailored Experiences
•AppReg Extensions
•UX Framework
•Customizer
Powered by Pink
•LiveGrid
•Content Service
Go to Market
•IBM Marketplace

Evolving Connections Together
• Playbacks and Showcases
• Sandboxes for Partners
• OpenCode4Connections

Calling all Developers: Building Connections Apps and Integrating with Pink

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Calling all Developers: Building Connections Apps and Integrating with Pink

Similar to Calling all Developers: Building Connections Apps and Integrating with Pink (20)

More from LetsConnect

More from LetsConnect (20)

Recently uploaded

Recently uploaded (20)

Calling all Developers: Building Connections Apps and Integrating with Pink

Editor's Notes