Do Try This at Home! Extend IBM Connections using IBM Worklight

SHOW302: Do Try This at Home!
Extend IBM Connections using
IBM Worklight
Handly Cameron, Prolifics
Smriti Kapuria, Prolifics

© 2014 IBM Corporation

Who We Are
 Handly Cameron
– Enterprise Architect, Prolifics Software Group
– Agile, Developer, Architect, Photographer, IBM Champion
– Master of Madness, Herder of Chaos Monkeys (i.e. father of 3)
– @handly, handly.org
– hcameron@prolifics.com
 Smriti Kapuria
– Technology Manager, Prolifics User Experience Practice
– UX designer, Developer, Architect, Really Cool Ceramicist
– skapuria@prolifics.com

2

No products were harmed in the making of this session
Products and resources used in this presentation:
 IBM Worklight® and IBM Worklight Studio®

 Eclipse™

 IBM Connections®

 Apache Tomcat™

 IBM Social Business Toolkit®
 IBM Greenhouse®
 IBM Mobile Test Workbench®

 IBM WebSphere® and IBM WebSphere Liberty Server®
 IBM Cast Iron®
… now you won‟t have to see tons of ® and ™!

3

Are You Ready?
YES!
You don‟t need to know Connections or Worklight to be here.

Slides and code downloads for this session can be found at: http://handly.org/show302
The Additional Resources at the end of this presentation has links to some great learning
materials to learn more about Connections and Worklight architecture, mobile development,
and related topics.

4

Agenda
After this session, you will be able to:
 Discuss real world uses of extending IBM Connections to mobile apps
 Know the standard components of IBM Connections and IBM Worklight

 Understand when to use Connections REST APIs, OpenSocial APIs, and the IBM Social
Business Toolkit
 Install your own IBM Worklight Studio development environment
 Build an IBM Worklight mobile application integrated with Connections APIs

5

Mobile Project Coordination
A Real World Example

6

Business Case
Business Need
 The Design Services department is using Activities in IBM Connections to track
Job Requests and Workflow Management.

 New requests are added to an Activity and then assigned to a person on the team
to work on.
 Team managers want to be able to quickly view and assign incoming design
requests from their mobile device.
Solution:
An IBM Worklight application and mobile web app proof of concept was developed
to provide request management through integration with IBM Connections.

7

Project Calendar
The application opens to a calendar view that
provides several options for navigating the calendar,
and highlights days with project due dates.

Technical Design
 A Worklight Adapter provides integration with the
Connections REST APIs.

 Authentication via a server identity for the PoC
 UI is JQuery within the Worklight app shell

8

Project Details
Clicking on a date in the calendar shows
a list of designers assigned to the project
due on that day.

9

Incoming Requests
Clicking on Incoming Requests on the
main page displays the list of requests
that need to be reviewed and assigned.

10

Request Details
Selecting a project request provides a
detailed description with options to
review attached files and accept or reject
the request.

11

Accept Request form
Accepting a project allows the user to
assign designers, click through to see
detailed availability, assign deadlines,
and save the changes to Connections.

12

Orientation
IBM Worklight and IBM Connections

13

The Worklight Studio IDE
Orientation

15

IBM Connections
Orientation
Profiles

Home page

Find the people you need

See what's happening across your social network

Communities

Social Analytics

Work with people who share common
roles and expertise

Discover who and what you don‟t know via
recommendations

Files

Micro-blogging

Post, share, and discover documents,
presentations, images, and more

Reach out for help or share news with
your social network

Wikis

Bookmarks

Create web content together

Save, share, and discover bookmarks

Activities

Blogs

Organize your work and tap your professional
network

Present your own ideas, and learn from others

Forums
Exchange ideas with, and benefit from
the expertise of others
16

Mobile
Access Connections anywhere, anytime
with mobile & tablet access

IBM Connections Mobile Application
Orientation
IBM supplies a very nice mobile application
for Apple, Android, and Blackberry devices
Advantages

 Access all of the core social features of
