© 2012 IBM Corporation BP207 Easy As Pie - Creating Widgets for IBM Connections Mikkel Flindt Heisterberg Senior Solution Architect | IntraVision
Aug 29, 2014
© 2012 IBM Corporation
BP207 Easy As Pie - Creating Widgets for IBM Connections
Mikkel Flindt HeisterbergSenior Solution Architect | IntraVision
2 | © 2012 IBM Corporation
Legal disclaimer© IBM Corporation 2012. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication 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.
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. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. 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.
Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.
3 | © 2012 IBM Corporation
About me With IntraVision (makers of the OnTime®
suite of calendar and meeting management products – showcase booth 515), Premier Business Partner from Denmark
Been working with IBM Lotus® technologies since he was a young boy
Recently named an IBM Champion for IBM Collaboration Solutions (ICS)
An all together nice guy!
http://twitter.com/lekkim http://lekkimworld.com
4 | © 2012 IBM Corporation
Agenda A bit on IBM Connections architecture and the
infrastructure for widgets i.e. configuration files etc. Introduction to iWidgets – configure, develop and deploy Resources and summary Q&A
5 | © 2012 IBM Corporation
IBM Connections architecture
6 | © 2012 IBM Corporation
Widgets in IBM Connections Most functionality in IBM Connections is actually widgets You may add widgets in Profiles, Communities and Homepage Widgets are made up of two parts
─ Widget configuration on the IBM Connections server─ The actual widget written to the iWidget specification (JavaScript / XML / HTML / CSS)
7 | © 2012 IBM Corporation
Widgets in IBM Connections You may add widgets in Profiles, Communities and Homepage Most functionality in these features is actually widgets Widgets are made up of two parts
─ Widget configuration on the IBM Connections server─ The actual widget written to the iWidget specification (JavaScript / XML / CSS)
8 | © 2012 IBM Corporation
View mode
Widget modes There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities) Widgets may contribute multiple modes Administrator may choose to use some and not all modes contributed
Added by administrator Added by the community owner
9 | © 2012 IBM Corporation
Widget modes There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities) Widgets may contribute multiple modes Administrator may choose to use some and not all modes contributed
Fullpage mode
10 | © 2012 IBM Corporation
Search mode
Widget modes There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities) Widgets may contribute multiple modes Administrator may choose to use some and not all modes contributed
11 | © 2012 IBM Corporation
Widget configuration in widgets-config.xml
(unless using extreme care)
12 | © 2012 IBM Corporation
Widget attributes makes the widget configurable It doesn't make sense to hard code or at least not supply sensible defaults and
widget attributes can be used for configuration String key/value pairs may be supplied – interpretation of the value is up to the
widget though Some values cannot be specified in widgets-config.xml as they may change
based on IBM Connections configuration (such as context root i.e. “/dogear” / “/bookmarks”) or the ID of the active profile / community
Special values are enclosed in curly braces – i.e.─ {resourceId} profileKey of current Profiles user or communityUnid if in Communities─ {contextRoot} Context root of the current feature (i.e. “/profiles”)
13 | © 2012 IBM Corporation
Widget attributes makes the widget configurable (2)
14 | © 2012 IBM Corporation
Say hello to iWidgets In IBM Connections 3 the widgets are iWidgets which means that they are
written to the iWidget specification Widgets are described by a widget descriptor (referenced in widgets-config.xml)
and optionally JavaScript to provide dynamic behavior and, also optionally, CSS to style the contents
The widget descriptor describes supported modes, startup mode, “iScope class” (more in a bit) and, optionally, which resources to load
Static widget content for each mode may also be supplied
15 | © 2012 IBM Corporation
Widget descriptor – more in depth
16 | © 2012 IBM Corporation
Widget descriptor – more in depth
17 | © 2012 IBM Corporation
Widget descriptor – more in depth
18 | © 2012 IBM Corporation
Widget descriptor – more in depth
19 | © 2012 IBM Corporation
Widget descriptor – more in depth
20 | © 2012 IBM Corporation
Widget descriptor – more in depth
21 | © 2012 IBM Corporation
iScope class
● Access to dojo version 1.4.1 (highly customized for IBM Connections)● You do not have to use dojo to declare the class...
22 | © 2012 IBM Corporation
iContext An iContext instance is automatically set into the iScope class The iContext provides access to the widget markup (e.g. root element), I/O
related functions (i.e. URL rewriting), widget attributes etc. The iContext is easily accessed from the iScope class using this.iContext Important functions include:
─ iContext.getRootElement() : DOM Element─ iContext.getElementById(id:string) : DOM Element─ iContext.getiWidgetAttributes() : ItemSet─ iContext.getUserProfile() : ItemSet─ iContext.io.rewriteURI(uri:string) : string─ iContext.iEvents.fireEvent(name:string, type:string, payload:object)
You retrieve information from an ItemSet using getItemValue(name:string)
23 | © 2012 IBM Corporation
Using iContext
24 | © 2012 IBM Corporation
Using iEvents
25 | © 2012 IBM Corporation
Keeping context JavaScript is single threaded - all requests for web resources are done after the
current method completes The callback is done with another context i.e. “this” will refer to something else
than your iScope class Solution is to
─ use closures i.e. save a reference to “this” before the call─ use dojo.hitch and have dojo apply the correct context
26 | © 2012 IBM Corporation
Keeping context JavaScript is single threaded - all requests for web resources are done after the
current method completes The callback is done with another context i.e. “this” will refer to something else
than your iScope class Solution is to
─ use closures i.e. save a reference to “this” before the call─ use dojo.hitch and have dojo apply the correct context
27 | © 2012 IBM Corporation
Keeping context JavaScript is single threaded - all requests for web resources are done after the
current method completes The callback is done with another context i.e. “this” will refer to something else
than your iScope class Solution is to
─ use closures i.e. save a reference to “this” before the call─ use dojo.hitch and have dojo apply the correct context
28 | © 2012 IBM Corporation
What's your origin? In browsers we have what's called the
“Same Origin Policy” JavaScript running the the browser may
only do XHR's against the same server it was loaded from
Same server means─ Same hostname / IP─ Same port number
To work around this we use an AJAX proxy
IBM Connections supplies us with a proxy which is easy to use from your widget code
29 | © 2012 IBM Corporation
Using the AJAX proxy
If running in Profiles the proxy will be http://<host>/profiles/ajaxProxyAbove request will be http://<host>/profiles/ajaxProxy/http/www.google.com/search?q=Lotusphere
30 | © 2012 IBM Corporation
IBM Connections AJAX proxy is used for all requests
Easy to see if using Firebug to trace AJAX proxy used for all requests even though widget descriptor and required
JavaScript files are fully qualified and from same hostname / port combination
31 | © 2012 IBM Corporation
Proxy security For security access through the proxy is disallowed by default You have to allow access on a per hostname and method
type (GET, POST, DELETE etc.) basis (or open for all hostnames / methods although not recommended)
Do remember to allow access for LtpaToken cookies if authentication should be propagated
Proxy configuration done in proxy-config.tpl on the IBM Connections server
(unless using extreme care)
32 | © 2012 IBM Corporation
Using the IBM Connections REST API IBM Connections provide a very comprehensive REST API based on the AtomPub standard
Each feature has full documentation on how to access data using the API in the InfoCenter / wiki – unfortunately examples are hard to come by
Since these requests probably go to the IBM Connections server they may not need to be proxied (unless features are on separate servers)
─ Remember to always use widget attributes (e.g. {profilesSvcRef}) to get URL to the Profiles feature unless you are willing to guess / hardcode
Using the lconn.core.xpath and lconn.core.xslt classes can help you work with the XML based results
─ Loaded by default by the IBM Connections pages─ Probably not supported neither officially or unofficially... :-)
Most important functions:─ lconn.core.xpath.selectNodes(xpath:string, xmldoc:XMLDocument, ns:array) : Nodelist
─ lconn.core.xslt.loadXml(url:string) : XMLDocument
33 | © 2012 IBM Corporation
IBM Connections REST API example
34 | © 2012 IBM Corporation
Widget title, i18n and resources Unfortunately setting the title of your widget isn't as easy as
one could have hoped :-( Setting the title can be done in one of two ways (well three
actually):1) Using general IBM Connections strings properties file – this one is easy
and only require creating / changing one file2) Using custom properties file – this one is clean as you don't depend on
others files but it does also require change to LotusConnections-config.xml
● Title is set as the value for a property where the key is the widget id from widgets-config.xml
● String resources – e.g. translation – can be done using same approach
OnTime=Calendar by OnTime
35 | © 2012 IBM Corporation
Widget title, i18n and resources example
36 | © 2012 IBM Corporation
Reading i18n strings from your bundle
37 | © 2012 IBM Corporation
Caveats Editing configuration files by hand is prone to error
─ IBM would tell you always use checkin/checkout via wsadmin as it does a schema check :-)
Widgets are running in a shared environment─ Make sure your CSS classes do not clash─ Make sure ID's are unique by prefixing something unique to
them as there may be multiple instances of the same widget on the page (it follows from this that you cannot use ID's for CSS selectors)
Because you have access to the entire page doesn't mean that you should...
Never, never, never, never ever add something like the following to your stylesheet – you may need it but the page as a whole will start to look funny...* {font-size: 7pt; color: red; overflow: hidden}
Start small...
38 | © 2012 IBM Corporation
Things I would have hoped someone had told me... Dojo is nasty to troubleshoot due to async loading – all errors seem to come
from dojo.js which is almost never the culprit Logging is really your friend but do add something that indicates which piece of
code is logging─ console.log, console.trace, console.debug, console.info, console.warn, console.error
How to show a lightbox
39 | © 2012 IBM Corporation
Things I would have hoped someone had told me... Dojo is nasty to troubleshoot due to async loading – all errors seem to come
from dojo.js which is almost never the culprit Logging is really your friend but do add something that indicates which piece of
code is logging─ console.log, console.trace, console.debug, console.info, console.warn, console.error
How to show a lightbox
40 | © 2012 IBM Corporation
Things I would have hoped someone had told me... Network latency kills web application performance – cache as such as possible
and combine multiple files into one minified version Repeat after me: “Latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency, latency.....
41 | © 2012 IBM Corporation
Summary Most functionality in IBM Connections is actually widgets and you can add your
own Bringing your applications into IBM Connections and thus providing in-context
access is very valuable Widgets are quite easy to develop using JavaScript and CSS although you must
know about asynchronous JavaScript Dojo makes it easy to keep context and it's already loaded iWidgets, iScope, iContext, iEvents... Use asynchronous calls to keep UI snappy and use dojo.hitch to keep context Start small and build from there
Happy coding!!
42 | © 2012 IBM Corporation
Related sessions BP121: Performance Programming AD201: Integrate and Customize IBM Connections 3.0.1 AD203: Developing Custom Client Applications using the IBM Connections APIs AD204: Mastering the Art of Social Application Development
43 | © 2012 IBM Corporation
The shameless plug...
Social Application ThrowdownWhere: Dolphin, Northern Hemisphere A-CTime: 5.30pm – 6.30pm
Featuring yours truly (and 5 other business partners...)
44 | © 2012 IBM Corporation
Resources iWidget specification: http://www-10.lotus.com/ldd/mashupswiki.nsf/dx/iwidget-
spec-v1.0.pdf/$file/iwidget-spec-v1.0.pdf IBM Connections iWidget Development Guide: www-
10.lotus.com/ldd/lcwiki.nsf/dx/development-guide iWidget support in Homepage: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/07072009105437%D8%B5WEBKH7.htm iWidget support in profiles and Communities: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/10082009050455WEBCNM.htm Common iWidget support in Connections: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/common-iwidget-support-in-the-lotus-connections-features
In all modesty my blog – http://lekkimworld.com
45 | © 2012 IBM Corporation
Q&A But?, How?, Doesn't that mean... Give it to me! (or come talk to me
after the session or find me in the hallways...)
Twitter: @lekkimEmail: [email protected]: http://lekkimworld.com
Slides will be at http://lekkimworld.com/lotusphere2012