Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

SHOW115 Socialize Your
Applications Using OpenSocial

Ryan Baxter | Staff Software Engineer | IBM

Stanton Sievers | Staff Software Engineer | IBM

© 2012 IBM Corporation

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.

2 | © 2012 IBM Corporation

Giving Credit
■ This presentation mentions the following products
─ IBM® Lotus Notes®
─ IBM® Lotus iNotes®
─ IBM® Lotus Domino® Designer
─ IBM® Lotus Domino® Administrator
─ IBM® Lotus Domino®
─ IBM® Connections®
─ IBM® Lotus Notes® Social Edition
─ IBM® Lotus iNotes® Social Edition


About Us
Ryan has been working at IBM for the past 3 years. Prior to that he
was a student at Northeasten University in Boston Ma. During his time
at IBM his main focus has been working on the Notes Client Java UI
APIs. He has in depth knowledge of Eclipse plugin development,
specifically when it comes to the Notes client. Over the past year
Ryan has become an active member of the OpenSocial community
working to define the future of OpenSocial. Ryan takes any
opportunity he can to interact with the passionate user base of IBMs
many products, and enjoys listening to their feedback, as well as
helping them solve their problems.
@ryanjbaxter

Stanton has been working full time at IBM for 2.5 years in IBM
Collaboration Solutions. Before full time employment at IBM he
worked on Widgets and LiveText in the Notes client as an intern. As a
full time IBMer he has worked on the Java UI APIs for the Notes client
and Eclipse plugin development for the Notes client in general.
Recently Stanton has been involved in the integration of OpenSocial
into enterprise applications such as Notes and iNotes. Stanton is also
involved in the OpenSocial community via the Apache Shindig project,
to which he is a regular contributor.


Agenda
■ Terminology & Background
■ Pre-requisites
■ Extending The XPage App
─ Add When, Where, and Address Fields
─ Creating A Confirmation Embedded Experience
─ Sending The Embedded Experience Email
■ Creating A Widget For Our Embedded Experience
■ Register For The Event
■ Leveraging The Power Of OpenSocial
─ Publishing To The Activity Stream
─ Recommending Network Contacts

■ Q&A
■ Resources

Terminology
■ Embedded Experiences
─ Embedded experiences is a method of embedding the “experience” or functionality from one
application into a different, host application. The end user experiences the 3rd party application
in their host application environment as if they were using it directly from the 3rd party provider.

■ OpenSocial
─ OpenSocial is an open standard which defines APIs that can be used to build social applications
using HTML, JavaScript, and CSS. The specification includes both JavaScript and REST APIs.
OpenSocial leverages many other standards, such as Activity Streams and OAuth.

■ Activity Streams
─ Activity Streams is an open standard which defines a data model to represent a stream or list of
actions performed by users and applications. This specification DOES NOT define any APIs, it
simply defines the data model.


Background
■ Constant Context Switching With Today's Apps
─ Many applications that we use every day send notifications to our activity streams and inbox
– One workflow application alone may generate thousands of notifications a day

─ Notifications are not very useful by themselves
─ Constantly context shifting from one app to the next

■ Embedded Experiences keep you in the app(s) you work in the most
─ They work where you work
– Inbox

– Activity Stream
─ Keep users in context and focused on their work
─ Enhance the basic notification


Background
■ Embedded experiences are represented via a data model
─ JSON
─ XML
─ The data model can be placed in an email or an activity stream entry

{
“gagdet” : “http://example.com/embedded/gagdet.xml”,
“context” : {
“title” : “Hello World”,
“id” : 123
}
}


Background
From: notifications@socialnetwork.com
To: johndoe@example.com
Subject: Social Network: Mary Has Commented On Your Status
MIME-Version: 1.0
Content-Type: multipart/alternative;
boundary="XXXXboundary text"

Mary has commented on your status.

--XXXXboundary text
Content-Type: text/plain

Mary has commeneted on your status.

--XXXXboundary text
Content-Type: application/embed+json
{
"gadget" : "http://example.com/embedded/gagdet.xm",
"context" : 123
}
--XXXXboundary text
Content-Type: text/html

<html>

</html> 9 | © 2012 IBM Corporation

Sample Notification Email


Sample Embedded Experience


Embedded Experiences Flow

Sends Embedded Experience Email
Lotus Notes/iNotes Social Edition

Makes Request(s) Back To Service


What We Are Going To Build
■ Take an existing XPage application on OpenNTF and enhance it to start sending
embedded experience notifications
─ Event Singup application from OpenNTF contributed by Michael McGarel

■ Enhance the confirmation email to also be an embedded experience

■ Add social functionality to the confirmation email
─ Post an entry to the activity stream in Connections 4 from within an embedded experience
─ Suggest other people in one's network who would want to attend
– These people will get embedded experience notification emails as well