Connections
 Secure access for your users
 Extendable with links and add-ons
… so why would you want custom mobile
apps integrated with Connections?

17

Use Cases for building / integrating with your own app
Orientation
Enhance your app

Standalone App Ideas

Connections has many features that could
add value into your app.

The full IBM Connections app is great, but
sometimes you want to focus quickly…

 Display profile images and information

 Person Finder

 Update Connections status and activities
 Leverage the Connections social graph
to link people within your app
 Reference and update files
 Other task specific „micro-apps‟

18

 Feed monitor
 To Do – Quickly reference and manage
your Connections action list
 Calendar integration – view and connect
with people in your meetings and calls
 Ideation – quick voting, submit new
ideas, dashboards

Integration Options
Orientation
There are multiple APIs and options for extending IBM Connections at an application level.

 IBM Connections Mobile App

 IBM Connections REST API
 IBM Connections OpenSocial API
 IBM Social Business Toolkit SDK

19

IBM Connections REST APIs
Orientation
Features
 Access and update Connections applications including Activities, Blogs, Bookmarks,
Communities, Files, Forums, Profiles, Wikis, Home Page, and Search

 Uses Atom feeds to return data in a common XML format
 Supports basic, form, and Oauth authentication
Examples
Activities: https://activities.enterprise.example.com/activities/service/atom2/completed
Blogs: http://blogs.enterprise.example.com/blogs/writer/feed/comments/atom
Bookmarks: https://dogear.enterprise.example.com:9443/dogear/atom/popular
Communities: http://communities.enterprise.example.com:9080/communities/service/atom/communities/my
Home page: https://home.enterprise.example.com:9443/forums/atom/mysearch/results? query="blue"
Profiles: https://profiles.enterprise.example.com:9443/profiles/atom/reportingChain.do?userid=7fb4abl0-8f0a-1028-8b5a-db08933b51b2

20

IBM OpenSocial APIs
Orientation
Implementation of the OpenSocial Activity Stream, Microblogging, and People APIs.
Features
 Open standard API calls, based off current user stream

 Returns JSON (JavaScript Object Notation) data
 Supports basic and Oauth authentication
Examples
Activities: https://activities.enterprise.example.com/activitystreams/@me/@all/activities
Blogs: http://blogs.enterprise.example.com/activitystreams/@me/@all/blogs
Bookmarks: https://dogear.enterprise.example.com:9443/activitystreams/@me/@all/bookmarks
Communities: http://communities.enterprise.example.com:9080/activitystreams/@me/@all/@communities
Status Updates: https://home.enterprise.example.com:9443/activitystreams/@me/@all/@status
Profiles: https://profiles.enterprise.example.com:9443/activitystreams/@me/@all/@people

21

IBM OpenSocial Example With Greenhouse
Orientation
https://greenhouse.lotus.com/connections/opensocial/rest/activitystreams/@me/@all/activities

22

IBM Social Business Toolkit
Orientation
 Makes the APIs much easier!
 Single source for developing integrations
and leveraging IBM SmartCloud for Social
Business and IBM Connections.
 Provides a set of extensible tools and
resources for developers who want to
incorporate social capabilities into their
applications and business processes.
Get it here:
http://www.ibm.com/cloud-computing/social/us/en/toolkit or
https://www.ibmdw.net/social
… click Docs to find the Download the SDK link.

23

IBM Social Business Toolkit – Let’s go to the Playground!
Orientation
 The SBT Playground is a web-based
live demonstration of the JavaScript
and Java APIs that are exposed by
the SDK. The Playground contains a
large set of code snippets and
examples that you can customize and
use in your own applications.
 Connect to Greenhouse, Smartcloud,
or a custom Domino or Connections
environment.
 You can also install a local playground
 Go to http://bit.ly/sbtplayground

24

IBM Social Business Toolkit – Play Time!

25

IBM Social Business Toolkit
Orientation
Sweet – a JavaScript API? I‟ll just plug that into my hybrid app!
Not so fast …
 The SBT SDK has a JavaScript API, but the core is still Java
