Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MAS202 Customizing IBM
Connections
Paul Bastide, IBM
@prb112
Customizing IBM Connections
● IBM Connections enables you to connect
and socialize with colleagues, find
experts, and quic...
Who is this engineer?
● Since 2004, Paul Bastide has worked with
IBM's partners and customers to develop
compelling integr...
The Customization Journey (Agenda)
● IBM Connections Developers
● The Layers of Customizations
● The Social Experience
● T...
IBM Connections Developers
IBM Connections Developers
● In September 2014, we launched IBM
Connections Developers.
● IBM Connections Developers enabl...
For the Developer … There are Components to the Journey
The Elements of the Social Application
Users
Content
Rate
RecommendTag
Comment
@Mention
Share
Subscribe
Connect
Follow
Dis...
Example Social Applications
Go see Miguel Estrada
present AD202 to see
how this Social
application is developed
http://ibm...
The Layers of Customization
The Layers of Customization
● IBM Connections
– Change the Experience.
– Use the Service Data.
– Integrate with the Plumbi...
Access Modes and Deployment Styles
● There are two main types of IBM
Connections Deployments:
– Cloud – IBM hosts a multit...
The Social Experience
The Social Experience
● The Social Experience is how you want
your users to interact with IBM
Connections.
● The interacti...
IBM Connections Theme
● The IBM Connections Theme is a
modular combination of CSS,
JavaScript and HTML.
● The Theme has La...
Modifying Themes
Modify the Corresponding Files
● Place your modified files in the
<customization_dir>/<app>/<fileLocation...
Debug Theme
Configure Customization Debug
● Open the WebSphere Solutions Console
● Expand Environment
● Click WebSphere Va...
Service Context Root
● Login the WebSphere Console
● Expand Applications > Application
Type > WebSphere Enterprise
Applica...
Don't Forget to Change the LotusConnections-config.xml and Sync
● Find the Deployment Manager profile's LotusConnections-C...
Logos
● Replace the IBM Connections logo with
your company logo.
● Update the Customization Directory
– customizationDirec...
<p id="lconnErrorDetails" style="display:none;" class="lconnErrorDetails">
<label for="lconnErrorText">
Copy the following...
Header.jsp Top of the Page Framework with the Applications Megamenu
user.jsp – Edit the User menu (logout)
communities.jsp...
Footer.jsp Sit at bottom of page. Loads the NavBar Color and Background and Help Links
<footer class="lotusFooter" role="c...
Homepage → Getting Started
Modify the gettingstarted-config.xml
Configure your steps
Point to the HTML you want to activat...
CreateYour StyleSheet
● The easiest way to master the CSS is use the OneUI
reference and Firebug/Chrome Inspector.
● See –...
See
Modify
Validate
And Copy the CSS Rule
The General Approach Works
You may have to specify !important
JavaScript
● Each IBM Connections application
renders in the Browser (mainly AJAX),
and rarely on the Server.
● The User I...
JavaScript: Jazz Application Framework (JAF)
● IBM Connections uses a modified code
drop of the Rational Concert / JAF
fra...
Extension Points
● Extension points enable activation of
various JavaScript and CSS components
used in the Web Apps via Co...
Web Bundles (net.jazz.ajax.webBundles)
● The webBundles alias defines the resource context is example.
● Accessing test.js...
Dojo Module Binding (net.jazz.ajax.dojoModuleBinding)
● dojoModuleBinding establishes a relationship between modules (not ...
CSS (com.ibm.lconn.core.styles.cssBinding)
● cssBinding establishes a relationship
between style sheets, when the
referenc...
Custom Themes (com.ibm.lconn.core.styles.themes)
● Defines the Resources for a Theme, and
the paths for the Theme, the bes...
Overriding JavaScript
● You can create a bundle or drop the
unjared javascript into the right
customization_data directory...
Debugging Theme and JavaScript Issues
● Disables the net.jazz.ajax JS loader
● Open the Page
● Open Firebug or Any Web Too...
https://connections.imaginnado.com/activities/service/html/mainpage#dashboard,myactivities?debug=true
Demonstration Debugg...
IBM Connections Profiles Business Card
● IBM Connections Profiles provides you a
simple embed on any web page using just
J...
IBM Connections Community Business Card
● The Community Business Card provides
you a simple embed on any web page
using ju...
IBM Connections
Business Cards
Demos
iWidget
● An iWidget is a browser-based component
model used to extend IBM Connections.
– Single Rendering Domain with Con...
iWidget Key Elements
● User Profile is available via iContext:
– this.iContext.getUserProfile().getItemValue('userid');
– ...
Supported Layouts and Tips
● iWidgets can be put on only a few
services:
– Profiles
– Communities
– Homepage
● Many partne...
Access to Connections Data
● Access the component via Variable in the
iWidget:
– Activities {activitiesSvcRef}
– Blogs {bl...
Homepage Layout
Homepage
Admins can specify the apps
(opensocial or iWidgets) added.
Also register via wsadmin command
Homepage
My Page
Users can
add
Gadgets to
their
Starting
Page
Profiles Layout
Use the FTL to
change the
Layout in the
Widgets
Change the Look
and Feel Using
Prior Methods
Add Fields to...
Communities Layout
Communities
Disable showing in palette
using showInPallete=false
(part of widgetDef)
Define widgetDef a...
OpenSocial Gadget
● OpenSocial is an open web standard
which defines how to build social enabled
applications, known as ga...
IBM Connections and OpenSocial
● OpenSocial is partnered with ActivityStreams to provide an event api and people api.
● IB...
Homepage Layout
{yourServer}/connections/resources/web/com.ibm.lconn.gadget/test/bootstrap.html?render=test&oneui=3
Activity Streams (Homepage and Communities)
Uses the Embedded View,
an onLoadHandler and Data
Context passed with the
Even...
Homepage Layout – Share Dialog
IBM Connections
OpenSocial and iWidget Demo
Other Considerations forYour Full Control
● Resumable Sessions and Shared Workers
http://stackoverflow.com/questions/10886...
IBM Connections Homepage
Demonstration
See a more complex scenario AD403
Extend IBM Connections with Muse
Benjamin Kroeger...
Cloud:Theme and Organization Extensions
● IBM Connections Cloud enables
developers a limited set of UI changes.
– Select T...
Organization Extensions Interface
Add Extensions
Import / Export / Delete
(All of the Extensions)
Each extension
Is a JSON...
Wizard and Config File
You don't need to know JSON to setup the Organization
Extensions.
Often called
Action Link
Extensio...
Add or Import
Click Add Extensions
Click Import Extensions
The Organization Extensions
NEW Activity Streams Extension Point NEW
Organization Extensions: Contacts
Select Contacts
Select Contact Record
Enter Name / Description
Click Icon
Select a Desti...
Contacts
Navigate to a contact record https://apps.na.collabserv.com/mycontacts/home.html#/contact/33734
Click Paul's Cont...
Organization Extensions: Profiles
Select Person
Select Person Component
Enter Name / Description
Click Icon
Select a Desti...
Profiles
Your Action
Navigate to a profile https://apps.na.collabserv.com/contacts/profiles/view/20089096
Click on the act...
Organization Extensions: Files
Select Files
Select File Menu
Enter Name / Description
Click Icon
Select a Destination URL
...
Files
Click Apps > Files
Find A File
Click More Actions
Organization Extensions:
Top Navigation Bar
CSS to Direct
To Top Level
Select Person
Select Person Component
Enter Name / ...
Top Navigation Bar
Without CSS
With CSS
IBM Connections Cloud
Service Menu and Navigation Bar
http://connections.imaginnado.com/cloudBanner.html
The Service Data
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpAPIViewer.xsp?
lookupName=API+Reference#action=openDocument&...
IBM Connections OpenSocial and Activity Streams
● OpenSocial and Activity Streams are
generally seen on the Homepage, insi...
IBM Connections Profiles and Profiles Administration
● Profiles enables users to
change their personal data and
find data ...
IBM Connections People Finder
● People Finder is custom built on the
Search Service, and is designed for wild
card and qui...
IBM Connections Communities
● Communities enables developers to
provide an organization of people of a
common interest, an...
IBM Connections Activities
● Activities enables a team to collect,
organize and share content related to a
goal or project...
IBM Connections Blogs
● Blogs need I explain more enables users
to subscribe to blogs, interact and
comment.
● Many partne...
IBM Connections Bookmarks
● Bookmarks is a social bookmarking
system to record resources which are of
interest to others a...
IBM Connections Files
● Files enables users to share, discover,
comment and interact files and folders.
● There are TWO ma...
IBM Connections Forums
● Forums captures conversations around
topics and categories.
IBM Connections Wikis
● Wikis enable the capture of topic based
knowledge.
● Wikis provide versioning and commenting
and l...
IBM Business Support Services
● Business Support Services is a workflow-
based management system which tenants
(organizati...
Other Social Data Services
● IBM Connections Chat Brendan Arthurs is
hosting a session AD204 which goes into
this in detai...
Service Data
Demo
The Plumbing
IBM Connections Search
● IBM Connections Search is based on
Lucene.
– Scopes and Constraints
– Facets on the Search
– Not ...
IBM Connections Events
● IBM Connections Events is a Service
Provider Interface that enables developers
to subscribe to th...
Authentication and Authorization Types
1. Security Assertion Markup Language, (SAML
1.1/2.0) enables an organization to li...
The Tools
Getting Started...Also know as...The Tools
● In General You only need a modest set of
tools of Dev Tools:
– Simple / Theme...
The Tools: IBM Connections Cloud SDK
● The IBM Connections SDK is a set of
libraries and code samples that you use
for con...
Wrap Up
● Discussed Customization, Experience and
Data
● Seen the Plumbing
● Shown the Tools
● Learned what's available fo...
Engage Online
§ SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
§ Social ...
Backup
Configure Administration
For Homepage
● Navigate to the WebSphere Console
● Click Applications > All Applications
● Select...
Notices and Disclaimers
Copyright © 2015 by International Business Machines Corporation (IBM). No part of this document ma...
MAS202 - Customizing IBM Connections
Upcoming SlideShare
Loading in …5
×

MAS202 - Customizing IBM Connections

IBM Connections enables you to connect and socialize with colleagues, find experts, and quickly share and organize information to get work done. As a developer, you can leverage the IBM Connections data to provide a better experience for your users. In this session, you learn what features you can extend, leverage and use to build a compelling experience. The session highlights how best to extend and work with the IBM Connections Cloud.

Updated file adds pointers to other sessions throughout the week.

  • Be the first to comment

MAS202 - Customizing IBM Connections

  1. 1. MAS202 Customizing IBM Connections Paul Bastide, IBM @prb112
  2. 2. Customizing IBM Connections ● IBM Connections enables you to connect and socialize with colleagues, find experts, and quickly share and organize information to get work done. As a developer, you can leverage the IBM Connections data to provide a better experience for your users. In this session, you learn what features you can extend, leverage and use to build a compelling experience. The session also highlights how best to extend and work with the IBM Connections Cloud. ● Master Class ● Date and Time: Sun, 25-Jan, 03:45 PM - 04:45 PM ● Location: Swan - Mockingbird 1-2 http://swandolphinmeetings.com/space/floorplans/m-swball.html
  3. 3. Who is this engineer? ● Since 2004, Paul Bastide has worked with IBM's partners and customers to develop compelling integrations with IBM Collaboration Solutions and Enterprise Social Solutions.
  4. 4. The Customization Journey (Agenda) ● IBM Connections Developers ● The Layers of Customizations ● The Social Experience ● The Service Data ● The Plumbing ● The Tools ● Wrap Up Cloud Developers pay close attention to Developer
  5. 5. IBM Connections Developers
  6. 6. IBM Connections Developers ● In September 2014, we launched IBM Connections Developers. ● IBM Connections Developers enables you to “Think social. Develop with web standards. Deliver outstanding apps!” ● The website is available at http://ibm.co/1AgLgkr ● The site has links to IBM Documentation, Blog Entries, Examples and Support. ● Go see Vijay Francis with AD102 Mastering the IBM Connections Developers Web Experience
  7. 7. For the Developer … There are Components to the Journey
  8. 8. The Elements of the Social Application Users Content Rate RecommendTag Comment @Mention Share Subscribe Connect Follow Discovery, Relationships and Recommendations
  9. 9. Example Social Applications Go see Miguel Estrada present AD202 to see how this Social application is developed http://ibm.co/13X3JnK
  10. 10. The Layers of Customization
  11. 11. The Layers of Customization ● IBM Connections – Change the Experience. – Use the Service Data. – Integrate with the Plumbing. ● Use a combination of layers, deployments and access modes. ● Often partners start off with a simple iWidget to bring their experience to IBM Connections. http://wildfire.openntf.org/
  12. 12. Access Modes and Deployment Styles ● There are two main types of IBM Connections Deployments: – Cloud – IBM hosts a multitenant environment. ● Limited Access to Change the Social Experience ● Limited Co Deployment Options ● No Changes to the Core Application without IBM – Hosted – A single organization hosts their own environment. ● Complete Control of Everything ● There are some additional wrinkles to think about: – Mobile ● Uses the IBM Connections Mobile App ● MAAS Capable ● Loosely Coupled Integrations – Browser ● 100% Control of the Entire Experience in a Hosted Environment ● Loosely Coupled Integration in a Cloud Environment http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Configuring_MaaS360
  13. 13. The Social Experience
  14. 14. The Social Experience ● The Social Experience is how you want your users to interact with IBM Connections. ● The interactions may include your Social Application, or be purely Look and Feel. ● Logic - Based on Dojo 1.9.2 using AMD – Most Applications use pre-AMD format ● Look and Feel - Based on One UI 3.0.3 iWidgets and OpenSocial Gadgets ● Packaging – Based on OSGI Plugins and Jazz Ajax Framework
  15. 15. IBM Connections Theme ● The IBM Connections Theme is a modular combination of CSS, JavaScript and HTML. ● The Theme has Layers of Complexity that developers can tap: – Simple (Configure and Modify) – Complex (Extend and New) ● Developers have mixed in jQuery using the require.js
  16. 16. Modifying Themes Modify the Corresponding Files ● Place your modified files in the <customization_dir>/<app>/<fileLocation> such as /local/conx/connections_data/customizatio ns/common/nav/templates/menu Reload the Common Ear ● Navigate to WebSphere Admin Console ● Click Applications → All Applications ● Select Common, Select Stop, then Submit Action ● Select Common, Select Start, then Submit Action ● Open a New Private Window ● Launch the IBM Connections Homepage Be sure to set - CONNECTIONS_CUSTOMIZATION_DEBUG
  17. 17. Debug Theme Configure Customization Debug ● Open the WebSphere Solutions Console ● Expand Environment ● Click WebSphere Variables ● In the Scope section, select the cell from the list, and then click New. ● Enter the following values into the fields: – Name: CONNECTIONS_CUSTOMIZATION_DEBU G – Value: true ● Click Apply ● Click OK Customization & Trace ● Open the WebSphere Solutions Console ● Navigate Troubleshooting > Logs and Trace ● Select the server where trace was enabled. ● Click Diagnostic trace > Configuration. ● Change log detail levels window, remove ● Click OK and save the changes. ● Restart the Server Look for the trace.log and SystemOut.log com.ibm.lconn.core.web.customization.*=all http://ibm.co/1Ga2sM2
  18. 18. Service Context Root ● Login the WebSphere Console ● Expand Applications > Application Type > WebSphere Enterprise Applications ● Click on the Application (Activities) ● Click Context Root for Web Modules ● Change the Value of the Module of Interest ● Click Ok http://www-01.ibm.com/support/docview.wss?uid=swg21627891
  19. 19. Don't Forget to Change the LotusConnections-config.xml and Sync ● Find the Deployment Manager profile's LotusConnections-Config folder ● Edit the LotusConnections-config.xml file ● Find the sloc:serviceReference/sloc:href/sloc:hrefPathPrefix ● Change to match your changed Context Root for Web Module ● Synchronize the Profile and REBUILD your HTTP plugin! You can also disable and enable certain services like Chat Awareness and Social Recommendations in the LotusConnections-config.xml.
  20. 20. Logos ● Replace the IBM Connections logo with your company logo. ● Update the Customization Directory – customizationDirectory/javascript/com/ibm/lc onn/core/styles/images/logo.png – customizationDirectory/javascript/com/ibm/on eui3/styles/imageLibrary/Branding/Logos/ibm LogoOpaque16.png – customizationDir/themes/<theme_name>/cus tom.css ● Keep in mind there are Left-to-Right and Right-to-Left Layouts... if you need Right to Left use RTL appended to the css file
  21. 21. <p id="lconnErrorDetails" style="display:none;" class="lconnErrorDetails"> <label for="lconnErrorText"> Copy the following error information and email it to <a href="mailto:lcadmin@mycompany.com">lcadmin@mycompany.com</a>. </label> <textarea id="lconnErrorText" readonly="readonly" class="lotusText" wrap="off"> </textarea> </p> Login Error
  22. 22. Header.jsp Top of the Page Framework with the Applications Megamenu user.jsp – Edit the User menu (logout) communities.jsp – Edit the Communities Menu people.jsp – Edit the People Menu apps.jsp - Edit the App Menu
  23. 23. Footer.jsp Sit at bottom of page. Loads the NavBar Color and Background and Help Links <footer class="lotusFooter" role="contentinfo"> <ul> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Demo</a></li> <li><a href="javascript:;">Help</a></li> <li><a href="javascript:;">Support Forums</a></li> <li><a href="javascript:;">Link</a></li> <li><a href="javascript:;">Link</a></li> <li><a href="javascript:;">About</a></li> <li><a href="javascript:;">[Application] on ibm.com</a></li> <li><a href="javascript:;">Submit Feedback</a></li> </ul> </footer><!--end footer-->
  24. 24. Homepage → Getting Started Modify the gettingstarted-config.xml Configure your steps Point to the HTML you want to activate on startup You can reset each user's Getting Started Flag using the Jython Admin Interface
  25. 25. CreateYour StyleSheet ● The easiest way to master the CSS is use the OneUI reference and Firebug/Chrome Inspector. ● See – Modify – Validate – Copy into CSS ● Copy the CSS into customizationDir/themes/defaultTheme ● Also you can look at com.ibm.lconn.core.styles_version.jar ● You can check it using the URL https://<server>/connections/resources/web/com.ibm.one ui3.styles/css/defaultTheme/defaultTheme.css You can also add your own CSS for your own apps
  26. 26. See Modify Validate And Copy the CSS Rule The General Approach Works You may have to specify !important
  27. 27. JavaScript ● Each IBM Connections application renders in the Browser (mainly AJAX), and rarely on the Server. ● The User Interface is built via JavaScript logic which is delivered in Dojo Layers. ● Uses OSGI bundles to manage dependencies and minify the javascript code. Per Claudio Procida http://www.slideshare.net/ClaudioProcida/connections-extensions-and-themes-demystified
  28. 28. JavaScript: Jazz Application Framework (JAF) ● IBM Connections uses a modified code drop of the Rational Concert / JAF framework. – Generates Dojo Layers and CSS – Resolves Dependencies and Minification – Managed as OSGI Bundles – Defined OSGI Extension Points – Server-side component ● Components are in 2 main forms: – OSGI Bundles (JARs – Manifest/CSS/JS) – Customization Directory (JavaScript) http://www.slideshare.net/ClaudioProcida/connections-extensions-and-themes-demystified JavaScript JavaScript _js?include=js1&include=js2... CSS JavaScript https://jazz.net/wiki/bin/view/Main/JAFSdk
  29. 29. Extension Points ● Extension points enable activation of various JavaScript and CSS components used in the Web Apps via Common.ear. ● Extension-point are: – net.jazz.ajax.webBundles – net.jazz.ajax.dojoModuleBinding – com.ibm.lconn.core.styles.cssBinding – com.ibm.lconn.core.styles.themes ● More complex uses are available with: – net.jazz.ajax.dojoModules – net.jazz.ajax.dojoResourceModules /opt/IBM/Connections/data/shared/provision/webresources/
  30. 30. Web Bundles (net.jazz.ajax.webBundles) ● The webBundles alias defines the resource context is example. ● Accessing test.js in the example bundle would be https://connections.imaginnado.com/connections/resources/web/example/test.js
  31. 31. Dojo Module Binding (net.jazz.ajax.dojoModuleBinding) ● dojoModuleBinding establishes a relationship between modules (not bundles), when the referenced bundle is loaded, the referencing bundle is activated. ● A common binding is lconn.core.header ● Developers can easily activate their Dojo Module on every page.
  32. 32. CSS (com.ibm.lconn.core.styles.cssBinding) ● cssBinding establishes a relationship between style sheets, when the referenced bundle is loaded, the referencing bundle is activated. ● You should look at the CSS that is used in your theme to do the bindings.
  33. 33. Custom Themes (com.ibm.lconn.core.styles.themes) ● Defines the Resources for a Theme, and the paths for the Theme, the best is to start with a well known theme and it's bundles. ● A Great Example is on IBM Greenhouse. ● You Must change the LotusConnections- Config.xml to point to the theme id. ● Themes can be used in Communities or as Global Themes <properties> <genericProperty name="com.ibm.lconn.core.web.styles.th eme.default">vanilla</genericProperty> <!-- Other generic properties --> </properties>
  34. 34. Overriding JavaScript ● You can create a bundle or drop the unjared javascript into the right customization_data directory. ● Identify the JavaScript you want to Change, Edit or Override ● Copy it to the customizationDir/javascript/<where it loads> from ● Test it out http://www-01.ibm.com/support/knowledgecenter/SSYGQH_5.0.0/admin/customize/t_customize_override_js.dita
  35. 35. Debugging Theme and JavaScript Issues ● Disables the net.jazz.ajax JS loader ● Open the Page ● Open Firebug or Any Web Tools Console ● Add ?debug=true to the page you are having an issue. – https://<server>/communities/service/html/own edcommunities?debug=true ● Reload the Page ● Watch the Page Load Closely ● You don't get the minified JavaScript. You get each JavaScript Independently Loaded.
  36. 36. https://connections.imaginnado.com/activities/service/html/mainpage#dashboard,myactivities?debug=true Demonstration Debugging
  37. 37. IBM Connections Profiles Business Card ● IBM Connections Profiles provides you a simple embed on any web page using just JavaScript/HTML. ● The business card provides a snapshot of a user's profile information and contact details. ● It's super customizable and secure. ● You can fully integrate and customize it: – Integrating Business Card http://ibm.co/1wQkYiH – Customizing the Business Card http://ibm.co/1z0V6Gx
  38. 38. IBM Connections Community Business Card ● The Community Business Card provides you a simple embed on any web page using just JavaScript/HTML. ● The business card displays the image associated with the community, and includes key links that allow users to quickly navigate to a community from the application in which the card is deployed ● You can learn to Integrate with the Community Card http://ibm.co/1DBeRGq ● You can still use debug=true here! http://ibm.co/1xV63Ia
  39. 39. IBM Connections Business Cards Demos
  40. 40. iWidget ● An iWidget is a browser-based component model used to extend IBM Connections. – Single Rendering Domain with Connections – Scoped with Context – Modes and Properties Sets and Eventing – Server-Side Proxy (or use CORS) ● An iWidget is an XML markup that links to CSS Resources and JavaScript – Located at any URL (Local or Remote) – Cached ● Small Bit of Admin Needed public.dhe.ibm.com/software/dw/lotus/mashups/developer/iwidget-spec-v2.pdf https://connections.imaginnado.com/connections/resources/web/ lconn.comm/widgets/helloWorld/HelloWorld.xml
  41. 41. iWidget Key Elements ● User Profile is available via iContext: – this.iContext.getUserProfile().getItemValue('userid'); – Also you can use email, displayName ● Preferences may be persisted: – this.iContext.getiWidgetAttributes().setItemValue("nam e", "myValue"); – this.iContext.getiWidgetAttributes().save(); – Be Sure to define the itemset in the widget-config.xml for that widget. ● Use the AjaxProxy – var myUrl = "http://mycompany.com/test.xml"; – var proxiedURL = this.iContext.io.rewriteURI(myUrl); ● Reuse the CSS of the Page – Single Domain Rendering means IBM Connections JavaScript, CSS and Dojo are already loaded ● Use Modes – this.iContext.iEvents.fireEvent("onModeChan ged", null, "{newMode: 'view'}"); ● Use Dojo pubsub to message between iWidgets or use window.postMessage ● Be Sure to Limit the Number of Requests – Defer as much to the Available CSS – Cache as Much as Possible on the Browser – Use the Scope http://ibm.co/1sQKJTH
  42. 42. Supported Layouts and Tips ● iWidgets can be put on only a few services: – Profiles – Communities – Homepage ● Many partners choose to not have a Title Bar so they can dynamically choose to activate the iWidget based on who is rendering. – skinType="skinless" http://public.dhe.ibm.com/software/dw/lotus/mashups/developer/iwidget-spec-v2.1.pdf
  43. 43. Access to Connections Data ● Access the component via Variable in the iWidget: – Activities {activitiesSvcRef} – Blogs {blogsSvcRef} – Dogear {dogearSvcRef} – Profiles {profilesSvcRef} – Communities {communitiesSvcRef} – Homepage {homepageSvcRef} – Wikis {wikisSvcRef} – Files {filesSvcRef} – Real XML file path {widgetContextRoot} ● Get Profiles data via {profiles}/atom/profile.do
  44. 44. Homepage Layout Homepage Admins can specify the apps (opensocial or iWidgets) added. Also register via wsadmin command
  45. 45. Homepage My Page Users can add Gadgets to their Starting Page
  46. 46. Profiles Layout Use the FTL to change the Layout in the Widgets Change the Look and Feel Using Prior Methods Add Fields to the Profile using Profile Extensions. Profiles You can lay out the page using Widgets- config.xml Be sure to make a definition, and then add the definition to each page and location you want http://www.sli deshare.net/ pgodby/ic5- l09- iwidgetprofile s
  47. 47. Communities Layout Communities Disable showing in palette using showInPallete=false (part of widgetDef) Define widgetDef and layout under the communities resource (col1, col3) Template defines what widgets are automatically activated when creating a new community.
  48. 48. OpenSocial Gadget ● OpenSocial is an open web standard which defines how to build social enabled applications, known as gadgets. ● IBM Connections leverages the Apache Shindig as part of the WidgetContainer (Common Runtime Engine). ● Unique aspects for developers: – Locked and Isolated Rendering Domain – Modes Properties Events and Contexts – Server-Side Proxy – Integrated OAuth http://www.w3.org/blog/2014/12/opensocial-foundation-moves-standards-work-to-w3c-social-web-activity/
  49. 49. IBM Connections and OpenSocial ● OpenSocial is partnered with ActivityStreams to provide an event api and people api. ● IBM Connections uses OpenSocial with the Share Dialog, Activity Streams (Communities and Homepage) and Homepage ● Add the IBM Connection Theme to the Mix <Optional feature="com.ibm.connections.theme"/> http://www.slideshare.net/soccnx/vincent-burckhardt-opensocial-gadgets-in-ibm-connections
  50. 50. Homepage Layout {yourServer}/connections/resources/web/com.ibm.lconn.gadget/test/bootstrap.html?render=test&oneui=3
  51. 51. Activity Streams (Homepage and Communities) Uses the Embedded View, an onLoadHandler and Data Context passed with the Event Custom Security Roles on Homepage enable Developers to submit events onbehalf of other users. Similar Feature is Enabled in the Cloud
  52. 52. Homepage Layout – Share Dialog
  53. 53. IBM Connections OpenSocial and iWidget Demo
  54. 54. Other Considerations forYour Full Control ● Resumable Sessions and Shared Workers http://stackoverflow.com/questions/10886 910/how-to-maintain-a-websockets- connection-between-pages ● Extend CKEditor ● Cross-Origin Resource Sharing ● Reparent after disabling lc-ui:framekiller ● Look at mobile-config.xml for Mobile configurations – Context Root / Name Changes – Linked Apps/Urls http://www.slideshare.net/IBMSBT/sbt-webinar130911?next_slideshow=1 ● Wiki Page Welcome pages ● Profile Extensions ● Extended Profile Data Models ● Updating Metric Reports ● Blog and Community Themes ● Email Digests and Notifications ● Modify JSPs and Extend with Custom Tags ● Files Policies ● Connections Portlets
  55. 55. IBM Connections Homepage Demonstration See a more complex scenario AD403 Extend IBM Connections with Muse Benjamin Kroeger on Wed at 10:30
  56. 56. Cloud:Theme and Organization Extensions ● IBM Connections Cloud enables developers a limited set of UI changes. – Select Theme – Loosely Coupled Organization Extensions ● Administrators can extend the IBM Connections Cloud's user interface (UI). These UI extensions allow users to launch external applications from within the UI and also pass information to those applications that are related to the current context. ● Limited opportunities to change
  57. 57. Organization Extensions Interface Add Extensions Import / Export / Delete (All of the Extensions) Each extension Is a JSON Formatted Config File. Disable and Enable Edit Delete Export (Single)
  58. 58. Wizard and Config File You don't need to know JSON to setup the Organization Extensions. Often called Action Link Extensions
  59. 59. Add or Import Click Add Extensions Click Import Extensions
  60. 60. The Organization Extensions NEW Activity Streams Extension Point NEW
  61. 61. Organization Extensions: Contacts Select Contacts Select Contact Record Enter Name / Description Click Icon Select a Destination URL Select Open in a new Window Click Save Add to your URL ?contact_id=${contact_id}
  62. 62. Contacts Navigate to a contact record https://apps.na.collabserv.com/mycontacts/home.html#/contact/33734 Click Paul's Contact Demo Get a Popup window http://localhost:8080/sbt.sample.web/demo.jsp Your App
  63. 63. Organization Extensions: Profiles Select Person Select Person Component Enter Name / Description Click Icon Select a Destination URL Select Open in a new Window Click Save Add to your URL ?user_id=${user_id}
  64. 64. Profiles Your Action Navigate to a profile https://apps.na.collabserv.com/contacts/profiles/view/20089096 Click on the action Get a Popup window http://localhost:8080/sbt.sample.web/demo.jsp
  65. 65. Organization Extensions: Files Select Files Select File Menu Enter Name / Description Click Icon Select a Destination URL Select Open in a new Window Click Save Add to your URL ?file_id=${file_id}
  66. 66. Files Click Apps > Files Find A File Click More Actions
  67. 67. Organization Extensions: Top Navigation Bar CSS to Direct To Top Level Select Person Select Person Component Enter Name / Description Click Icon Select a Destination URL Select Open in a new Window Click Save
  68. 68. Top Navigation Bar Without CSS With CSS
  69. 69. IBM Connections Cloud Service Menu and Navigation Bar http://connections.imaginnado.com/cloudBanner.html
  70. 70. The Service Data http://www-10.lotus.com/ldd/appdevwiki.nsf/xpAPIViewer.xsp? lookupName=API+Reference#action=openDocument&res_title=Facets_ic50&content=apicontent
  71. 71. IBM Connections OpenSocial and Activity Streams ● OpenSocial and Activity Streams are generally seen on the Homepage, inside Gadgets and Communities. – MicroBlog Status Updates – Complex Events with Actionable Data – URL Preview and Image Resizer API – People API ● 3rd Parties Generally use it to Promote their Application in the Connections UI and to Gain Attention
  72. 72. IBM Connections Profiles and Profiles Administration ● Profiles enables users to change their personal data and find data about others in their organization. ● Partners often leverage this data to find others, leverage the network of the user, reports-to- chain, or grab profile photos. ● Profiles Admin APIs enable users who do not want to use TDI Assembly lines to get data into Profiles.
  73. 73. IBM Connections People Finder ● People Finder is custom built on the Search Service, and is designed for wild card and quick searches. ● Call /search/basic/people/typeahead? query=gi ● Get Back A Confidence Score and a Highlighted Person "givenNames": [ "<B>Gi</B>lad" ] // additional matchin "score": 9.181154,
  74. 74. IBM Connections Communities ● Communities enables developers to provide an organization of people of a common interest, and automatically provision resources for those users – Calendar Events – Media Gallery – Lifecycle. ● There are many projects that use Communities APIs to manage social data access as an ACL. – CRM – Project Management
  75. 75. IBM Connections Activities ● Activities enables a team to collect, organize and share content related to a goal or project. ● The APIs are very granular and used in complex scenarios. ● The aggregation of data (entries), ability to annotate the entries and search the entries is appealing.
  76. 76. IBM Connections Blogs ● Blogs need I explain more enables users to subscribe to blogs, interact and comment. ● Many partners use Blogs as a backend to present to their customers. Used as a Service
  77. 77. IBM Connections Bookmarks ● Bookmarks is a social bookmarking system to record resources which are of interest to others and to share and discover. ● Note the Implementation of Bookmarks and Communities Bookmarks are different.
  78. 78. IBM Connections Files ● Files enables users to share, discover, comment and interact files and folders. ● There are TWO main APIs the legacy Sharing API and the CMIS API. – Both Are Available. ● Quota details are available via API as well.
  79. 79. IBM Connections Forums ● Forums captures conversations around topics and categories.
  80. 80. IBM Connections Wikis ● Wikis enable the capture of topic based knowledge. ● Wikis provide versioning and commenting and liking. ● Developers typically load data and use the table of contents in their application.
  81. 81. IBM Business Support Services ● Business Support Services is a workflow- based management system which tenants (organizations) use. ● BSS enables User to add and manage feature access, authorization, authentication and workflow management.
  82. 82. Other Social Data Services ● IBM Connections Chat Brendan Arthurs is hosting a session AD204 which goes into this in detail. ● IBM Verse – Andrew Davis is hosting an IBM Verse AppDev and Extensibility Session AD104 ● IBM Docs
  83. 83. Service Data Demo
  84. 84. The Plumbing
  85. 85. IBM Connections Search ● IBM Connections Search is based on Lucene. – Scopes and Constraints – Facets on the Search – Not Meant for Typeahead (eg Wildcarding) – Seedlists ● Partners typically use this to find data specific to a single application and present to a user. – Find a User with a Tagged Skill – Find a Wiki Page with Content – Provide a Search Engine (via Seedlists)
  86. 86. IBM Connections Events ● IBM Connections Events is a Service Provider Interface that enables developers to subscribe to the Compliance and Auditing events. ● There are two types of event handlers pre- event and post-event handlers. ● The handlers are Java code that implement the SPI. ● Events should be processed and forwarded to a specific service. ● Cloud Enabled solution coming in future. ● Gamification and Compliance vendors use this interface.
  87. 87. Authentication and Authorization Types 1. Security Assertion Markup Language, (SAML 1.1/2.0) enables an organization to link their Identity Provider with IBM SmartCloud for Social Business. 2. OAuth (1.0a/2.0) enables a user to register an application with IBM SmartCloud for Social Business and download a Public/Private Key to request credentials for a User and use the response to the request to access the backend services. 3. Basic Auth enables a person to access a website using a Base64 encoding of a username:password. 4. App Passwords enables a application to access a website using a Base64 encoding of a username:app_specific_password
  88. 88. The Tools
  89. 89. Getting Started...Also know as...The Tools ● In General You only need a modest set of tools of Dev Tools: – Simple / Theme Based Changes and Configuration can be done with Notepad – Complex you may want to grab a Zip Archiver and/or use Eclipse J2EE ● You should get curl to do command line API requests. ● Tools you should get Debug and Inspector Tools: – Google Chrome Postman – Google Chrome with Inspector Tools – Firefox with Firebug and FBTrace ● FBTrace tracks the CSS Change and DOM Changes Also, the IBM Connections Cloud SDK (nee Social Business Toolkit SDK ) is a resource/tool.
  90. 90. The Tools: IBM Connections Cloud SDK ● The IBM Connections SDK is a set of libraries and code samples that you use for connecting to the IBM Social Business Platform. – Code Snippets / Examples on GitHub http://bit.ly/1KOmLyl – Playground to see the Examples and APIs in action http://ibm.co/1IOXwrR – REST Client http://ibm.co/1x72pXP – Maven Enabled ● You might like to attend CHALK101 to discuss OpenNTF
  91. 91. Wrap Up ● Discussed Customization, Experience and Data ● Seen the Plumbing ● Shown the Tools ● Learned what's available for the Cloud ● Engage with the IBM Connections Developers at CHALK204 ● Please fill in an App Dev Survey ● Other sessions you might be interested in are on the IBM Connections Developers site http://ibm.co/1Dfj8iI https://twitter.com/IBMCnxDev https://developer.ibm.com/social http://stackoverflow.com/questions/tagged/ibm-connections
  92. 92. Engage Online § SocialBiz User Group socialbizug.org – Join the epicenter of Notes and Collaboration user groups § Social Business Insights blog ibm.com/blogs/socialbusiness – Read and engage with our bloggers § Follow us on Twitter – @IBMConnect and @IBMSocialBiz § LinkedIn http://bit.ly/SBComm – Participate in the IBM Social Business group on LinkedIn § Facebook https://www.facebook.com/IBMConnected – Like IBM Social Business on Facebook
  93. 93. Backup
  94. 94. Configure Administration For Homepage ● Navigate to the WebSphere Console ● Click Applications > All Applications ● Select the App you need to configure ● Click Mappings for Security/Roles ● Find Your User Id ● Click Ok ● Reference Admins For Profiles and Communities ● Edit widget-config.xml ● Synchronize the Nodes ● Restart the AppServers ● Volia!
  95. 95. Notices and Disclaimers Copyright © 2015 by International Business Machines Corporation (IBM). No part of this document may be reproduced or transmitted in any form without written permission from IBM. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM. Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include unintentional technical or typographical errors. IBM shall have no responsibility to update this information. THIS DOCUMENT IS DISTRIBUTED "AS IS" WITHOUT ANY WARRANTY, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL IBM BE LIABLE FOR ANY DAMAGE ARISING FROM THE USE OF THIS INFORMATION, INCLUDING BUT NOT LIMITED TO, LOSS OF DATA, BUSINESS INTERRUPTION, LOSS OF PROFIT OR LOSS OF OPPORTUNITY. IBM products and services are warranted according to the terms and conditions of the agreements under which they are provided. Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice. Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual performance, cost, savings or other results in other operating environments may vary. References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business. Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for informational purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation. It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or products will ensure that the customer is in compliance with any law. Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products in connection with this publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM EXPRESSLY DISCLAIMS ALL WARRANTIES, EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right. IBM, the IBM logo, ibm.com, BrassRing®, Connections™, Domino®, Global Business Services®, Global Technology Services®, SmartCloud®, Social Business®, Kenexa®, Notes®, PartnerWorld®, Prove It!®, PureSystems®, Sametime®, Verse™, Watson™, WebSphere®, Worklight®, are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml.

×