DEMOS


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Pre-requisites
■ Lotus Notes and Domino 8.5.4 Social Edition
─ Is only required for rendering embedded experiences
─ AD115 & AD116 will have additional information
─ The XPage app will run on 8.5.2 or greater
─ Not required for building embedded experiences

■ Download the “Mailer Servlet” from OpenNTF and install it on your Lotus Domino
Server

■ Download and install the Event Signup app from OpenNTF


Pre-requisites
■ Download the “Mailer Servlet” and install it on your Domino Server
■ Go to: http://bit.ly/mailerservlet


Pre-requisites
■ Install the servlet onto your Domino Server
■ Copy com.ibm.lotuslabs.mailer_1.0.0.jar into <domino
data>dominoworkspaceapplicationseclipseplugins

■ Restart the server


Pre-requisites
■ Download and install the Event Signup app
■ Go to openntf.org
■ Select Projects


Pre-requisites
■ Select the Event Signup app from the “Name lookup” drop-down


Pre-requisites
■ Download the Event Signup app


Pre-requisites
■ Move the app to <domino data dir>/signup.nsf


Pre-requisites
■ Open the Lotus Domino Administrator client
─ Open the server by going to File → Open Server...

■ Select the server where you placed the database


Pre-requisites
■ Go to the “Files” tab, right click on signup.nsf
■ Select “Sign...”


Pre-requisites
■ Click “OK” to sign the database with the Active User's ID


Pre-requisites
■ Open a browser and navigate to the XPage: http://<server>/signup.nsf
■ Click “Staff Login”
■ Login with your credentials when prompted


Pre-requisites
■ Click the “Edit Pages Content” to edit the content of the app


Pre-requisites
■ Add some content to the home tab


Pre-requisites
■ Add content to the registration tab


Pre-requisites
■ Add footer content and save changes


Pre-requisites
■ Click “View Site Settings”


Pre-requisites
 Click “Edit Settings”


Pre-requisites
 Fill out the settings for your event


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Add When, Where, and Address Fields
■ In order to provide a
richer embedded
experience we need to
make some changes to
the application

■ Add separate fields for
when, where, and
address
─ Update the Details XPage
to display these fields

■ Add a Google Map for
where the event will take
place


■ Open Lotus Domino Designer
■ Go to File → Open → Lotus Notes Application


■ Navigate to the server and application and click “Open”


■ In the Applications view expand Forms
■ Double-click on “Pages Content” to open


■ Right click in the “Details Tab Content” cell and select Insert → Row


■ Put the text “Details Tab Where” in the first column

■ Click in the second column to give it focus
■ Add a field to the second column by going to Create → Field...


■ In the field properties dialog give the field the following properties
─ Name: DetailsTabWhere
─ Type: Text/Editable


■ Put the text “Details Tab When” in the first column

■ Add a field to the second column by going to Create → Field


─ Name: DetailsTabWhen


■ Put the text “Details Tab Address” in the first column

■ Add a field to the second column by going to Create → Field


─ Name: DetailsTabAddress


■ The three new fields are highlighted in red


■ In the Applications view expand Custom Controls and open content_EditContent


■ Open the source view of the content_EditContent custom control


Script_Snippet_1

■ Paste Script_Snippet_1 into the TabDetails tab panel
■ This adds the when, where, and address fields to the edit content XPage


Snippet 1


<xp:div styleClass="tabTextHolder">
<xp:label value="When:" id="label3"></xp:label>
<xp:inputText id="editDetailsWhen"
value="#{contentDoc.DetailsTabWhen}" styleClass="tabTextField">
</xp:inputText>
</xp:div>
<xp:label value="Where:" id="label4"></xp:label>
<xp:inputText id="editDetailsWhere"
value="#{contentDoc.DetailsTabWhere}" styleClass="tabTextField">
</xp:inputText>
</xp:div>
<xp:label value="Address:" id="label5"></xp:label>
<xp:inputText id="editDetailsAddress"
value="#{contentDoc.DetailsTabAddress}" styleClass="tabTextField">
</xp:inputText>
</xp:div>

■ In the Applications view, expand Custom Controls and open layout_UserTabs


■ Open the Source view of the layout_UserTabs custom control


Script_Snippet_2

■ Paste Script_Snippet_2 into layout_UserTabs
■ This adds the when, where, and address fields to the Details tab


Snippet 2


<xp:div styleClass="detailsSection">
<xp:label value="When" id="whenLabel" styleClass="detailsLabel">
</xp:label>
<xp:div>
<xp:inputText id="inputText1" readonly="true" value="#{contentDoc.DetailsTabWhen}">
</xp:inputText>
</xp:div>
</xp:div>
<xp:label value="Where" id="whereLabel" styleClass="detailsLabel">
</xp:label>
<xp:div>
<xp:inputText id="inputText2" readonly="true" value="#{contentDoc.DetailsTabWhere}">
</xp:inputText>
</xp:div>
</xp:div>
<xp:label value="Address" id="label1" styleClass="detailsLabel">
</xp:label>
<xp:div>
<xp:inputText id="inputText3" readonly="true" value="#{contentDoc.DetailsTabAddress}">
</xp:inputText>
</xp:div>
</xp:div>