classes, intended to run on a server such as Tomcat or IBM
WebSphere. (and many phones don‟t even have Java)

It is a good thing you just learned about this cool IBM Worklight
server, which happens to run on WebSphere and provides server
adapters to integrate with mobile applications!

26

Let’s Get Started
Building your own toolkit

27

Install Worklight Studio – For Free!
Getting Started
Worklight Studio is a free license from IBM!
Similar to IBM Domino Designer, you get the
full development tool to build and test apps,
but will need a license for production.
Three easy steps:
1. Go to eclipse.org and download the
latest Eclipse IDE for Java EE Developers

2. Load Eclipse and open
Help – Eclipse Marketplace…

28

Install Worklight Studio – For Free!
Getting Started
Three easy steps, continued:
3. Search for “Worklight” and install the
IBM Worklight Developer Edition V6.1

Tips:
 When installing a new version of Worklight
Studio, use a new copy of Eclipse in a new
directory.
 You can also install from your IBM Passport
Advantage site.
 The IBM Mobile Test Workbench is also free!
29

Get an IBM Greenhouse account
Getting Started
Go to https://greenhouse.lotus.com to sign up.

IBM Greenhouse:

 Provides demos of IBM collaboration
software. Go exploring!
 Includes a full IBM Connections environment
 Is a demo site, not production. Expect
frequent maintenance windows and do not
store sensitive information there.

30

First Steps/Project Setup
Setting up your project in Worklight

31

Let’s build an app!
Our example will have these features:
 Display your current activity stream from Connections.
 Display information from your Connections profile.

 Let you to update your status on in Connections

We will use:
 Worklight Studio application development
 Dojo Mobile
 IBM Connections REST API
 IBM Social Business Toolkit

32

Create a new project in Worklight Studio
1.

33

Click on the Worklight icon
and select Worklight Project.

2.

Enter a project name and click Next.

3.

34

Enter an Application name and click
Configure JavaScript Libraries

4.

Select Add Dojo Toolkit

5.

Click Finish on the JavaScript Libraries dialog.

6.

Click Finish on the New Worklight Project dialog.

7.

Wait a minute or so while Worklight builds your
new project.

Tips:
 Worklight 6.1 includes Dojo Mobile 1.9 libraries.
 Worklight can optimize which Dojo libraries are
included in your application.

 You can also choose to include JQuery Mobile or
Sench Touch libraries that you have downloaded.
35

Worklight Project Structure
The Worklight Project wizard will have created a new
project structure for you.

Key Areas:
index.html – This is the core page for your app, acting
as the UI and the single page structure used by
Worklight apps.
js folder – Contains client-side Javascript that controls
the app UI, calls to Worklight adapters, and
adapters folder – Contains server-side code to
coordinate authentication and to send and receive data
with back end systems.

36

Worklight Rich Page Editor
The center of the Worklight IDE will be
displaying the Rich Page Editor with the
default index.html opened.
Tips:
 Change the orientation, device type, and
zoom level. For this session, we will change
to iPhone 5s for the device type.
 In split mode, click in the Design pane to
select UI elements and place the cursor in
the Source pane in the appropriate code.
 When selecting elements in the Design
pane, popup controls will help with adding
new list items or linking navigation.

 Many developers use the Source tab at the
bottom for faster coding.
37

Worklight Components Palette
When the Rich Page Editor is open, the Palette view on the right of
the IDE provides drawers of HTML, DOJO, and other components that
can be dragged into your design.

Tips:
 Like the mobile navigation wizard, dragging a component in from
the Palette will automatically add the needed Dojo (or JQuery) code
into your project JavaScript initialization sections.

 Components can be dragged from the Palette to either the Design
or Source panes.
 Worklight provides property completion and other support for Dojo
components. Detailed documentation can be found at
http://dojotoolkit.org/reference-guide

38

Adding a mobile view
1.

Find the Mobile Navigation tab in the lower left of
the Eclipse workbench and click the
icon to add
a new mobile view.

