Nwtl2017 extending and customizing ibm connections cloud

Copyright 2017 IBM Corporation

Extending and CustomizingIBM Connections Cloud

Stefano Pogliani

Client Technical Professional – IBM Watson Work


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.

2


Abstract

In this session, we will explore the different options for customizing Connections Cloud


Integration options

Extension points


Extension points


Communi

tiesProfiles Contacts

Activity

Stream

Top

navigation

bar

Files

6

External

Apps

Activity

Stream

Top

navigation

bar

Files

CommunitiesProfiles Contacts


The Application Registry

• You access the “Application Registry” as an “Organization Administrator” under the “Organization Extensions” menu

• This “Application Registry” allows administrators to extend the behavior of the documented extension points• Either using a specific UI • Or by means of a JSON file


• A central app design repository with UI and API access

• Helps manage and deploy apps on a per-org basis

• Provides a hierarchical model for defining applications

• Services (like Communities, Verse, Muse etc) can declare Extension Points that expose

customizable features

• Apps are just containers for one or more extensions

• An Extension is an implementation of an Extension Point

SLIDE

What is the Application Registry?


Simplified Anatomy of an App

{

"services": ["Muse"],

"name": "My App",

"extensions": [ {

"type": "com.ibm.communities",

"payload": {

"match": {

"url": "communities" }

"include-files":["flipcard.user.js" ]

}}]}

SLIDE

Muse

My App

Flip Card Layout

Watson Tone Analysis

Homepage Customizations

NewsRiverFeed


The Application Registry : using the UI

• The UI of the Application Registry guides you to enter the relevant information required to specify any Application that extends the behavior of Connections, Verse, Muse etc


The Application Registry : using a JSON File

Viewing the extension• Click the download icon

• Save the file

• The file contains the JSON

representation of the extension

• Click the pen icon

• The JSON source is shown in an editor

You can create the extensiondirectly as a JSON file and upload it directly in the Registry

• This may ease copy/paste of extensions


• Documentation is available through this wiki page : https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Managing_organization_extensions&content=sdkcontent

The Application Registry

https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Managing_organization_extensions&content=sdkcontent


Modifying the Menu Header


Example : removing the “Communities” dropdown

14


Removing the Community Dropdown : How-To

1. Follow thenumbers

2. The strings on “4”can be just anything

3. Then click “Add Extension” (5)


Removing the Community Dropdown : How-To

1. Extension Point MUST be that string(for delete)

2. Path MUST be thatstring (for the Communities Dropdown)

3. Save Extension andAdd Application

4. Refresh screen


Example : add a Link

17


Add a Link : How To


2. Then click “Add Extension”


Add a Link : How To

1. Extension Point MUST be that string(for link)

2. Path MUST be thatstring (for navbar)

3. Insert the Payload


5. Refresh screen


Example : removing a Menu Item


Remove a menu item : How To




Remove a menu item : How To

1. Extension Point MUST be that string(for delete)

2. Path MUST be thatstring (for myNetwork)


4. Refresh screen


Example : add a new Dropdown

23


Add a new Dropdown : How To





1. Extension Point MUST be that string(for menu)

2. Path MUST be thatstring (for order)

3. Save Extension

4. Add another Extension



1. Extension Point MUST be that string(for menu.link)

2. Path MUST be thatstring

3. Payload contains theURL

4. Save Extension

5. Add another Extension



1. Extension Point MUST be that string(for menu.link)

2. Path MUST be thatstring (for order)

3. Payload contains theURL

4. Save Extension and Add Application

5. Refresh the screen


When editing an existing extension, you access its JSON representation.

An Extension can be also be created directly from a JSON representation (if you know and master the syntax)

Tips: modifying the Menu Header

28


Thanks to Daniele Vistalli (Factor-Y), we have some additional, UNOFFICIAL documentation :

https://github.com/Factor-y/ConnectionsCloudHowTo/tree/master/cloud/extensions/navigationbar

Additional Informations : modifying the Menu Header

29


Other UI extensions


User Interface Extensions

• Contact Record• Display a new link for a contact record in the context menu and details page for the specified contact

• File Menu• Add a new action to a specific file

• New File Menu• Display a new item in the New menu in Files

• Person Component• Extend the user's profile page

• Service Menu• Add a new menu item to show under the list of applications in navigation bar


User Interface Extensions

• Extensions add content to predefined locations in user interface

• Link from Connections Cloud to 3rd party applications