■ In the Applications view expand Resources → Style Sheets
■ Open site.css


Script_Snippet_3

■ Paste Script_Snippet_3 into site.css
■ This adds some styling to the when, where, and address fields


Snippet 3
/* CSS for site.css */

.detailsLabel {
font-size: 150%;
}

.detailsSection {
padding-top: 20px;
}


■ Go to the XPage in the browser
■ Select “Edit Page Content”


■ Go to the “Details” Tab


■ Fill out the When, Where, and Address Fields
■ Remove any text from the rich text editor


■ Save the changes


■ Final Result


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Creating A Confirmation Embedded Experience
■ Currently the confirmation email the registrant gets is just text

■ We want to include some more useful information
─ When the event is taking place
─ Where the event is taking place
─ Address of the event
─ It makes sense then to include this information in our embedded experience data model

{
“gadget” : “<url to gadget in nsf>”,
“context” : {
“dbUrl” : “<url to the NSF>”,
“when” : “<when the event is taking place>”,
“where” : “<where the evnt is taking place>”,
“address” : “<address where the event is taking place>”,
“siteName” : “<name of the site>”,
“messageContent” : “<text message>”
}
}

■ In the Applications view right click on Resources → Files
■ Select “New File...”


■ Give the new file the name ConfirmationEE.xml


■ Select the Source view


Script_Snippet_4

■ Paste Script_Snippet_4 into ConfirmationEE.xml
─ Basic outline of a gadget XML file


Snippet 4
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Event Signup Confirmation"
description="Embedded experience for confirming when users register for an event."
author="Your Name Here"
author_email="Your Email Address Here">
<Require feature="dynamic-height"></Require>
<Require feature="embedded-experiences"></Require>
</ModulePrefs>
<Content type="html" view="embedded,default">
<![CDATA[

]]>
</Content>
</Module>

■ ModulePrefs contain basic information about the gadget

■ Features provide specific APIs to the gadget
─ Dynamic-height allows the gadget to adjust its height to fit the content
─ Embedded-experiences is required for all embedded experience gadgets
– Used to get the context information from the embedded experience data model


■ Content sections define the gadget UI and functionality
─ Content sections with a type equal to “html” can contain
– HTML

– JavaScript
– CSS
─ You can have multiple content sections in one gadget XML
– Must be at least one content section with a view equal to “embedded”


Script_Snippet_5

■ Paste Script_Snippet_5 into the CDATA section in ConfirmationEE.xml


Snippet 5
<div class="container">
<div class="header">
<div class="headerInner">
<h1 id="headerText" class="xspTextComputedField"></h1>
</div>
</div>
<div class="content">
<div class="xspTabTabbedPanel">

</div>
<div class="footer">
<p>© Acme Corp</p>
</div>
</div>
</div>

Script_Snippet_6

■ Paste Script_Snippet_6 in the div with the class xspTabTabbedPannel


Snippet 6

<div class="detailsSection">
<div id="messageText"></div>
</div>
<span class="detailsLabel">When</span>
<div><span id="whenText"></span></div>
</div>
<span class="detailsLabel">Where</span>
<div><span id="whereText"></span></div>
</div>
<span class="detailsLabel">Address</span>
<div><span id="addressText"></span></div>
</div>


<div id="mapCanvas"></div>

Script_Snippet_7

■ Give the embedded experience some style!
■ Paste Script_Snippet_7 in the CDATA section above the first div


Snippet 7

<link rel="stylesheet" href="site.css" type="text/css"></link>
<style type="text/css">
#mapCanvas {
height: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>

■ Create a JavaScript file in which to put our embedded experiences logic
■ In the Applications view expand “Code”
■ Right click on “Script Libraries”
■ Select “New Script Library...”


■ In the “New Script Library” Dialog give the script the name “gadget.js”
■ Select the type JavaScript


Script_Snippet_8

■ Paste Script_Snippet_8
into gadget.js

■ registerOnLoadHandler
─ Registers a function to be
called once all of the
content in the gadget has
finished loading


Snippet 8
/**
* Global map of friends to email addresses.
*/
var friendToEmailMap = {};

/**
* Data context key for the embedded experience
* context object.
*/
var EE_KEY = 'org.opensocial.ee.context';

/**
* Called when the gadget finished loading.
*/
function onLoad() {

};

/*
* Registers an onload handler so we know when the gadget
* has loaded.
*/
gadgets.util.registerOnLoadHandler(onLoad);

Script_Snippet_9

■ Add Script_Snippet_9 to the onLoad function