2.

Select Dojo Mobile View from the popup menu:

39

Select a Worklight Mobile View Pattern
Worklight provides UI patterns to speed development
by providing views common to many mobile apps.

3.

Scroll down to third row and select Rich List

4.

Click Next >

Tips:

 Change the orientation, device type, and zoom level
to see how the pattern looks with different styles.
 For complex projects, create views as external page
fragments (html files) for easier code coordination.
 The UI Pattern wizard can be used to create your
own application view patterns for quick reuse.

40

Name your view
5.

Enter a descriptive View Id, such as “mainView”

6.

Select Set as default

7.

Click Finish to insert the view code into your
index.html file.

41

Home Page
The center of the Worklight IDE will be
displaying in the Rich Page Editor.

42

Add a Header
1.

Find Heading in the Dojo Mobile Widgets
Palette.

2.

Drag the Heading over to the Rich Text
Editor and drop at the top of your lists.

3.

Double click on the Heading and type in a
name for your heading.

43

Rename the list items
1.

Double-click each of the Item labels and
the Item descriptions and type in names
for each function.

2.

We won‟t use Item 4 or 5, so you can click
on each list item and hit Delete.

3.

Save index.html
(It is always a good idea to save often!)

44

Add a detail view
This time, we add an empty view to the app so we can
add components that are not in a provided template.
1.

Click the

2.

Select Dojo Mobile View from the popup menu:

3.

Select Create empty view

4.

Click Next >

45

icon again to add a new mobile view.

Add a detail view
5.

Enter “activityStreamView” as the View Id.

6.

Click Select… next to the Linked From field.

46

Add a detail view
7.

Select ListItem “Activity Stream”

8.

Click OK.

47

Add a detail view
9.

48

Click Finish

Add a detail view
Your view will be created and display
in the Rich Page Editor.
Don‟t worry! – it is supposed to be
blank because you have not added
any components.

49

Set up the Activity Stream detail view
1.

Add a Heading as before from the Dojo
Mobile Widgets Palette, name it “Activity
Stream”.

2.

Select the Heading and click on the
Properties pane on the lower right.

3.

Select the Dojo tab.

4.

Enter Back for the button label.

5.

Select mainView for the “Move to” value.

50

Set up the Activity Stream detail view
6.

Find EdgetoEdgeList in the Pallete.

7.

Drag an EdgetoEdgeList to your view
below the Header.

51

Activity Stream view
In the source view, you will see the HTML code for your new view.
<div data-dojo-type="dojox.mobile.View" id="activityStreamView">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Activity Stream',back:'Back',moveTo:'mainView'"></div>

<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Item'"></div>
</div>
</div>

The Items for the Activity Stream will be dynamically added, so we
will leave the view as-is for now.

52

Set up the Profile detail view
This time, we are going to add a view manually.
1.

Find the activityStreamView in the Source
view and add an extra line after the last
</div>.

2.

Find a ScrollableView in the Dojo Mobile
Widgets Palette.

3.

Drag the ScrollableView component to the
blank line under the activityStreamView.

53

4.

Enter “profileView” for the Id

5.

Select Include heading

6.

Enter the following Details:
Label:
Profile
Back button label: Back
Back button target: mainView

7.

54

Click Finish

Link navigation to the Profile detail
Now you need to link from the home page.
1.

Find the <div> in the Source view for the
Profile item in the mainView.

2.

Right click on dojox.mobile.ListItem and
choose ListItem – Link to Mobile View.

3.

Select profileView for the Inline mobile
view

4.

Click Finish

Note: This dialog also lets you link to view code
in an HTML fragment and modify the transition
animation used for the navigation.

55

Get back to the Profile detail view
After setting up the navigation from the
mainView, you will find that the Rich Page
Editor is not focused on your Profile page.
To regain focus, double-click on the
profileView in the Mobile Navigation pane on
the lower right of Worklight Studio.

56

1.

Add a table as follows in the profileView <div>.

2.