• Pass contextual information to 3rd party applications• ${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.

• Documentation• https://developer.ibm.com/social/cloud/#ext-uiconnections

• https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Managing_organization_extensions&content=sdkcontent

https://developer.ibm.com/social/cloud/#ext-uiconnections

https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Managing_organization_extensions&content=sdkcontent


User Interface Extensions – Using the UI

• The Application Registry UI can guide you through declaring these extension points


User Interface Extensions – JSON File

• You can also import JSON files in the App Registry

• See https://developer.ibm.com/social/cloud/#ext-uiconnections


Extension Point Flow Example

Your Application

Connections Cloud

http://www.yourcompany.com/brochure/79004547-0f89-

4ee5-ad5d-730251b4dc36

Your app retrieves file 79004547-

0f89-4ee5-ad5d-730251b4dc36

Send Brochure

1

2

3


Person Componenthttp://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Toolkit+docs#action=openDocument&res_title=personcomponent_sbt&content=sdkcontent

http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Toolkit+docs#action=openDocument&res_title=personcomponent_sbt&content=sdkcontent


Contact Record - http://www-10.lotus.com/ldd/appdevwiki.nsf/dx/contactrecord_sbt

http://www-10.lotus.com/ldd/appdevwiki.nsf/dx/contactrecord_sbt


New File Menu - http://www-10.lotus.com/ldd/appdevwiki.nsf/dx/newfilemenu_sbt

http://www-10.lotus.com/ldd/appdevwiki.nsf/dx/newfilemenu_sbt


Community Apps


iFrame Community Apps

• iFrame Community Apps allow extending the list of widgets available for a Community

• They are managed as any other extension

• Think to them as a way to add an iFrame(showing another application, or your own application) into the Community Overview page

• They can be positioned anywhere in the Community Overview page, even in the center column


iFrame Community Apps : Administration

• iFrame Community Apps are described by a JSON file

• The JSON file can be registered in the Connections App Registry as any other extension


iFrame Community Apps: Technical Considerations

• All is documented here :https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Creating_Communities_apps_with_the_URL_Widget&content=sdkcontent

• This documentation comes with an example also

• Additional examples are available here:https://gist.github.com/vfrancis/ebbec1381ca21d12dd2a

https://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Dev+Guide+topics#action=openDocument&res_title=Creating_Communities_apps_with_the_URL_Widget&content=sdkcontent


iFrame Community Apps : Technical Considerations

• Connections and your iFrame app communicate via an event listener.

• If you want to use information about the current user or community in your app, include a postMessage event listener and trigger Connections Cloud to pass contextual

information to the listener.

• Connections communicates to your iFrame app the following information:• Currently logged in User : id, mail, orgId, displayName

• Infos on the role: canContribute, canPersonalize

• Current Community: id, name, orgId



• Important things to consider:• The HTML hosting your iFrame is in a different domain than Connections Cloud

• Connections communicates information to your iFrame ONLY “on load”

• The net-effect is that your iFrame cannot issue AJAX calls to Connections to retrieve, after load, additional information.

• A server-side component needs to be planned if your iFrame actually requires to dynamically communicate with Connections

• Static Connections infos are allowed (the iFrame runs inside an authenticated Connections session)

• Example : you can embed a profile photo, but the id of the user must be hardcoded or may come from “onload”


Using APIs


Using IBM Connections Cloud APIs

• https://www-10.lotus.com/ldd/appdevwiki.nsf/xpAPIViewer.xsp?lookupName=API+Reference#action=openDocument&res_title=Getting_started_ic50&content=apicontent


NodeRED


Making Connections APIs available as nodes


Integration Examples


Integrating with the Activity Stream – App Registry


Preview a Connections File elsewhere

Files


User clicks on File Menu link

Browser Client IBM Connections CloudCustom App on Bluemix

App is called with File ID

Box Viewer URL is computed

Access Connections Files

File is uploaded to Box

Popup window is redirected to Box

Box Platform stores the file

Box Platform

Box Viewer shows the file

File Menu Extension

Connections File is downloaded

A popup window is opened


Muse


Muse : not everything in a nail

• Muse is a tactical solution

• The strategic solution for Connections customization is extension points

• Services declare extension points for customizable features

• Customizations are implemented based on the extension point rules

• Muse extensions are based on a “man-in-the-middle” approach

• Intercept and modify interesting request/responses

• More fragile than an extension point mechanism

• But a good tactical solution where no extension points are in place


Additional Information


Additional Information

Add the Connections banner to your app

Seamless User Experience with IBM Connections Cloud

Reuse the IBM Connections Cloud Banner in Apps

How to Build a Hello World App for IBM Connections

Do all these and more at –https://developer.ibm.com/social/cloud

http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=Toolkit+docs#action=openDocument&res_title=Adding_the_IBM_SmartCloud_for_Social_Business_banner_to_partner_applications_sbt&content=sdkcontent

http://bastide.org/2014/03/09/seamless-user-experience-with-ibm-smartcloud-for-social-business/

https://developer.ibm.com/social/2014/04/02/reuse-smartcloud-social-business-banner-apps/

http://www.lbenitez.com/2014/04/how-to-build-hello-world-app-for-ibm.html

https://developer.ibm.com/social/cloud/


Questions?


The End

Nwtl2017 extending and customizing ibm connections cloud

Technology

Transcript of Nwtl2017 extending and customizing ibm connections cloud