Snippet 9
opensocial.data.getDataContext().registerListener(EE_KEY, function(key) {
var eeContext = opensocial.data.getDataContext().getDataSet(key);
addDetails(eeContext);
});



■ registerListener
─ registers a function to be
called when the embedded
experience context object is
set

■ getDataSet
─ The key for the embedded
experience context object is
passed into the callback
function and can be used to
get the data set (embedded
experience context object)
for that key


■ The eeContext object will contain the context property from our data model

{
“gadget” : “<url to gadget in nsf>”,
“context” : {
“dbUrl” : “<url to the NSF>”,
“when” : “<when the event is taking place>”,
“where” : “<where the evnt is taking place>”,
“address” : “<address where the event is taking place>”,
“siteName” : “<name of the site>”,
“messageContent” : “<text message>”
}
}


Script_Snippet_10

■ Paste Script_Snippet_10 after the onLoad function in gadget.js
■ The code in Script_Snippet_10 adds the when, where, and address information
from the embedded experience context object to the DOM


Snippet 10
/**
* Adds details information to the DOM.
* @param eeContext The embedded experiences context object.
*/
function addDetails(eeContext) {
document.getElementById('whenText').innerHTML = eeContext.when;
document.getElementById('whereText').innerHTML = eeContext.where;
document.getElementById('addressText').innerHTML = eeContext.address;
document.getElementById('headerText').innerHTML = eeContext.siteName;
document.getElementById('messageText').innerHTML = eeContext.messageContent;
};


Script_Snippet_11

■ Paste Script_Snippet_11 after the addDetails function in gadget.js
─ Explanation of this code is outside the scope of this session please see the Google Maps API for
more details http://bit.ly/mapsdevguide


Snippet 11
/**
* Draws the Google Map in the UI.
* @param address The address of the event.
* @param where Where the event is taking place.
*/
function drawMap(address, where) {
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapCanvas'), myOptions);
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: where
});
gadgets.window.adjustHeight();
} else {
gadgets.log('Geocode was not successful for the following reason: ' + status);
}
});
}; 91 | © 2012 IBM Corporation

■ Add the code in the red box below to the onLoad function in gadget.js to draw
the map when the gadget loads


■ Finally, we must modify the gadget to include a reference to our gadget.js file
and to the Google Maps Javascript
■ In the Applications view expand Resources → Files
■ Open ConfirmationEE.xml


Script_Snippet_12

■ Paste Script_Snippet_12 in ConfirmationEE.xml to add the script tags for our
gadget.js file and the Google Maps JavaScript


Snippet 12
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.3&sensor=false"></script>
<script type="text/javascript" src="gadget.js"></script>


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Sending The Embedded Experience Email
■ Now that we have our embedded experience gadget created we want to be able
to “send it” in the confirmation emails

■ The Event Signup app has an agent that is responsible for sending the emails
after a user registers
─ The agent is called “Send Registration Confirmation”
─ Today the agent sends a traditional Lotus Notes mail memo
─ We'll change the agent so it sends MIME emails
─ We'll add the embedded experience MIME part containing our data model to the email


■ In the Applications view expand Code → Agents
■ Open “(Send Registration Confirmation)”


Script_Snippet_13

■ Paste Script_Snippet_13 after creating a new notes session in the send mail
confirmation agent


Snippet 13
Dim convertMime As Boolean
convertMime = session.Convertmime


Script_Snippet_14

■ Paste Script_Snippet_14 after we get the document with the key AppSettings in
the send confirmation email agent


Snippet 14
Dim contentDoc As NotesDocument
Set contentDoc = view.Getdocumentbykey("PagesContent", True)


■ We need to get the
PagesContent doc in order
to include the values of the
when, where, and address
fields in the embedded
experience data model


■ Remove the line in the red box from the send email confirmation agent
■ We will replace this with a body item that has the correct MIME parts


Script_Snippet_15

■ Paste Script_Snippet_15 after we add the subject item to the mail document.


Snippet 15
Dim content As Variant
content = settingsDoc.Getitemvalue("RegEmailContent")

Dim strContent As String
strContent = content(0)

Dim topMime As NotesMIMEEntity
Set topMime = maildoc.Createmimeentity("Body")

Dim mimeHeader As NotesMIMEHeader
Set mimeHeader = topMime.Createheader("Content-Type")
Call mimeHeader.Setheaderval("multipart/alternative")

Set mimeHeader = topMime.Createheader("MIME-Version")
Call mimeHeader.Setheaderval("1.0")

Set mimeHeader = topMime.Createheader("Content-transfer-encoding")
Call mimeHeader.Setheaderval("7bit")

Dim mime As NotesMIMEEntity
Set mime = topMime.Createchildentity()

Dim stream As NotesStream
Set stream = session.Createstream()
Call stream.Writetext(strContent)
Call mime.Setcontentfromtext(stream, "text/plain", 1728)
Call stream.Close()