Include id attributes in the second column. You will use those to update the field with data.

57

Set up the Status Update detail view
Add the Status Update view manually.
1.

Under the profileView code you just
added, add an extra line after the last
</div>.

2.

Find a ScrollableView in the Dojo Mobile
Widgets Palette.

3.

Drag the ScrollableView component to the
blank line under the profileView.

58

Set up the Status Update detail view
4.

Enter “updateView” for the Id

5.

Select Include heading

6.

Label:
Update Status
Back button label: Back
Back button target: mainView

7.

59

Click Finish

Get back to the Update Status detail view
After setting up the navigation from the
mainView, you will find that the Rich Page
Editor is not focused on your Update Status
page.

To regain focus, double-click on the update
View in the Mobile Navigation pane on the
lower right of Worklight Studio.

60

Set up the Update Status detail view
1.

Double-click under the Update Status
Heading and enter the following text:
What are you working on?

2.

Find this text in the Source view and add a
<br/> tag after it.

3.

Find ExpandingTextArea in the Pallete.

4.

Drag an ExpandingTextArea to your view
after the <br/> tag.

61

1.

Add id="status" style="width:95%” to the textarea tag that was added.

Note: It is important that you drag the component onto your application from the Palette as you
did in the last step. Worklight Studio automatically updates the JavaScript statements to include
the correct components. If you add a component to your page by just entering code, you will
need to update the requires statement in main.js manually. This only needs to be done once for
each component type.
2.

Find Button in the Dojo Mobile Widgets Pallete and drag it under the textarea.

3.

Name the button “Post”

4.

Add onClick="updateStatus(document.getElementById('status').value)” to the button tag.

62

1.

Find Button in the Dojo Mobile Widgets Pallete
and drag it after the textarea.

2.

Name the button “Post”

3.

Add
onClick="updateStatus(document.getElement
ById('status').value)” to the button tag.

63

Link navigation to the Status Update detail
Now you need to link from the home page. Just update the code directly this time.

1.

Find the <div> in the Source view for the Status Update item in the mainView.

2.

Change the # in the moveTo property to “updateView”

64

Running the application
Before you start building the back end integration, let‟s verify that the application is running so far.
1.

Add a table as follows in the profileView <div>.

2.

Include id attributes in the second column. You will use those to update the field with data.

65

Deploying the application
Before you start building the back end
integration, let‟s verify that the application is
running properly on the development server
included in Worklight Studio.

1.

Right-click on the application folder under
the apps directory in your project.

2.

Select Run As – Run on Worklight
Development Server.

66

Server deployment
Worklight Studio will build your application and deploy it to the
embedded Worklight server.
Once the server is done, you will see a server log similar to the
following in the Console view.:

67

Launching the Worklight Console
1.

Right-click on your project and select Open
Worklight Console.

2.

The Worklight Console will be displayed in
the browser defined in your Eclipse settings.

68

Preview the Application
You can now click around the application to verify that navigation to and from each screen and your layouts
are working properly.

69

Worklight Server Adapters
Setting up your project in Worklight

70

Back End Integration
Worklight Adapters:
 Defined using simple XML syntax, and easily
configured with a JavaScript API. Data is converted
to JSON for all adapter types.
 HTTP, SQL, JMS, Cast Iron, Node.js adapter types

Query

 Provides authentication, including single sign on and
offline access control

Alternative: Conventional XHR requests
 Direct REST calls in the mobile browser framework
 Useful for independent client apps and third party
services, but limits the enterprise benefits above
71

Update data

3

2

 A single point of access to back end systems; can
aggregate data from several sources
 Logging, auditing, and analytics

Response

SQL

Node
JMS

SOA
P
CAST IRON

REST

Worklight

1

Invoke
adapter
procedure

Data/Result
as JSON

4

Worklight Adapter Call Sequence

72

Create a new Worklight Adapter in Worklight Studio
1.

73

Click on the Worklight icon and select
Worklight Adapter.

2.

Select your Project Name and select an Adapter
type of HTTP Adapter.

