SHOW115 Socialize YourApplications Using OpenSocialRyan Baxter | Staff Software Engineer | IBMStanton Sievers | Staff Soft...
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawalwithout notice at IBM’s so...
Giving Credit■   This presentation mentions the following products     ─ IBM® Lotus Notes®     ─ IBM® Lotus iNotes®     ─ ...
About Us               Ryan has been working at IBM for the past 3 years. Prior to that he               was a student at ...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Terminology■   Embedded Experiences     ─ Embedded experiences is a method of embedding the “experience” or functionality ...
Background■   Constant Context Switching With Todays Apps     ─ Many applications that we use every day send notifications...
Background    ■   Embedded experiences are represented via a data model         ─ JSON         ─ XML         ─ The data mo...
BackgroundFrom: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your ...
Sample Notification Email                            10 |   © 2012 IBM Corporation
Sample Embedded Experience                             11 |   © 2012 IBM Corporation
Embedded Experiences Flow                                     Sends Embedded Experience Email Lotus Notes/iNotes Social Ed...
What We Are Going To Build■   Take an existing XPage application on OpenNTF and enhance it to start sending    embedded ex...
DEMOS        14 |   © 2012 IBM Corporation
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Pre-requisites■   Lotus Notes and Domino 8.5.4 Social Edition     ─ Is only required for rendering embedded experiences   ...
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    d...
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                                    21 |   © 2012 IBM Corporation
Pre-requisites■   Move the app to <domino data dir>/signup.nsf                                                   22 |   © ...
Pre-requisites■   Open the Lotus Domino Administrator client     ─ Open the server by going to File → Open Server...■   Se...
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 Users ID                                                ...
Pre-requisites■   Open a browser and navigate to the XPage: http://<server>/signup.nsf■   Click “Staff Login”■   Login wit...
Pre-requisites■   Click the “Edit Pages Content” to edit the content of the app                                           ...
Pre-requisites■   Add some content to the home tab                                       28 |   © 2012 IBM Corporation
Pre-requisites■   Add content to the registration tab                                          29 |   © 2012 IBM Corporation
Pre-requisites■   Add footer content and save changes                                          30 |   © 2012 IBM Corporation
Pre-requisites■   Click “View Site Settings”                                 31 |   © 2012 IBM Corporation
Pre-requisites   Click “Edit Settings”                            32 |   © 2012 IBM Corporation
Pre-requisites   Fill out the settings for your event                                           33 |   © 2012 IBM Corpora...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Add When, Where, and Address Fields■   In order to provide a    richer embedded    experience we need to    make some chan...
Add When, Where, and Address Fields■   Open Lotus Domino Designer■   Go to File → Open → Lotus Notes Application          ...
Add When, Where, and Address Fields■   Navigate to the server and application and click “Open”                            ...
Add When, Where, and Address Fields■   In the Applications view expand Forms■   Double-click on “Pages Content” to open   ...
Add When, Where, and Address Fields■   Right click in the “Details Tab Content” cell and select Insert → Row              ...
Add When, Where, and Address Fields■   Put the text “Details Tab Where” in the first column■   Click in the second column ...
Add When, Where, and Address Fields■   In the field properties dialog give the field the following properties     ─ Name: ...
Add When, Where, and Address Fields■   Right click in the “Details Tab Content” cell and select Insert → Row              ...
Add When, Where, and Address Fields■   Put the text “Details Tab When” in the first column■   Click in the second column t...
Add When, Where, and Address Fields■   In the field properties dialog give the field the following properties     ─ Name: ...
Add When, Where, and Address Fields■   Right click in the “Details Tab Content” cell and select Insert → Row              ...
Add When, Where, and Address Fields■   Put the text “Details Tab Address” in the first column■   Click in the second colum...
Add When, Where, and Address Fields■   In the field properties dialog give the field the following properties     ─ Name: ...
Add When, Where, and Address Fields■   The three new fields are highlighted in red                                        ...
Add When, Where, and Address Fields■   In the Applications view expand Custom Controls and open content_EditContent       ...
Add When, Where, and Address Fields■   Open the source view of the content_EditContent custom control                     ...
Script_Snippet_1   Add When, Where, and Address Fields    ■   Paste Script_Snippet_1 into the TabDetails tab panel    ■   ...
Snippet 1<!--Code snippet for custom control content_EditContent--><xp:div styleClass="tabTextHolder">      <xp:label valu...
Add When, Where, and Address Fields■   In the Applications view, expand Custom Controls and open layout_UserTabs          ...
Add When, Where, and Address Fields■   Open the Source view of the layout_UserTabs custom control                         ...
Script_Snippet_2   Add When, Where, and Address Fields    ■   Paste Script_Snippet_2 into layout_UserTabs    ■   This adds...
Snippet 2<!--Code snippet for custom control layout_UserTabs--><xp:div styleClass="detailsSection">       <xp:label value=...
Add When, Where, and Address Fields■   In the Applications view expand Resources → Style Sheets■   Open site.css          ...
Script_Snippet_3   Add When, Where, and Address Fields    ■   Paste Script_Snippet_3 into site.css    ■   This adds some s...
Snippet 3/* CSS for site.css */.detailsLabel {    font-size: 150%;}.detailsSection {    padding-top: 20px;}               ...
Add When, Where, and Address Fields■   Go to the XPage in the browser■   Select “Edit Page Content”                       ...
Add When, Where, and Address Fields■   Go to the “Details” Tab                                      61 |   © 2012 IBM Corp...
Add When, Where, and Address Fields■   Fill out the When, Where, and Address Fields■   Remove any text from the rich text ...
Add When, Where, and Address Fields■   Save the changes                                      63 |   © 2012 IBM Corporation
Add When, Where, and Address Fields■   Final Result                                      64 |   © 2012 IBM Corporation
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Creating A Confirmation Embedded Experience■   Currently the confirmation email the registrant gets is just text■   We wan...
Creating A Confirmation Embedded Experience■   Open Lotus Domino Designer■   In the Applications view right click on Resou...
Creating A Confirmation Embedded Experience■   Give the new file the name ConfirmationEE.xml                              ...
Creating A Confirmation Embedded Experience■   Select the Source view                                              69 |   ...
Script_Snippet_4   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_4 into ConfirmationEE.xml      ...
Snippet 4<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Event Signup Confirmation"  description="Embe...
Creating A Confirmation Embedded Experience■   ModulePrefs contain basic information about the gadget■   Features provide ...
Creating A Confirmation Embedded Experience■   Content sections define the gadget UI and functionality     ─ Content secti...
Script_Snippet_5   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_5 into the CDATA section in Con...
Snippet 5  <div class="container">        <div class="header">                 <div class="headerInner">                  ...
Script_Snippet_6   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_6 in the div with the class xsp...
Snippet 6            <!-- Add some holders for information about the event -->            <div class="detailsSection">    ...
Script_Snippet_7   Creating A Confirmation Embedded Experience    ■   Give the embedded experience some style!    ■   Past...
Snippet 7  <!-- Add the stylesheet from the XPage application to the gadget -->   <link rel="stylesheet" href="site.css" t...
Creating A Confirmation Embedded Experience■   Create a JavaScript file in which to put our embedded experiences logic■   ...
Creating A Confirmation Embedded Experience■   In the “New Script Library” Dialog give the script the name “gadget.js”■   ...
Script_Snippet_8   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_8        into gadget.js    ■   ...
Snippet 8/*** Global map of friends to email addresses.*/var friendToEmailMap = {};/*** Data context key for the embedded ...
Script_Snippet_9   Creating A Confirmation Embedded Experience    ■   Add Script_Snippet_9 to the onLoad function         ...
Snippet 9  opensocial.data.getDataContext().registerListener(EE_KEY, function(key) {        var eeContext = opensocial.dat...
Creating A Confirmation Embedded Experience■   registerListener     ─ registers a function to be       called when the emb...
Creating A Confirmation Embedded Experience■   The eeContext object will contain the context property from our data model ...
Script_Snippet_10   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_10 after the onLoad function i...
Snippet 10/*** Adds details information to the DOM.* @param eeContext The embedded experiences context object.*/function a...
Script_Snippet_11   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_11 after the addDetails functi...
Snippet 11/** * Draws the Google Map in the UI. * @param address The address of the event. * @param where Where the event ...
Creating A Confirmation Embedded Experience■   Add the code in the red box below to the onLoad function in gadget.js to dr...
Creating A Confirmation Embedded Experience■   Finally, we must modify the gadget to include a reference to our gadget.js ...
Script_Snippet_12   Creating A Confirmation Embedded Experience    ■   Paste Script_Snippet_12 in ConfirmationEE.xml to ad...
Snippet 12         <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.3&sensor=false"></script...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Sending The Embedded Experience Email■   Now that we have our embedded experience gadget created we want to be able    to ...
Sending The Embedded Experience Email■   In the Applications view expand Code → Agents■   Open “(Send Registration Confirm...
Script_Snippet_13   Sending The Embedded Experience Email    ■   Paste Script_Snippet_13 after creating a new notes sessio...
Snippet 13  Dim convertMime As Boolean  convertMime = session.Convertmime                                      100 |   © 2...
Script_Snippet_14   Sending The Embedded Experience Email    ■   Paste Script_Snippet_14 after we get the document with th...
Snippet 14  Dim contentDoc As NotesDocument  Set contentDoc = view.Getdocumentbykey("PagesContent", True)                 ...
Sending The Embedded Experience Email■   We need to get the    PagesContent doc in order    to include the values of the  ...
Sending The Embedded Experience Email■   Remove the line in the red box from the send email confirmation agent■   We will ...
Script_Snippet_15   Sending The Embedded Experience Email    ■   Paste Script_Snippet_15 after we add the subject item to ...
Snippet 15  Dim content As Variant  content = settingsDoc.Getitemvalue("RegEmailContent")  Dim strContent As String  strCo...
Snippet 15 (continued)Set mime = topMime.Createchildentity()Set stream = session.Createstream()Call stream.Writetext("<b>"...
Snippet15 (continued)Dim gadgetUrl As StringgadgetUrl = dbUrl + "/ConfirmationEE.xml"Dim siteName As VariantsiteName = set...
Sending The Embedded Experience Email■   Here we add a MIME    body part and add the    necessary MIME    headers to the e...
Sending The Embedded Experience Email■   Here we add two MIME    parts to the MIME email■   These will be used for mail   ...
Sending The Embedded Experience Email■   This code creates the    JSON embedded    experience data model    using informat...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Creating A Widget For Our Embedded Experience■   Lotus Notes and iNotes Social Edition use the Widgets Framework to push  ...
Creating A Widget For Our Embedded Experience■   Open Lotus Notes Social Edition■   Select the toolbar icon to open the   ...
Creating A Widget For Our Embedded Experience■   Select “Add OpenSocial Gadget by URL”■   Enter the URL to the gadget     ...
Creating A Widget For Our Embedded Experience■   The user will be asked to    disable certain features for the    widget, ...
Creating A Widget For Our Embedded Experience■   Select “Just configure a widget for now”■   Select “Finish”              ...
Creating A Widget For Our Embedded Experience■   Publish the widget to the widget catalog by right clicking the widget in ...
Creating A Widget For Our Embedded Experience■   In the Attachment section of the widget document select “Review”■   Revie...
Creating A Widget For Our Embedded Experience■   Remove the untrusted widget from the sidebar by right-clicking and select...
Creating A Widget For Our Embedded Experience   Now end users can utilize the widget that    was just created   Browse t...
Creating A Widget For Our Embedded Experience■   Drag the widget from the catalog to the My Widgets sidebar               ...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Register For The Event■   Now that the app is sending the embedded experience email and we have the    widget installed, l...
Register For The Event■   Fill out the form■   Click the “Register” button                                  125 |   © 2012...
Register For The Event■   The user should see the confirmation message once the registration is complete                  ...
Register For The Event■   Open Lotus Notes and open the users mail file■   Double click the confirmation email to open it ...
Register For The Event                         128 |   © 2012 IBM Corporation
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Leveraging The Power Of OpenSocial■   One of the key features of the OpenSocial specification is the included social    AP...
Leveraging The Power Of OpenSocial■   Gadgets rendering in Lotus Notes and Domino Social Edition can utilize existing    S...
Leveraging The Power Of OpenSocial■   The event organizers want as many people as possible to attend their event     ─ The...
Publishing To The Activity Stream■   Activities in the IBM Connections 4 activity stream can also contain embedded    expe...
Publishing To The Activity Stream■   To use this mobile version of the Event Signup app as an embedded experience    in th...
Publishing To The Activity Stream■   In the New File dialog give the file the name ActivityStreamEE.xml■   Click “OK”     ...
Script_Snippet_16     Publishing To The Activity Stream■   Paste Script_Snippet_16 into the empty editor■   This is a URL ...
Publishing To The Activity Stream■   In the Applications view, expand Resources → Files■   Open ConfirmationEE.xml        ...
Script_Snippet_17   Publishing To The Activity Stream    ■   Paste Script_Snippet_17 after the message text details sectio...
Snippet 17        <div class="detailsSection">                 <div>                          <span class="detailsLabel">T...
Script_Snippet_18   Publishing To The Activity Stream    ■   Paste Script_Snippet_18 at the end of the style section in Co...
Snippet 18     .buttonHolderLeft {           text-align: left;     }                               141 |   © 2012 IBM Corp...
Publishing To The Activity Stream■   Add the code in the red box to the ModulePrefs section in ConfirmationEE.xml■   This ...
Script_Snippet_19   Publishing To The Activity Stream    ■   Open gadget.js    ■   Paste Script_Snippet_19 in the onLoad f...
Snippet 19     var batch = osapi.newBatch();     var fields = [id,name,thumbnailUrl, emails];     batch.add(viewer, osapi....
Publishing To The Activity Stream■   osapi.newBatch     ─ Creates a new batch request       object.     ─ Allows you to ba...
Script_Snippet_20   Publishing To The Activity Stream    ■   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. * @pa...
Snippet 20 (continued)/** * Constructs the activity entry to post to the activity stream. * @param context The embedded ex...
Publishing To The Activity Stream■   osapi.activitystreams     ─ APIs for do basic       CRUD operations on       the cont...
Publishing To The Activity Stream■   Constructs an activity based    on the Activity Streams spec     ─ http://bit.ly/acts...
Publishing To The Activity Stream■   Open the confirmation embedded experience email we already have in our inbox■   We no...
Publishing To The Activity Stream■   Now on the home page in Connections 4 users who are following Matthew will    see a p...
Agenda■   Terminology & Background■   Pre-requisites■   Extending The XPage App     ─ Add When, Where, and Address Fields ...
Recommending Network Contacts■   The second way we can spread word about our event is to allow people who    have register...
Recommending Network Contacts                                155 |   © 2012 IBM Corporation
Recommending Network Contacts■   We can reuse the existing registration code by placing it in a custom control■   In the A...
Recommending Network Contacts■   In the “New Custom Control” dialog give the dialog the name    “content_Registration”■   ...
Script_Snippet_21   Recommending Network Contacts    ■   Select the “Source”        tab in the new custom        control, ...
Recommending Network Contacts■   In the Applications view right click on “XPages” and select “New XPage...”               ...
Recommending Network Contacts■   In the “New XPage” dialog give the XPage the name “StandaloneRegistration”■   Click “OK” ...
Script_Snippet_22   Recommending Network Contacts    ■   Select the “Source”        tab in the new        XPage and paste ...
Recommending Network Contacts■   Open the “Controls” View     ─ Window → Show Eclipse Views → Controls■   There should now...
Recommending Network Contacts■   Drag and drop the content_registration control into the StandaloneRegistration    XPage■ ...
Recommending Network Contacts■   In a browser navigate to http://<yourServer>/signup.nsf/StandaloneRegistration.xsp■   You...
Recommending Network Contacts■   Open Lotus Domino Designer■   In the Applications view, expand Resources → Files■   Open ...
Script_Snippet_23   Recommending Network Contacts    ■   Paste        Script_Snippet_23        after the “Share”        de...
Snippet 23             <div class="detailsSection">                      <div>                               <span class="...
Script_Snippet_24   Recommending Network Contacts    ■   Paste Script_Snippet_24        at the end of the style        tag...
Snippet 24     #peopleContainer {           margin-top: 10px;     }     .personContainer {           border: 2px solid #65...
Recommending Network Contacts■   In the Applications view, expand Code → Script Libraries and open gadget.js              ...
Script_Snippet_25 & Script_Snippet_26   Recommending Network Contacts    ■   Paste        Script_Snippet_25 &        Scrip...
Snippet 25     batch.add(friends, osapi.people.getViewerFriends({sortBy:name,fields:fields}));Snippet 26           addPeop...
Script_Snippet_27   Recommending Network Contacts    ■   Paste Script_Snippet_27 after the addDetails function in gadget.j...
Snippet 27/** * Adds the users friends to the UI. * @param eeContext The embedded experiences context object. * @param res...
Snippet 27 (continued)e.currentTarget.classList.add(highlight);e.currentTarget.onclick = ;};for(var i = 0; i < personConta...
Snippet 27 (continued)"Principal" : No Reply,"Body" : {"text_plain" : textPlain,"text_html" : textHtml,"embed_json" : embe...
Snippet 27 (continued)</div> +</div>;}html = html + <div class="clear"/>;return html;};/** * Utility function to get DOM e...
Recommending Network Contacts■   result.friends contains a list of    contacts in the users network     ─ This is passed t...
Recommending Network Contacts■   We POST a JSON object to    the Mailer Servlet     ─ The href property points to the     ...
Recommending Network Contacts■   Go back to the confirmation email in the users Inbox in Lotus Notes     ─ You should now ...
Recommending Network Contacts■   Selecting a network contact will cause the app to send an email to them asking    them to...
Recommending Network Contacts■   The suggested contact will get an email in their Inbox     ─ In this screen shot we are s...
Recommending Network Contacts■   Once opening the email we can see the registration embedded experience     ─ This is show...
Recommending Network Contacts■   The user can now register right from their email                                         ...
Conclusion■   Embedded Experiences helps enhance end users notifications     ─ Available in Lotus Notes and iNotes Social ...
Go Ahead. Ask Us Anything!                    Q&A                             186 |   © 2012 IBM Corporation
Resources■   IBM Social Business Development Wiki - http://bit.ly/socialbizwiki■   Embedded Experiences Tutorial - http://...
Legal disclaimer© IBM Corporation 2012. All Rights Reserved.  The information contained in this publication is provided fo...
Upcoming SlideShare
Loading in...5
×

Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

3,538

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,538
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
112
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

  1. 1. SHOW115 Socialize YourApplications Using OpenSocialRyan Baxter | Staff Software Engineer | IBMStanton Sievers | Staff Software Engineer | IBM© 2012 IBM Corporation
  2. 2. IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawalwithout notice at IBM’s sole discretion.Information regarding potential future products is intended to outline our general product directionand it should not be relied on in making a purchasing decision.The information mentioned regarding potential future products is not a commitment, promise, orlegal obligation to deliver any material, code or functionality. Information about potential futureproducts may not be incorporated into any contract. The development, release, and timing of anyfuture features or functionality described for our products remains at our sole discretion. 2 | © 2012 IBM Corporation
  3. 3. 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 3 | © 2012 IBM Corporation
  4. 4. 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. 4 | © 2012 IBM Corporation
  5. 5. 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 5 | © 2012 IBM Corporation
  6. 6. 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. 6 | © 2012 IBM Corporation
  7. 7. Background■ Constant Context Switching With Todays 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 7 | © 2012 IBM Corporation
  8. 8. 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 }} 8 | © 2012 IBM Corporation
  9. 9. BackgroundFrom: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"Mary has commented on your status.--XXXXboundary textContent-Type: text/plainMary has commeneted on your status.--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://example.com/embedded/gagdet.xm", "context" : 123}--XXXXboundary textContent-Type: text/html<html><!-- HTML representation here --></html> 9 | © 2012 IBM Corporation
  10. 10. Sample Notification Email 10 | © 2012 IBM Corporation
  11. 11. Sample Embedded Experience 11 | © 2012 IBM Corporation
  12. 12. Embedded Experiences Flow Sends Embedded Experience Email Lotus Notes/iNotes Social Edition Makes Request(s) Back To Service 12 | © 2012 IBM Corporation
  13. 13. 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 ones network who would want to attend – These people will get embedded experience notification emails as well 13 | © 2012 IBM Corporation
  14. 14. DEMOS 14 | © 2012 IBM Corporation
  15. 15. 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 15 | © 2012 IBM Corporation
  16. 16. 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 16 | © 2012 IBM Corporation
  17. 17. Pre-requisites■ Download the “Mailer Servlet” and install it on your Domino Server■ Go to: http://bit.ly/mailerservlet 17 | © 2012 IBM Corporation
  18. 18. 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 18 | © 2012 IBM Corporation
  19. 19. Pre-requisites■ Download and install the Event Signup app■ Go to openntf.org■ Select Projects 19 | © 2012 IBM Corporation
  20. 20. Pre-requisites■ Select the Event Signup app from the “Name lookup” drop-down 20 | © 2012 IBM Corporation
  21. 21. Pre-requisites■ Download the Event Signup app 21 | © 2012 IBM Corporation
  22. 22. Pre-requisites■ Move the app to <domino data dir>/signup.nsf 22 | © 2012 IBM Corporation
  23. 23. 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 23 | © 2012 IBM Corporation
  24. 24. Pre-requisites■ Go to the “Files” tab, right click on signup.nsf■ Select “Sign...” 24 | © 2012 IBM Corporation
  25. 25. Pre-requisites■ Click “OK” to sign the database with the Active Users ID 25 | © 2012 IBM Corporation
  26. 26. Pre-requisites■ Open a browser and navigate to the XPage: http://<server>/signup.nsf■ Click “Staff Login”■ Login with your credentials when prompted 26 | © 2012 IBM Corporation
  27. 27. Pre-requisites■ Click the “Edit Pages Content” to edit the content of the app 27 | © 2012 IBM Corporation
  28. 28. Pre-requisites■ Add some content to the home tab 28 | © 2012 IBM Corporation
  29. 29. Pre-requisites■ Add content to the registration tab 29 | © 2012 IBM Corporation
  30. 30. Pre-requisites■ Add footer content and save changes 30 | © 2012 IBM Corporation
  31. 31. Pre-requisites■ Click “View Site Settings” 31 | © 2012 IBM Corporation
  32. 32. Pre-requisites Click “Edit Settings” 32 | © 2012 IBM Corporation
  33. 33. Pre-requisites Fill out the settings for your event 33 | © 2012 IBM Corporation
  34. 34. 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 34 | © 2012 IBM Corporation
  35. 35. 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 35 | © 2012 IBM Corporation
  36. 36. Add When, Where, and Address Fields■ Open Lotus Domino Designer■ Go to File → Open → Lotus Notes Application 36 | © 2012 IBM Corporation
  37. 37. Add When, Where, and Address Fields■ Navigate to the server and application and click “Open” 37 | © 2012 IBM Corporation
  38. 38. Add When, Where, and Address Fields■ In the Applications view expand Forms■ Double-click on “Pages Content” to open 38 | © 2012 IBM Corporation
  39. 39. Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row 39 | © 2012 IBM Corporation
  40. 40. Add When, Where, and Address Fields■ 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... 40 | © 2012 IBM Corporation
  41. 41. Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties ─ Name: DetailsTabWhere ─ Type: Text/Editable 41 | © 2012 IBM Corporation
  42. 42. Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row 42 | © 2012 IBM Corporation
  43. 43. Add When, Where, and Address Fields■ Put the text “Details Tab When” 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 43 | © 2012 IBM Corporation
  44. 44. Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties ─ Name: DetailsTabWhen ─ Type: Text/Editable 44 | © 2012 IBM Corporation
  45. 45. Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row 45 | © 2012 IBM Corporation
  46. 46. Add When, Where, and Address Fields■ Put the text “Details Tab Address” 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 46 | © 2012 IBM Corporation
  47. 47. Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties ─ Name: DetailsTabAddress ─ Type: Text/Editable 47 | © 2012 IBM Corporation
  48. 48. Add When, Where, and Address Fields■ The three new fields are highlighted in red 48 | © 2012 IBM Corporation
  49. 49. Add When, Where, and Address Fields■ In the Applications view expand Custom Controls and open content_EditContent 49 | © 2012 IBM Corporation
  50. 50. Add When, Where, and Address Fields■ Open the source view of the content_EditContent custom control 50 | © 2012 IBM Corporation
  51. 51. Script_Snippet_1 Add When, Where, and Address Fields ■ Paste Script_Snippet_1 into the TabDetails tab panel ■ This adds the when, where, and address fields to the edit content XPage 51 | © 2012 IBM Corporation
  52. 52. Snippet 1<!--Code snippet for custom control content_EditContent--><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:div styleClass="tabTextHolder"> <xp:label value="Where:" id="label4"></xp:label> <xp:inputText id="editDetailsWhere" value="#{contentDoc.DetailsTabWhere}" styleClass="tabTextField"> </xp:inputText></xp:div><xp:div styleClass="tabTextHolder"> <xp:label value="Address:" id="label5"></xp:label> <xp:inputText id="editDetailsAddress" value="#{contentDoc.DetailsTabAddress}" styleClass="tabTextField"> </xp:inputText></xp:div> 52 | © 2012 IBM Corporation
  53. 53. Add When, Where, and Address Fields■ In the Applications view, expand Custom Controls and open layout_UserTabs 53 | © 2012 IBM Corporation
  54. 54. Add When, Where, and Address Fields■ Open the Source view of the layout_UserTabs custom control 54 | © 2012 IBM Corporation
  55. 55. Script_Snippet_2 Add When, Where, and Address Fields ■ Paste Script_Snippet_2 into layout_UserTabs ■ This adds the when, where, and address fields to the Details tab 55 | © 2012 IBM Corporation
  56. 56. Snippet 2<!--Code snippet for custom control layout_UserTabs--><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:div styleClass="detailsSection"> <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:div styleClass="detailsSection"> <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> 56 | © 2012 IBM Corporation
  57. 57. Add When, Where, and Address Fields■ In the Applications view expand Resources → Style Sheets■ Open site.css 57 | © 2012 IBM Corporation
  58. 58. Script_Snippet_3 Add When, Where, and Address Fields ■ Paste Script_Snippet_3 into site.css ■ This adds some styling to the when, where, and address fields 58 | © 2012 IBM Corporation
  59. 59. Snippet 3/* CSS for site.css */.detailsLabel { font-size: 150%;}.detailsSection { padding-top: 20px;} 59 | © 2012 IBM Corporation
  60. 60. Add When, Where, and Address Fields■ Go to the XPage in the browser■ Select “Edit Page Content” 60 | © 2012 IBM Corporation
  61. 61. Add When, Where, and Address Fields■ Go to the “Details” Tab 61 | © 2012 IBM Corporation
  62. 62. Add When, Where, and Address Fields■ Fill out the When, Where, and Address Fields■ Remove any text from the rich text editor 62 | © 2012 IBM Corporation
  63. 63. Add When, Where, and Address Fields■ Save the changes 63 | © 2012 IBM Corporation
  64. 64. Add When, Where, and Address Fields■ Final Result 64 | © 2012 IBM Corporation
  65. 65. 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 65 | © 2012 IBM Corporation
  66. 66. 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>” } } 66 | © 2012 IBM Corporation
  67. 67. Creating A Confirmation Embedded Experience■ Open Lotus Domino Designer■ In the Applications view right click on Resources → Files■ Select “New File...” 67 | © 2012 IBM Corporation
  68. 68. Creating A Confirmation Embedded Experience■ Give the new file the name ConfirmationEE.xml 68 | © 2012 IBM Corporation
  69. 69. Creating A Confirmation Embedded Experience■ Select the Source view 69 | © 2012 IBM Corporation
  70. 70. Script_Snippet_4 Creating A Confirmation Embedded Experience ■ Paste Script_Snippet_4 into ConfirmationEE.xml ─ Basic outline of a gadget XML file 70 | © 2012 IBM Corporation
  71. 71. 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[ <!-- Replace the content of this CDATA section with Script_Snippet_5 --> ]]> </Content></Module> 71 | © 2012 IBM Corporation
  72. 72. Creating A Confirmation Embedded Experience■ 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 72 | © 2012 IBM Corporation
  73. 73. Creating A Confirmation Embedded Experience■ 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” 73 | © 2012 IBM Corporation
  74. 74. Script_Snippet_5 Creating A Confirmation Embedded Experience ■ Paste Script_Snippet_5 into the CDATA section in ConfirmationEE.xml 74 | © 2012 IBM Corporation
  75. 75. 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"> <!-- Replace the content of this div with Script_Snippet_6 --> </div> <div class="footer"> <p>&copy; Acme Corp</p> </div> </div> </div> 75 | © 2012 IBM Corporation
  76. 76. Script_Snippet_6 Creating A Confirmation Embedded Experience ■ Paste Script_Snippet_6 in the div with the class xspTabTabbedPannel 76 | © 2012 IBM Corporation
  77. 77. Snippet 6 <!-- Add some holders for information about the event --> <div class="detailsSection"> <div id="messageText"></div> </div> <div class="detailsSection"> <span class="detailsLabel">When</span> <div><span id="whenText"></span></div> </div> <div class="detailsSection"> <span class="detailsLabel">Where</span> <div><span id="whereText"></span></div> </div> <div class="detailsSection"> <span class="detailsLabel">Address</span> <div><span id="addressText"></span></div> </div> <!-- Div for our Google Map To Go In --> <div id="mapCanvas"></div> 77 | © 2012 IBM Corporation
  78. 78. Script_Snippet_7 Creating A Confirmation Embedded Experience ■ Give the embedded experience some style! ■ Paste Script_Snippet_7 in the CDATA section above the first div 78 | © 2012 IBM Corporation
  79. 79. Snippet 7 <!-- Add the stylesheet from the XPage application to the gadget --> <link rel="stylesheet" href="site.css" type="text/css"></link> <style type="text/css"> #mapCanvas { height: 500px; margin-top: 20px; margin-bottom: 20px; } </style> 79 | © 2012 IBM Corporation
  80. 80. Creating A Confirmation Embedded Experience■ 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...” 80 | © 2012 IBM Corporation
  81. 81. Creating A Confirmation Embedded Experience■ In the “New Script Library” Dialog give the script the name “gadget.js”■ Select the type JavaScript 81 | © 2012 IBM Corporation
  82. 82. Script_Snippet_8 Creating A Confirmation Embedded Experience ■ 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 82 | © 2012 IBM Corporation
  83. 83. 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); 83 | © 2012 IBM Corporation
  84. 84. Script_Snippet_9 Creating A Confirmation Embedded Experience ■ Add Script_Snippet_9 to the onLoad function 84 | © 2012 IBM Corporation
  85. 85. Snippet 9 opensocial.data.getDataContext().registerListener(EE_KEY, function(key) { var eeContext = opensocial.data.getDataContext().getDataSet(key); addDetails(eeContext); }); 85 | © 2012 IBM Corporation
  86. 86. Creating A Confirmation Embedded Experience■ 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 86 | © 2012 IBM Corporation
  87. 87. Creating A Confirmation Embedded Experience■ 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>” } } 87 | © 2012 IBM Corporation
  88. 88. Script_Snippet_10 Creating A Confirmation Embedded Experience ■ 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 88 | © 2012 IBM Corporation
  89. 89. 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;}; 89 | © 2012 IBM Corporation
  90. 90. Script_Snippet_11 Creating A Confirmation Embedded Experience ■ 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 90 | © 2012 IBM Corporation
  91. 91. 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
  92. 92. Creating A Confirmation Embedded Experience■ Add the code in the red box below to the onLoad function in gadget.js to draw the map when the gadget loads 92 | © 2012 IBM Corporation
  93. 93. Creating A Confirmation Embedded Experience■ 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 93 | © 2012 IBM Corporation
  94. 94. Script_Snippet_12 Creating A Confirmation Embedded Experience ■ Paste Script_Snippet_12 in ConfirmationEE.xml to add the script tags for our gadget.js file and the Google Maps JavaScript 94 | © 2012 IBM Corporation
  95. 95. 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> 95 | © 2012 IBM Corporation
  96. 96. 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 96 | © 2012 IBM Corporation
  97. 97. 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 ─ Well change the agent so it sends MIME emails ─ Well add the embedded experience MIME part containing our data model to the email 97 | © 2012 IBM Corporation
  98. 98. Sending The Embedded Experience Email■ In the Applications view expand Code → Agents■ Open “(Send Registration Confirmation)” 98 | © 2012 IBM Corporation
  99. 99. Script_Snippet_13 Sending The Embedded Experience Email ■ Paste Script_Snippet_13 after creating a new notes session in the send mail confirmation agent 99 | © 2012 IBM Corporation
  100. 100. Snippet 13 Dim convertMime As Boolean convertMime = session.Convertmime 100 | © 2012 IBM Corporation
  101. 101. Script_Snippet_14 Sending The Embedded Experience Email ■ Paste Script_Snippet_14 after we get the document with the key AppSettings in the send confirmation email agent 101 | © 2012 IBM Corporation
  102. 102. Snippet 14 Dim contentDoc As NotesDocument Set contentDoc = view.Getdocumentbykey("PagesContent", True) 102 | © 2012 IBM Corporation
  103. 103. Sending The Embedded Experience Email■ 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 103 | © 2012 IBM Corporation
  104. 104. Sending The Embedded Experience Email■ 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 104 | © 2012 IBM Corporation
  105. 105. Script_Snippet_15 Sending The Embedded Experience Email ■ Paste Script_Snippet_15 after we add the subject item to the mail document. 105 | © 2012 IBM Corporation
  106. 106. 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() 106 | © 2012 IBM Corporation
  107. 107. Snippet 15 (continued)Set mime = topMime.Createchildentity()Set stream = session.Createstream()Call stream.Writetext("<b>" + strContent + "</b>")Call mime.Setcontentfromtext(stream, "text/html", 1728)Call stream.Close()Set mime = topMime.Createchildentity()Set stream = session.Createstream()Dim dbUrl As StringdbUrl = session.HttpurldbUrl = Replace(dbUrl, "?OpenServer", "/" + db.Filepath)Dim where As Variantwhere = contentDoc.Getitemvalue("DetailsTabWhere")Dim strWhere As StringstrWhere = where(0)Dim when As Variantwhen = contentDoc.Getitemvalue("DetailsTabWhen")Dim strWhen As StringstrWhen = when(0)Dim address As Variantaddress = contentDoc.Getitemvalue("DetailsTabAddress")Dim strAddress As StringstrAddress = address(0) 107 | © 2012 IBM Corporation
  108. 108. Snippet15 (continued)Dim gadgetUrl As StringgadgetUrl = dbUrl + "/ConfirmationEE.xml"Dim siteName As VariantsiteName = settingsDoc.Getitemvalue("SiteName")Dim strSiteName As StringstrSiteName = siteName(0)Dim dataModel As StringdataModel = |{"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() 108 | © 2012 IBM Corporation
  109. 109. Sending The Embedded Experience Email■ 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 109 | © 2012 IBM Corporation
  110. 110. Sending The Embedded Experience Email■ Here we add two MIME parts to the MIME email■ These will be used for mail client which dont support embedded experiences■ All embedded experience emails must have a text/html MIME part, but a text/plain MIME part is optionalNote: 1728 is the constant for 7Bit encoding 110 | © 2012 IBM Corporation
  111. 111. Sending The Embedded Experience Email■ 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 emailNote: 1728 is the constant for 7Bit encoding 111 | © 2012 IBM Corporation
  112. 112. 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 112 | © 2012 IBM Corporation
  113. 113. 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 113 | © 2012 IBM Corporation
  114. 114. Creating A Widget For Our Embedded Experience■ Open Lotus Notes Social Edition■ Select the toolbar icon to open the widget wizard■ Select “OpenSocial Gadget” in the wizard■ Click “Next” 114 | © 2012 IBM Corporation
  115. 115. Creating A Widget For Our Embedded Experience■ Select “Add OpenSocial Gadget by URL”■ Enter the URL to the gadget 115 | © 2012 IBM Corporation
  116. 116. Creating A Widget For Our Embedded Experience■ 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” 116 | © 2012 IBM Corporation
  117. 117. Creating A Widget For Our Embedded Experience■ Select “Just configure a widget for now”■ Select “Finish” 117 | © 2012 IBM Corporation
  118. 118. Creating A Widget For Our Embedded Experience■ Publish the widget to the widget catalog by right clicking the widget in the My Widgets sidebar and selecting “Publish to Calatog” 118 | © 2012 IBM Corporation
  119. 119. Creating A Widget For Our Embedded Experience■ In the Attachment section of the widget document select “Review”■ Review the security information in the Security section■ Select “Approve” 119 | © 2012 IBM Corporation
  120. 120. Creating A Widget For Our Embedded Experience■ Remove the untrusted widget from the sidebar by right-clicking and selecting “Remove” 120 | © 2012 IBM Corporation
  121. 121. Creating A Widget For Our Embedded Experience 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 121 | © 2012 IBM Corporation
  122. 122. Creating A Widget For Our Embedded Experience■ Drag the widget from the catalog to the My Widgets sidebar 122 | © 2012 IBM Corporation
  123. 123. 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 123 | © 2012 IBM Corporation
  124. 124. Register For The Event■ Now that the app is sending the embedded experience email and we have the widget installed, lets register for the event and test the embedded experience■ Go to the Event Signup XPage■ Click the “Registration” tab 124 | © 2012 IBM Corporation
  125. 125. Register For The Event■ Fill out the form■ Click the “Register” button 125 | © 2012 IBM Corporation
  126. 126. Register For The Event■ The user should see the confirmation message once the registration is complete 126 | © 2012 IBM Corporation
  127. 127. Register For The Event■ Open Lotus Notes and open the users mail file■ Double click the confirmation email to open it 127 | © 2012 IBM Corporation
  128. 128. Register For The Event 128 | © 2012 IBM Corporation
  129. 129. 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 129 | © 2012 IBM Corporation
  130. 130. 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 130 | © 2012 IBM Corporation
  131. 131. Leveraging The Power Of OpenSocial■ Gadgets rendering in Lotus Notes and Domino Social Edition can utilize existing Social Data from many sources 131 | © 2012 IBM Corporation
  132. 132. Leveraging The Power Of OpenSocial■ 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 132 | © 2012 IBM Corporation
  133. 133. 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 133 | © 2012 IBM Corporation
  134. 134. Publishing To The Activity Stream■ 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...” 134 | © 2012 IBM Corporation
  135. 135. Publishing To The Activity Stream■ In the New File dialog give the file the name ActivityStreamEE.xml■ Click “OK” 135 | © 2012 IBM Corporation
  136. 136. Script_Snippet_16 Publishing To The Activity Stream■ 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 136 | © 2012 IBM Corporation
  137. 137. Publishing To The Activity Stream■ In the Applications view, expand Resources → Files■ Open ConfirmationEE.xml 137 | © 2012 IBM Corporation
  138. 138. Script_Snippet_17 Publishing To The Activity Stream ■ Paste Script_Snippet_17 after the message text details section 138 | © 2012 IBM Corporation
  139. 139. Snippet 17 <div class="detailsSection"> <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> 139 | © 2012 IBM Corporation
  140. 140. Script_Snippet_18 Publishing To The Activity Stream ■ 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 140 | © 2012 IBM Corporation
  141. 141. Snippet 18 .buttonHolderLeft { text-align: left; } 141 | © 2012 IBM Corporation
  142. 142. Publishing To The Activity Stream■ 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 142 | © 2012 IBM Corporation
  143. 143. Script_Snippet_19 Publishing To The Activity Stream ■ Open gadget.js ■ Paste Script_Snippet_19 in the onLoad function in gadget.js 143 | © 2012 IBM Corporation
  144. 144. 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); }); 144 | © 2012 IBM Corporation
  145. 145. Publishing To The Activity Stream■ 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 145 | © 2012 IBM Corporation
  146. 146. Script_Snippet_20 Publishing To The Activity Stream ■ Paste Script_Snippet_20 after the addDetails function 146 | © 2012 IBM Corporation
  147. 147. 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 viewers 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; }}; 147 | © 2012 IBM Corporation
  148. 148. Snippet 20 (continued)/** * 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 viewers 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
  149. 149. Publishing To The Activity Stream■ osapi.activitystreams ─ APIs for do basic CRUD operations on the containers 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 149 | © 2012 IBM Corporation
  150. 150. Publishing To The Activity Stream■ 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 150 | © 2012 IBM Corporation
  151. 151. Publishing To The Activity Stream■ 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 151 | © 2012 IBM Corporation
  152. 152. Publishing To The Activity Stream■ 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 152 | © 2012 IBM Corporation
  153. 153. 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 153 | © 2012 IBM Corporation
  154. 154. 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 154 | © 2012 IBM Corporation
  155. 155. Recommending Network Contacts 155 | © 2012 IBM Corporation
  156. 156. Recommending Network Contacts■ 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 156 | © 2012 IBM Corporation
  157. 157. Recommending Network Contacts■ In the “New Custom Control” dialog give the dialog the name “content_Registration”■ Click “OK” 157 | © 2012 IBM Corporation
  158. 158. Script_Snippet_21 Recommending Network Contacts ■ 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 158 | © 2012 IBM Corporation
  159. 159. Recommending Network Contacts■ In the Applications view right click on “XPages” and select “New XPage...” 159 | © 2012 IBM Corporation
  160. 160. Recommending Network Contacts■ In the “New XPage” dialog give the XPage the name “StandaloneRegistration”■ Click “OK” 160 | © 2012 IBM Corporation
  161. 161. Script_Snippet_22 Recommending Network Contacts ■ Select the “Source” tab in the new XPage and paste Script_Snippet_22 161 | © 2012 IBM Corporation
  162. 162. Recommending Network Contacts■ Open the “Controls” View ─ Window → Show Eclipse Views → Controls■ There should now be a content_Registration control listed under “Custom Controls” 162 | © 2012 IBM Corporation
  163. 163. Recommending Network Contacts■ Drag and drop the content_registration control into the StandaloneRegistration XPage■ It should go inside the div with the id “content” 163 | © 2012 IBM Corporation
  164. 164. Recommending Network Contacts■ In a browser navigate to http://<yourServer>/signup.nsf/StandaloneRegistration.xsp■ You will see the same registration page but without the tabbed UI 164 | © 2012 IBM Corporation
  165. 165. Recommending Network Contacts■ Open Lotus Domino Designer■ In the Applications view, expand Resources → Files■ Open ConfirmationEE.xml 165 | © 2012 IBM Corporation
  166. 166. Script_Snippet_23 Recommending Network Contacts ■ Paste Script_Snippet_23 after the “Share” details section but before the “When” details section ■ This code adds container UI for people in the users network ■ HTML will be dynamically injected via JavaScript to display the contacts 166 | © 2012 IBM Corporation
  167. 167. Snippet 23 <div class="detailsSection"> <div> <span class="detailsLabel">Suggest Other People Who May Be Interested In This Event</span> </div> <div id="peopleContainer"> </div> </div> 167 | © 2012 IBM Corporation
  168. 168. Script_Snippet_24 Recommending Network Contacts ■ Paste Script_Snippet_24 at the end of the style tag ■ This CSS adds some style for the network contacts UI in the gadget 168 | © 2012 IBM Corporation
  169. 169. 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; } 169 | © 2012 IBM Corporation
  170. 170. Recommending Network Contacts■ In the Applications view, expand Code → Script Libraries and open gadget.js 170 | © 2012 IBM Corporation
  171. 171. Script_Snippet_25 & Script_Snippet_26 Recommending Network Contacts ■ Paste Script_Snippet_25 & Script_Snippet_26 here ■ Snippet 25 add another request to get the viewers friends (network contacts) ■ Snippet 26 calls a function to add the users network contacts to the UI 171 | © 2012 IBM Corporation
  172. 172. Snippet 25 batch.add(friends, osapi.people.getViewerFriends({sortBy:name,fields:fields}));Snippet 26 addPeopleData(eeContext, result); 172 | © 2012 IBM Corporation
  173. 173. Script_Snippet_27 Recommending Network Contacts ■ Paste Script_Snippet_27 after the addDetails function in gadget.js 173 | © 2012 IBM Corporation
  174. 174. 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 viewers 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; 174 | © 2012 IBM Corporation e.currentTarget.innerHTML = Email Sent To + name;
  175. 175. Snippet 27 (continued)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
  176. 176. Snippet 27 (continued)"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> + 176 | © 2012 IBM Corporation
  177. 177. Snippet 27 (continued)</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;}; 177 | © 2012 IBM Corporation
  178. 178. Recommending Network Contacts■ result.friends contains a list of contacts in the users 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 178 | © 2012 IBM Corporation
  179. 179. Recommending Network Contacts■ 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 179 | © 2012 IBM Corporation
  180. 180. Recommending Network Contacts■ Go back to the confirmation email in the users Inbox in Lotus Notes ─ You should now see a list of people in that users network being displayed 180 | © 2012 IBM Corporation
  181. 181. Recommending Network Contacts■ Selecting a network contact will cause the app to send an email to them asking them to register 181 | © 2012 IBM Corporation
  182. 182. Recommending Network Contacts■ The suggested contact will get an email in their Inbox ─ In this screen shot we are showing a user using Lotus iNotes Social Edition 182 | © 2012 IBM Corporation
  183. 183. Recommending Network Contacts■ 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 183 | © 2012 IBM Corporation
  184. 184. Recommending Network Contacts■ The user can now register right from their email 184 | © 2012 IBM Corporation
  185. 185. 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! 185 | © 2012 IBM Corporation
  186. 186. Go Ahead. Ask Us Anything! Q&A 186 | © 2012 IBM Corporation
  187. 187. 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 Baxters Blog - http://ryanjbaxter.com 187 | © 2012 IBM Corporation
  188. 188. 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. 188 | © 2012 IBM Corporation
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×