Snippet 15 (continued)
Call stream.Writetext("<b>" + strContent + "</b>")
Call mime.Setcontentfromtext(stream, "text/html", 1728)
Call stream.Close()


Dim dbUrl As String
dbUrl = session.Httpurl
dbUrl = Replace(dbUrl, "?OpenServer", "/" + db.Filepath)

Dim where As Variant
where = contentDoc.Getitemvalue("DetailsTabWhere")
Dim strWhere As String
strWhere = where(0)

Dim when As Variant
when = contentDoc.Getitemvalue("DetailsTabWhen")
Dim strWhen As String
strWhen = when(0)

Dim address As Variant
address = contentDoc.Getitemvalue("DetailsTabAddress")
Dim strAddress As String
strAddress = address(0)

Snippet15 (continued)
Dim gadgetUrl As String
gadgetUrl = dbUrl + "/ConfirmationEE.xml"

Dim siteName As Variant
siteName = settingsDoc.Getitemvalue("SiteName")
Dim strSiteName As String
strSiteName = siteName(0)

Dim dataModel As String
dataModel = |{"gadget" : "| + gadgetUrl + |",|
dataModel = dataModel + |"context" : {|
dataModel = dataModel + |"dbUrl" : "| + dbUrl + |",|
dataModel = dataModel + |"when" : "| + strWhen + |",|
dataModel = dataModel + |"where" : "| + strWhere + |",|
dataModel = dataModel + |"address" : "| + strAddress + |",|
dataModel = dataModel + |"siteName" : "| + strSiteName + |",|
dataModel = dataModel + |"messageContent" : "| + strContent + |"|
dataModel = dataModel + |}}|
Call stream.Writetext(dataModel)
Call mime.Setcontentfromtext(stream, "application/embed+json", 1728)

Call stream.Close()


■ Here we add a MIME
body part and add the
necessary MIME
headers to the email

■ It is key that the MIME
email is a
multipart/alternative
MIME email


■ Here we add two MIME
parts to the MIME email

■ These will be used for mail
client which don't support
embedded experiences

■ All embedded experience
emails must have a
text/html MIME part, but a
text/plain MIME part is
optional

Note: 1728 is the constant for 7Bit encoding

■ This code creates the
JSON embedded
experience data model
using information from
the content document
and the URL to the
gadget XML we created

■ The MIME type for this
MIME part must be
application/embed+json
in order for Lotus Notes
and iNotes to recognize
the embedded
experience email

Note: 1728 is the constant for 7Bit encoding

Agenda
■ Pre-requisites

■ Q&A
■ Resources

Creating A Widget For Our Embedded Experience
■ Lotus Notes and iNotes Social Edition use the Widgets Framework to push
trusted embedded experiences to clients
─ Widgets are created via the OpenSocial Wizard built on top of the existing Widgets Framework
─ Clients will only render trusted embedded experiences
─ Trust is established by the Widget Catalog administrator


■ Open Lotus Notes Social Edition
■ Select the toolbar icon to open the
widget wizard
■ Select “OpenSocial Gadget” in the
wizard
■ Click “Next”


■ Select “Add OpenSocial Gadget by URL”
■ Enter the URL to the gadget


■ The user will be asked to
disable certain features for the
widget, make sure to only
enable ones you trust

■ Some features may allow the
gadget to access sensitive
information

■ Click “Next”


■ Select “Just configure a widget for now”
■ Select “Finish”


■ Publish the widget to the widget catalog by right clicking the widget in the My
Widgets sidebar and selecting “Publish to Calatog”


■ In the Attachment section of the widget document select “Review”

■ Review the security information in the Security section
■ Select “Approve”


■ Remove the untrusted widget from the sidebar by right-clicking and selecting
“Remove”


 Now end users can utilize the widget that
was just created
 Browse the widget catalog by clicking
the toolbar button or the link in the view


■ Drag the widget from the catalog to the My Widgets sidebar


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Register For The Event
■ Now that the app is sending the embedded experience email and we have the
widget installed, let's register for the event and test the embedded experience
■ Go to the Event Signup XPage
■ Click the “Registration” tab


■ Fill out the form
■ Click the “Register” button


■ The user should see the confirmation message once the registration is complete


■ Open Lotus Notes and open the user's mail file
■ Double click the confirmation email to open it


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Leveraging The Power Of OpenSocial
■ One of the key features of the OpenSocial specification is the included social
APIs
─ People – the people that make up a social network
─ Friends – the people in that social network you have a relationship with
─ Activities – the actions the people in the social network take
─ Messages – the communication between people in that social network

■ Lotus Notes and Domino Social Edition has not committed to supporting these
APIs as of yet
─ We are looking for feed back from YOU!!!!
─ If there is demand and you feel these APIs will enhance your applications let us know!

■ Lets take a look how we could enhance our embedded experience if the APIs
were available