3.

74

Enter an Adapter name and click
Finish

Worklight Adapter configuration
Worklight Studio will create the adapter
and open up the related XML file.
This file is used to configure
connectivity to the back end application
and to declare the procedures exposed
to applications and other adapters.

75

4.

Click on Connection Policy

5.

Protocol: https
Domain: greenhouse.lotus.com
(or to your Connections server)

Port:
6.

76

443

Click Add…

7.

Select Authentication

8.

Click OK.

77

9.

Enter your User name and
Password for the Connections
environment.

10. Click Add…

Notes:
 The “1 error detected” message is
expected. We will fix that on the
next slide.
 We are using a single user account
for this session. In production, you
normally would use End User
authentication.

78

11. Select Basic
12. Click OK.

79

13. Select
Adapter “ConnectionsAPI”
on the left.
14. Click Add…

80

15. Select Procedure
16. Click OK.

81

17. Enter “getActivityStream” for the
Name of your procedure.
18. Save and close the
ConnectionsAPI.xml file.

Notes:
 The Connect as setting is used to
switch to end user authentication.

82

19. Open the ConnectionsAPI-impl.js JavaScript file.
All code and a complete
Eclipse project for this
session are available at
http://handly.org/show302

20. At the bottom of the file, add this procedure:
function getActivityStream(){

var input = {
method : 'get’,
returnedContentType : 'xml’,
path: '/connections/opensocial/basic/rest/activitystreams/@me/@all/@status?rollup=true&format=atom’
};
return WL.Server.invokeHttp(input);
}

21. Save the file.

83

Wait a minute!
Where did you get that crazy long OpenSocial URL??
Two choices:
1.

Read about the Open Social API in the IBM Connections InfoCenter, and try a bunch of different options,
or …

2.

Cheat and look at the bottom of your Connections page!

The link under that “Feed for these entries” is:
https://greenhouse.lotus.com/connections/opensocial/basic/rest/activitystreams/@me/@all/@
status?rollup=true&format=atom

Look familiar?

84

Deploying your Worklight Adapter
1.

Right-click on the ConnectionsAPI folder and
select Run As – Deploy Worklight Adapter.

2.

Wait a few seconds until “Adapter build and deploy finished”
appears in the Console view.

85

Testing your Worklight Adapter
1.

select Run As – Invoke Worklight Adapter.

2.

Select the Procedure name getActivityStream

3.

Click Run

86

Testing your Worklight Adapter – View Results
Worklight displays the JSON results from your
adapter in the default Eclipse browser.
Notes:
 Worklight automatically converts the XML
returned into JSON, which is easier to parse
using JavaScript in your application.
 Watch the Console view in Worklight Studio
to see any error messages or output logging
you included in your adapter.
 You can use an external browser by
changing the settings in the Eclipse
preferences.
 Use a browser plug-in, such as JSONView
for Chrome, to see the results formatted for
easier reading.
87

TIP: Using Worklight server logging
How to turn on server log output in your Worklight Studio:
1.

In Project Explorer, expand the Worklight Development
Server and open server.xml

2.

Change the Console log level to INFO and save
server.xml

3.

The server will detect
the change and
automatically update the
the log level.

Usage:
In your JavaScript adapter,
use this logging code:
WL.Logger.info(“text”);
88

Let’s build some JavaScript
1.

Open the core JavaScript file for your app:
appsShow302Democommonjsmain.js

main.js is called at the bottom of the index.html file and
includes the code to initialize the Worklight and Dojo
frameworks.
For the examples in this session, we are going to put
the code to call adapters and write the results to the
application pages inside the init procedures.
In a production or more complex application, you
should use dojo/app or a similar MVC framework or
pattern to trigger adapter calls as needed during page
transitions and other events.

89

Calling the Worklight Adapter
2.

90