■ Gadgets rendering in Lotus Notes and Domino Social Edition can utilize existing
Social Data from many sources


■ The event organizers want as many people as possible to attend their event
─ The power of social networks can help spread awareness of events that take place
– Can be as simple as getting together with friends

– As powerful as starting a revolution

■ Leveraging OpenSocial, we can start to spread the word about our event to
other people in our network
─ We can post something to our activity stream in Connections 4
– People who follow us will see this in their stream and can register right from the embedded
experience
─ We can suggest other people who may be interested in the event from the list of people in our
network
– People who are suggested by us will get an embedded experience email allowing them to
register


Publishing To The Activity Stream
■ Activities in the IBM Connections 4 activity stream can also contain embedded
experiences
─ The real estate is much less compared to Lotus Notes and iNotes
─ We can use a mobile version of the app as the embedded experience


■ To use this mobile version of the Event Signup app as an embedded experience
in the Connections 4 activity stream we have to wrap it in a gadget.
■ In the Application view expand Resources, right click on Files and select “New
File...”


■ In the New File dialog give the file the name ActivityStreamEE.xml
■ Click “OK”


Script_Snippet_16

■ Paste Script_Snippet_16 into the empty editor

■ This is a URL gadget
─ Content type equals URL
─ The href attribute points to our mobile version of our XPage app
─ The URLs are relative to the gadget XML


■ In the Applications view, expand Resources → Files


Script_Snippet_17

■ Paste Script_Snippet_17 after the message text details section


Snippet 17
<div>
<span class="detailsLabel">Tell Everyone In Your Network You Are Attending This Event</span>
</div>
<div class="buttonHolder buttonHolderLeft">
<span class="linkButton" id="shareHolder">
<a id="shareLink" class="xspLink" title="Share With Others" href="#" >Share</a>
</span>
</div>
</div>


Script_Snippet_18

■ Paste Script_Snippet_18 at the end of the style section in ConfirmationEE.xml to
add some additional style to the button that was added in Script_Snippet_17


Snippet 18
.buttonHolderLeft {
text-align: left;
}


■ Add the code in the red box to the ModulePrefs section in ConfirmationEE.xml
■ This will provide the Social APIs from OpenSocial to our gadget at runtime


Script_Snippet_19

■ Open gadget.js
■ Paste Script_Snippet_19 in the onLoad function in gadget.js


Snippet 19
var batch = osapi.newBatch();
var fields = ['id','name','thumbnailUrl', 'emails'];
batch.add('viewer', osapi.people.getViewer({sortBy:'name',fields:fields}));
batch.execute(function(result){
if(result.error) {
gadgets.log('There was an error getting the viewer and their friends.');
}
hookShareAction(eeContext, result);
});


■ osapi.newBatch
─ Creates a new batch request
object.
─ Allows you to batch multiple
requests into a single request to
the server
─ Helps the gadgets performance

■ osapi.people.getViewer
─ Gets information about the current
viewer/user

■ hookShareAction
─ Hooks an onclick method to the
Share button


Script_Snippet_20

■ Paste Script_Snippet_20 after the addDetails function


Snippet 20
/**
* Hooks the share action to the share button.
* @param context The embedded experience context object.
* @param result The result of getting the viewer and the viewer's friends.
*/
function hookShareAction(context, result) {
if(!result.error) {
var share = function(e) {
var params = constructActivityParams(context, result);
osapi.activitystreams.create(params).execute(function(result) {
var shareHolder = document.getElementById('shareHolder');
shareHolder.innerHTML = 'Activity Posted';
shareHolder.onclick = '';
});
return false;
};
document.getElementById('shareLink').onclick = share;
}
};


/**
* Constructs the activity entry to post to the activity stream.
* @param context The embedded experience context.
* @param result The result of requesting the viewer and the viewer's friends.
* @return a JSON object representing the activity.
*/
function constructActivityParams(context, result) {
var viewer = result.viewer;
var id = new Date().getTime();
var gadget = context.dbUrl + '/ActivityStreamEE.xml';
var content = viewer.name.formatted + ' has registered for the event ' + context.siteName;
return {
"userId": '@viewer',
"groupId": '@self',
"activity": {
"published": '2010-04-27T06:02:36+0000',
"title": context.siteName,
"content": content,
"verb": 'post',
"generator":{
"id": id,
"displayName":context.siteName
},
"object": {
"objectType": "note",
"summary":"Event",
"url": context.dbUrl,
"id": id
},
"openSocial" : {
"embed" : {
"gadget" : gadget
}
}
}
};
}; 148 | © 2012 IBM Corporation

■ osapi.activitystreams
─ APIs for do basic
CRUD operations on
the container's activity
stream

─ In this case we create a
new activity entry in the
activity stream

─ Change the text of the
button so the user know
the activity was posted.

■ Call the share function
when the share button
is clicked


■ Constructs an activity based
on the Activity Streams spec
─ http://bit.ly/actstrdoc

■ Adding the embedded
experience
─ The embedded experience data
model is place at the end of the
activity in the openSocial property
─ Note there is no context property
in this embedded experience


■ Open the confirmation embedded experience email we already have in our inbox
■ We now have a share button that when clicked will publish an activity to the
activity stream in Connections 4


■ Now on the home page in Connections 4 users who are following Matthew will
see a post saying he is attending the event
■ If they click on the activity they will see them mobile version of the app as the
embedded experience


Agenda
■ Pre-requisites

■ Q&A
■ Resources

Recommending Network Contacts
■ The second way we can spread word about our event is to allow people who
have registered to recommend others to attend

■ In our confirmation embedded experience we want to get the list of people in the
current users network allow the user to suggest them
─ The network contacts the user suggests will receive an embedded experience email allowing
them to register for the event
─ This embedded experience will not use a gadget, it will be a URL embedded experience
– Points to a modified version of the registration XPage


■ We can reuse the existing registration code by placing it in a custom control
■ In the Applications view right click Custom Controls and select New Custom
Control


■ In the “New Custom Control” dialog give the dialog the name
“content_Registration”
■ Click “OK”


Script_Snippet_21

■ Select the “Source”
tab in the new custom
control, paste
Script_Snippet_21

■ This is the same code
that appears in
layout_UserTabs
custom control


■ In the Applications view right click on “XPages” and select “New XPage...”


■ In the “New XPage” dialog give the XPage the name “StandaloneRegistration”
■ Click “OK”


Script_Snippet_22

■ Select the “Source”
tab in the new
XPage and paste
Script_Snippet_22


■ Open the “Controls” View
─ Window → Show Eclipse Views → Controls
■ There should now be a content_Registration control listed under “Custom
Controls”


■ Drag and drop the content_registration control into the StandaloneRegistration
XPage
■ It should go inside the div with the id “content”


■ In a browser navigate to http://<yourServer>/signup.nsf/StandaloneRegistration.xsp

■ You will see the same registration page but without the tabbed UI


■ In the Applications view, expand Resources → Files


Script_Snippet_23

■ Paste
Script_Snippet_23
after the “Share”
details section but
before the “When”
details section

■ This code adds
container UI for people
in the user's network

■ HTML will be
dynamically injected
via JavaScript to
display the contacts


Snippet 23
<div>
<span class="detailsLabel">Suggest Other People Who May Be Interested In This Event</span>
</div>
<div id="peopleContainer">
</div>
</div>


Script_Snippet_24

■ Paste Script_Snippet_24
at the end of the style
tag

■ This CSS adds some
style for the network
contacts UI in the
gadget


Snippet 24
#peopleContainer {
margin-top: 10px;
}

.personContainer {
border: 2px solid #658423;
width: 145px;
padding: 5px 5px 5px 5px;
float: left;
margin-left: 10px;
margin-top: 10px;
text-align: center;
}

.personImageHolder {
margin-left: auto;
margin-right: auto;
width: 96px;
}

.highlight {
background-color: #ccffcc;
}
.clear {
clear: both;
}


■ In the Applications view, expand Code → Script Libraries and open gadget.js


Script_Snippet_25 & Script_Snippet_26

■ Paste
Script_Snippet_25 &
Script_Snippet_26
here

■ Snippet 25 add
another request to get
the viewer's friends
(network contacts)

■ Snippet 26 calls a
function to add the
user's network
contacts to the UI


Snippet 25
batch.add('friends', osapi.people.getViewerFriends({sortBy:'name',fields:fields}));

Snippet 26
addPeopleData(eeContext, result);


Script_Snippet_27

■ Paste Script_Snippet_27 after the addDetails function in gadget.js


Snippet 27
/**
* Adds the users friends to the UI.
* @param eeContext The embedded experiences context object.
* @param result The result of the batch request to fetch the viewer
* and the viewer's friends.
*/
function addPeopleData(eeContext, result) {
if(!result.error && result.friends.list.length > 0) {
viewer = result.viewer;
var friends = result.friends;
document.getElementById('peopleContainer').innerHTML = constructNetworkHtml(result.friends);
var personContainers = getElementsByClassName('div', 'personContainer');
var sendEmail = function(e) {
var to = friendToEmailMap[e.currentTarget.id];
var registerEE = eeContext.dbUrl + '/StandaloneRegistration.xsp';
var sub = viewer.name.formatted + ' Has Suggested You Register For The Event ' + eeContext.siteName;
var textHtml = viewer.name.formatted + ' has suggested you register for the event <a href="' + eeContext.dbUrl + '">' +
eeContext.siteName + '</a>';
var textPlain = viewer.name.formatted + ' has suggested you register for the event ' + eeContext.siteName + '. ' +
eeContext.dbUrl;
var postParams = constructMailerParams(eeContext.dbUrl, to, sub, textPlain, textHtml, {"url": registerEE})
osapi.http.post(postParams).execute(function(reponse) {
if(response.error) {
gadgets.log('There was an error sending the email');
}
});
//WARNING very fragile code here
var name = e.currentTarget.lastElementChild.lastElementChild.innerHTML;
e.currentTarget.innerHTML = 'Email Sent To ' + name;

e.currentTarget.classList.add('highlight');
e.currentTarget.onclick = '';
};
for(var i = 0; i < personContainers.length; i++) {
personContainers[i].onclick = sendEmail;
}
} else {
document.getElementById('peopleContainer').innerHTML = 'There is no one in your network to invite.';
}
};