Update the ready(function () { section to include the following invokeProcedure function call:

Handling the Adapter Response
2.

91

Add the following function to the bottom of main.js:

Testing your app
At this point, you should have a fully working Activity Stream!
Cool tip: In Worklight Studio 6.x, you no longer have to re-build
the app to see changes to HTML or client side JavaScript code.
(Server adapters still need to be re-deployed after a change)

1.

Refresh your browser window where you were previewing
the application.

2.

Click the Activity Stream choice.

3.

You should see your Connections Activity Stream in the
app!

92

Adding the IBM Social Business Toolkit to your app
Weren‟t we going to the playground?

The SDK download includes everything you need
to get started, including docs, distribution files,
samples with source code, and a Tomcat server.

1.

Go to http://ibmsbt.openntf.org and download
the SDK.

2.

Expand the SDK .zip file into a directory.

93

Copy the SBT JAR files to Worklight Studio
The SDK download includes everything you need
to get started, including docs, distribution files,
samples with source code, and a Tomcat server.

1.

Copy the files from the SBTSDKredistjar
directory to the server/lib directory in your
application project in Worklight Studio.

2.

You will see the server console update as
Worklight Studio detects the new file and
automatically deploys them to the embedded
development server.

94

What you won’t do…
A few of the first steps in the SBT deployment documentation are to edit the
sbt.properties and managed-beans.xml configuration files.
Unfortunately, the embedded WebSphere Liberty profile server in Worklight Studio
does not include the new managed beans feature that was recently added to the
Liberty profile in WebSphere 8.5.5.
Oops.

No worries – we have a solution!
 We can call Java classes from our Worklight Server Adapters to manually create
a Connections endpoint, authenticate with the Connections server, and set up
the SBT services to support our needs.

95

Add the new procedures to your
adapter configuration.
1.

Open ConnectionsAPI.xml again.

2.

Select
Adapter “ConnectionsAPI”
on the left.

3.

Click Add…

4.

Add a getProfileName procedure.

5.

Click Add…

6.

Add a updateStatus procedure.

7.

Save the file.

96

1.

97

Open the ConnectionsAPI-impl.js JavaScript file.

2.

98

Add the getProfileName function (change the user/password to match your account):

Deploying your Worklight Adapter (again)
1.


2.


99

1.


2.

Select the Procedure name getProfileName

3.

Click Run

100


Notes:
 IBM Greenhouse will let you set a telephone
number, but clears the value fairly quickly
for privacy purposes. For testing, you may
need to set the value just before running
your adapter or application.

101

Add the getProfileName call to main.js
1.

102


2.

103

Update the ready(function () { section to include the following invokeProcedure function call, just
after the previous invokeProcedure call you created:

Testing the Profile page
At this point, you should have a fully working Profile page!

1.

the application.

2.

Click the Profile choice.

3.

You should see your Profile in the app!

104

Now, let’s update some data in Connections!
1.

105

Open the ConnectionsAPI-impl.js JavaScript file.

2.

106

Add the updateStatus function (change the user/password to match your account):

Deploying your Worklight Adapter (again)
1.


2.


107

1.


2.

Select the Procedure name updateStatus

3.

Enter a status message to post to your
Connections status.

4.

Consider that message carefully! We set SELF as
the privacy scope for our message, but do
understand that you are posting to a live system.

5.

Click Run

108

You can also see the result in Connections:

IMPORTANT:

 If you refresh this result page, it will trigger a
new call to the Worklight Adapter. That will
post a new update to Connections and
show you the results.

109

Add the updateStatus call to main.js
1.

110


2.

111

Add the updateStatus function to the bottom of main.js and save the file. This function is called
from the onclick event on the button on the Update Status page.

Testing the Status Update page
At this point, you can now update Connections.

1.

the application.

2.

Click the Status Update choice.

3.

Enter a status and click Post

4.

You will get a Success message if your update was posted.

112

Checking the result using our app
We can check the Connections status page to confirm the post,
but we now have another way.
1.

the application.

2.

Click the Activity Stream choice.

3.

Your test posts are displayed.

113

Now it’s your turn …

GO TRY THIS AT HOME!

114

Additional Resources
 Slides, code, and resources for this session
http://handly.org/show302

 DeveloperWorks (tutorials, articles, blogs, free Worklight Studio)
http://www.ibm.com/developerworks/mobile
http://www.ibm.com/developerworks/mobile/worklight
https://www.ibmdw.net/social

 IBM Worklight InfoCenter (a very good reference!)
http://pic.dhe.ibm.com/infocenter/wrklight/v6r1m0

 Ask and answer questions on Stack Overflow
http://stackoverflow.com/questions/tagged/ibmsbt
http://stackoverflow.com/questions/tagged/worklight

 Download the SDK
http://ibmsbt.openntf.org

 @handly, @ibmsbt on Twitter

116

Related Sessions
 CUST118 – MLB: Fostering a Collaborative
Approach to Conduct Baseball Business
Pete Murphy, Baseball Office of the Commissioner;
Smriti Kapuria, Prolifics
Wed 10:00 am, Swan Mockingbird 1 & 2

 JMP103 – Extending Your Application Arsenal
With OpenSocial
Yun Zhi Lin, IBM China Investment Company Limited; Ryan Baxter,
IBM
Sun, 26/Jan 08:00 AM - 10:00 AM, Dolphin S. Hem III

 BOF203 – Social Application Development
Mark Wallace, IBM
Mon, 27/Jan 06:15 PM - 07:15 PM, Swan Parrot 1

 KEY108 – IBM Collaboration Solutions
Application Development Strategy
Philippe Riand, IBM; Kramer Reeves, IBM; Mikael Orn, IBM
Tue, 28/Jan 11:15 AM - 12:15 PM, Dolphin N. Hem A-D

 AD101 – Extending IBM SmartCloud Applications
in 30 Minutes
Michael Blackstock, IBM
Tue, 28/Jan 01:30 PM - 02:30 PM, Dolphin S. Hem I

 AD301 – What's New on the IBM Social Business
 AD501 – IBM Worklight for IBM Domino
Toolkit Version 2.0
Developers
Mark Wallace, IBM
Mon, 27/Jan 02:15 PM - 03:15 PM, Dolphin S. Hem IV-V

Mat Newman, IBM
Tue, 28/Jan 04:15 PM - 05:15 PM Dolphin N. Hem A-C and
Wed, 29/Jan 03:00 PM - 04:00 PM Dolphin N. Hem E

 AD304 – The Power of Collaborating IBM Domino,
 AD206 – Build Apps Rapidly by Leveraging
IBM Connections and IBM Worklight
Services from IBM Collaboration Solutions
Jaya Nampalli, IBM; Leslie Hans, IBM
Mon, 27/Jan 03:45 PM - 04:45 PM, Swan Mockingbird 1 & 2

117

Henning Schmidt, hedersoft GmbH; Niklas Heidloff, IBM
Wed, 29/Jan 05:30 PM - 06:30 PM, Dolphin S. Hem III

 Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
 Then … Go try this at home!

118

Acknowledgements and Disclaimers
Availability. 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.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither
intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information
contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise
related to, this presentation or any other materials. Nothing contained in this presentation 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.
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. 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.

© Copyright IBM Corporation 2014. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 IBM, the IBM logo, ibm.com, IBM WebSphere, IBM Worklight, IBM Connections, IBM Social Business Toolkit, IBM Greenhouse, IBM Mobile Test Workbench, and IBM Cast Iron are
trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked
on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this
information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright
and trademark information” at www.ibm.com/legal/copytrade.shtml
 Eclipse is a trademark of the Eclipse Foundation, Inc.
 Apache Tomcat and Tomcat are trademarks of the Apache Software Foundation
 Other company, product, or service names may be trademarks or service marks of others.

119

Do Try This at Home! Extend IBM Connections using IBM Worklight

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to Do Try This at Home! Extend IBM Connections using IBM Worklight (20)

More from Prolifics (20)

Recently uploaded (20)

Do Try This at Home! Extend IBM Connections using IBM Worklight