/**
* Constructs the POST data for the request to send an email.
* @param dbUrl The database URL to use.
* @param to Who to send the email to.
* @param sub The subject of the email.
* @param textPlain The plain text part of the email.
* @param textHtml The text HTML part of the email.
* @param embedJson The embedded experience JSON data model.
* @return The POST data for the request to send an email.
*/
function constructMailerParams(dbUrl, to, sub, textPlain, textHtml, embedJson) {
return postParams = {
"href" : dbUrl + '/mailer',
"refreshInterval" : 0,
"body" : {
"To" : to,
"Subject" : sub, 175 | © 2012 IBM Corporation

"Principal" : 'No Reply',
"Body" : {
"text_plain" : textPlain,
"text_html" : textHtml,
"embed_json" : embedJson
}
}
};
};

/**
* Constructs the UI for the people in your network.
* @param friends List of friends.
* @return HTML for the UI for the people in your network.
*/
function constructNetworkHtml(friends) {
var html = '';
for(var i = 0; i < friends.list.length; i++) {
var person = friends.list[i];
friendToEmailMap[person.id] = person.emails[0].value;
html = html +
'<div class="personContainer" id="' + person.id + '">' +
'<div class="personImageHolder">' +
'<img src="' + person.thumbnailUrl + '"/>' +
'</div>' +
'<div class="personName">' +
'<span>' + person.name.formatted + '</span>' +

'</div>' +
'</div>';
}
html = html + '<div class="clear"/>';
return html;
};

/**
* Utility function to get DOM elements by their class name.
* @param tagName The element tag name.
* @param cssClass The CSS class.
* @return An array of DOM elements matching the tag and class name.
*/
function getElementsByClassName(tagName, cssClass) {
var result = [];
var elements = document.getElementsByTagName(tagName);
for(var i = 0; i < elements.length; i++) {
if(elements[i].className === cssClass) {
result[result.length] = elements[i];
}
}
return result;
};


■ result.friends contains a list of
contacts in the user's network
─ This is passed to
constructNetworkHtml which will
build the HTML in the embedded
experience

■ The sendEmail function is
called when the user clicks
on the picture
─ osapi.http.post POSTs to the
Mailer Servlet on the Domino
server
─ This servlet actually sends the
email to the user


■ We POST a JSON object to
the Mailer Servlet
─ The href property points to the
URL of the Mailer Servlet
─ The body property is the POST
body
─ The POST body contains the
fields of the email and its
properties
─ embed_json is the embedded
experience data model we want to
put in the email


■ Go back to the confirmation email in the user's Inbox in Lotus Notes
─ You should now see a list of people in that user's network being displayed


■ Selecting a network contact will cause the app to send an email to them asking
them to register


■ The suggested contact will get an email in their Inbox
─ In this screen shot we are showing a user using Lotus iNotes Social Edition


■ Once opening the email we can see the registration embedded experience
─ This is showing a URL embedded experience
─ It is pointing to the StandaloneRegistration.xsp


■ The user can now register right from their email


Conclusion
■ Embedded Experiences helps enhance end users' notifications
─ Available in Lotus Notes and iNotes Social Edition

■ XPages + OpenSocial = Powerful Social Applications
─ XPages makes it easy to build powerful web based applications
─ OpenSocial makes it easy to integrate social data

■ Still more work to do...
─ Should be easier to surface XPages as OpenSocial gadgets
– Follow a similar model to how we can surface XPages as iWidgets

─ We need feedback on the Social APIs in OpenSocial!


Go Ahead. Ask Us Anything!

Q&A


Resources
■ IBM Social Business Development Wiki - http://bit.ly/socialbizwiki
■ Embedded Experiences Tutorial - http://bit.ly/EETutorial
■ OpenSocial - http://docs.opensocial.org
■ Actvity Streams - http://activitystrea.ms/
■ OpenSocial 2.0 Sandbox - http://bit.ly/OSSandbox
■ Ryan Baxter's Blog - http://ryanjbaxter.com


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.

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.

IBM, the IBM logo, Lotus, Lotus Notes, 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.


Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (11)

Similar a Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

Similar a Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial (20)

Último

Último (20)

Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial