Angular playground: applying an infinitescroll for Domino Access Services

Intro

Inspired by a serie of blogposts from Marky Roden and popularity in the web dev community I decided to step (once again) from the XPages path (a trend?) and feed my curiosity on AngularJS. An excellent stepping stone is the example database provided by Marky and the AngularJS Fundamentals In 60-ish Minutes presentation by Dan Wahlin.

Domino Access Services

The example database contains examples for CRUD operations via Domino Access Services (way to go!) but is limited in the display of documents from a list/view. The default number of documents returned for view/folder entries is set to 10. Not much of value for a real world application. So either I had to provide some sort of pagination or look for more smartphone/tablet common feature: infinite scroll.

The pagination examples I found only handled a one time loaded data-set and a proper application can contain thousands of records (I find it a common pattern that customers underestimate the number of documents that are being created in a Notes application). Angular can be extended with custom directives and ngInfiniteScroll is such a great example.

So what did I need to do to get this directive applied to the example database?

Implementation

index.html

First I installed the ng-infinite-scroll.min script in my database and updated the header section in index.html

<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>

<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet”/>
<link href=”css/custom.css” rel=”stylesheet”/>
<script data-require=”jquery@*” data-semver=”2.0.3″ src=”http://code.jquery.com/jquery-2.0.3.min.js”></script&gt;

<script type=’text/javascript’ src=”angularjs/angular.min.js”></script>
<script type=’text/javascript’ src=”angularjs/angular-route.js”></script>

<script type=’text/javascript’ src=”js/app.js”></script>
<script type=’text/javascript’ src=”js/controller.js”></script>

<script type=’text/javascript’ src=’js/ng-infinite-scroll.min.js’></script>
</head>

I also needed to include the complete jQuery library because Angular has jQuery lite built in which doesn’t have seem to have the features for dynamic height. You should also load the jQuery script before jQlite.

app.js

Next you need to register the infinitescroll directive for my angular application:

var personApp = angular.module(‘personApp’, [
'ngRoute',
'peopleControllers',
'infinite-scroll'
]);

factory

The examples for ngInfiniteScroll demonstrate a factory which is not used in the example database. From my limited knowledge on Angular I have understood that a factory is an injectable function.

personApp.factory(‘DAS’, function($http) {

var DAS = function() {
this.items = [];
this.busy = false;
this.after = 0;
this.count = 30;
this.order = ‘firstname';

};

DAS.prototype.nextPage = function() {
if (this.busy) return;
this.busy = true;
var url = ‘//dev1/apps/others/angular/ainx.nsf/api/data/collections/name/byFirstName5Col?open’ + ‘&count=’ + this.count + ‘&start=’ + this.after;

$http.get(url).success(function(data) {
var items = data;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = this.after + this.count;
this.busy = false;
}.bind(this));
};
return DAS;
});

My factory is called DAS (I guess I break here the naming convention). You can store your factories in a separate (new) file e.g. main.js.

Controller.js

I removed the existing PeopleListCtrl controller and replaced it with the following one:

personApp.controller(‘PeopleListCtrl’, function($scope, DAS) {
$scope.DAS = new DAS();
});

partial-list.html

With everything in place I now needed to update the display of the list, which is defined in a partial. Besides using the factory I also wanted to add some additional features such as search and sorting. This turned out to be really simple.

At the end I wanted to have something as followed:

Screenshot_3

 

Search & Sorting

For a search feature I added an input control and used the directive ngModel called query to apply a filtering via a search query

<div class=”row” >
<div class=”col-md-1″><label>Search:</label></div>
<div class=”col-md-2″>
<form class=”form-search”>
<input ng-model=”query” placeholder=”Search for person” autofocus class=”input-medium search-query”/>
</form>
</div>…

For a sorting feature I added a select control and bound that to the order property for the data via a custom directive. Further I added a radio-button group and used the directive ngModel called direction:

…<div class=”col-md-1″><label>Sorting:</label></div>
<div class=”col-md-1″>
<select ng-model=”DAS.order“>
<option value=”firstname”>First Name</option>
<option value=”lastname”>Last Name</option>
<option value=”zip”>ZIP</option>
</select>
</div>
<div class=”col-md-3″>
<label class=”formgroup”>
<input type=”radio” ng-model=”direction” name=”direction” checked> ascending
</label>
<label class=”formgroup”>
<input type=”radio” ng-model=”direction” name=”direction” value=”reverse”> descending
</label>
</div>
</div>

Note that the default sorting is set to ‘firstname’ in the factory.

Apply infinitescroll to the data-table

Finally we need to apply the nextPage function in the DAS function by wrapping the data-table with a div and add the infinite-scroll attribute to it.

<div infinite-scroll=”DAS.nextPage()” infinite-scroll-distance=”3″>
<table class=”table table-striped”>
<thead>
<tr>
<th>Position</th><th>First Name</th><th>Last Name</th><th>Zip</th><th></th><th></th>
</tr>
</thead>
<tbody>…

Then we use the ng-repeat directive and for each item or person in the data we display a new row. Here is also were we apply the filter and sorting options:

…<tr ng-repeat=”person in DAS.items | filter:query | orderBy:DAS.order:direction”>
<td>{{person["@position"]}}</td>
<td>{{person.firstname}}</td>
<td>{{person.lastname}}</td>
<td>{{person.zip}}</td>
<td><a class=”btn btn-info” href=”#/person/{{person['@unid']}}”>Edit</a></td>
<td><a class=”btn btn-warning” href=”#/person/{{person['@unid']}}/delete”>Delete</a></td>
</tr>

</tbody>
</table>
<div ng-show=’DAS.busy’>Loading data…</div>
</div>

Wrap up

That’s it! Every time you hit (almost) the bottom of the list 30 new rows will be added. The search only applies to the loaded data, not all the data that is the view but not loaded/displayed yet. That requires a different set up.

Some thoughts

Angular is an exciting new world for Domino and XPages developers. It offers lot out-of-the-box with directives and so on but XPages also does that (e.g. security, data-binding). In combination with Domino Access Services you can create real world CRUD applications like Marky’s example demonstrates.

I am very curious about your findings and code examples mixing Domino and Angular!

Tagged with: , ,
Posted in JavaScript

Custom control to display a My Communities list

In the managed bean I described in an earlier post there was a method to return a list of communities in IBM Connections where the authenticated user is member of (getMyCommunities()). So what can you do with it?

In IBM Connections when you section Communities \ I’m a Member you get to see a list with communities you particpate in, along some sub data for each community:

Screenshot_4

 

Social Business Toolkit API

I find the following link the best resource to discover the details of the SBT API. For all the classes their methods are described (at least I hope so).

So for example the Community class I have created a dataTable component and added a column for all it’s methods. When I bind this dataTable to my getMyCommunities method I get an overview of what information I can re-use. If you know an easier way to check this then please drop a comment how to perform this.

dataView control

You have several options to display information from a Community list in XPages. First you have the dataTable control but this control gives you very little control about the layout. The repeat control gives you probably the greatest freedom to define your layout. But in this example I have chosen the dataView control because it has already so predefined layout structure from which you can deviate (facets). To complete the presentation I have wrapped the dataView control in a widgetContainer control.

Here is the code:

<xe:widgetContainer
id=”widgetContainer1″
titleBarText=”My communities”>
<xp:panel>
<xe:dataView
id=”dataView1″
value=”#{javascript:ServiceBean.getMyCommunities();}”
var=”comm”
rows=”5″
expandedDetail=”true”
columnTitles=”true”>
<xp:this.facets>
<xe:pagerSizes
id=”pagerSizes1″
xp:key=”pagerBottomLeft”
for=”dataView1″>
</xe:pagerSizes>
<xp:image
url=”#{javascript:return comm.getLogoUrl();}”
id=”image1″
xp:key=”icon”
style=”height:64px;width:64px”>
</xp:image>
<xp:panel xp:key=”detail”>
<xp:panel>
<xp:text
escape=”true”
id=”commMemberCount”>
<xp:this.value><![CDATA[#{javascript:return comm.getMemberCount();
}]]></xp:this.value>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>
</xp:text>
people
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
Updated by:

<xp:link
escape=”true”
text=”#{javascript:return comm.getContributor().getName();}”
id=”commMemberUpdatedBy”>
<xp:this.value><![CDATA[#{javascript:
try {
var colleagueId = comm.getContributor().getUserid()
var profileService = new com.ibm.sbt.services.client.connections.profiles.ProfileService();

var profile = profileService.getProfile(colleagueId);
var profileUrl = profile.getProfileUrl().replace("/atom/profile.do", "/html/profileView.do");

return profileUrl;
} catch (exception) {
println("Colleague Profile error: " + exception);
return null;
} }]]></xp:this.value>
</xp:link>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:text
escape=”true”
id=”commUpdatedBy”
value=”#{javascript:comm.getUpdated();}”>
<xp:this.converter>
<xp:convertDateTime
type=”both”
dateStyle=”full”
timeStyle=”short”>
</xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:repeat
id=”repeat1″
rows=”30″
value=”#{javascript:comm.getTags();}”
var=”rowData”
indexVar=”rowIndex”
disableTheme=”true”
disableOutputTag=”true”>
<xp:link
escape=”true”
text=”#{javascript:rowData}”
id=”link1″
styleClass=”tagLink”>
</xp:link>

</xp:repeat>
</xp:panel>
<xp:panel tagName=”div”>
<xp:text
escape=”true”
id=”commSummary”
value=”#{javascript:comm.getSummary();}”>
</xp:text>
</xp:panel>

</xp:panel>
<xp:panel
id=”titlePanel”
style=”white-space:nowrap;”
xp:key=”summary”>
<h4>
<xp:link
escape=”true”
id=”link6″
target=”_blank”
value=”#{javascript:return comm.getCommunityUrl();}”
text=”#{javascript:return comm.getTitle();}”>
</xp:link>
</h4>
</xp:panel>
</xp:this.facets>
<xe:this.extraColumns>
<xe:viewExtraColumn
value=”#{javascript:comm.getCommunityType();}”
columnTitle=”Type”>

</xe:viewExtraColumn>

<xe:viewExtraColumn
value=”#{javascript:comm.getForumTopics().length;}”
columnTitle=”Topics”>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>

</xe:viewExtraColumn>

</xe:this.extraColumns>
<xp:this.facets>
<xp:pager
xp:key=”pagerBottomRight”
pageCount=”5″
partialRefresh=”true”>
<xp:pagerControl
type=”Previous”
id=”pagerControl4″>
</xp:pagerControl>
<xp:pagerControl
type=”Group”
id=”pagerControl5″>
</xp:pagerControl>
<xp:pagerControl
type=”Next”
id=”pagerControl6″>
</xp:pagerControl>
</xp:pager>
</xp:this.facets>

</xe:dataView>
</xp:panel>
</xe:widgetContainer>

(If you know how to paste indented code proper in WordPress than drop a comment)

The result is as followed:

Screenshot_5

I have not finished the filtering option when clicking a tag (link control). Sorting options by Date, Popularity, Name are also not in place.

Nevertheless I have a starting point to mash up this dataView control with data inside Domino :-)

Tagged with: , ,
Posted in SBT SDK

(extended) Managed Bean for SBT SDK

In a previous post I mentioned my blogpost ‘Developing social applications with the Social Business Toolkit SDK‘. In the post I defined a managed bean to connect to the Files service  and return data via the getMyFiles method. In this post I will extend that bean to access other services in IBM Connections:

  • Activity Stream
  • Blogs
  • Bookmarks
  • Communities
  • Files
  • Forums
  • Profiles

Later I will refine the ServiceBean object with new methods derived from the ones available in the SBT SDK. I shall also provide UI examples (custom controls) to present the information from the services.

ServiceBean

For now I have come so far:

package com.quintessens.bornsocial.sbt;

import java.io.Serializable;

import com.ibm.sbt.services.client.connections.activitystreams.ActivityStreamEntityList;
import com.ibm.sbt.services.client.connections.activitystreams.ActivityStreamService;
import com.ibm.sbt.services.client.connections.blogs.BlogList;
import com.ibm.sbt.services.client.connections.blogs.BlogService;
import com.ibm.sbt.services.client.connections.bookmarks.BookmarkList;
import com.ibm.sbt.services.client.connections.bookmarks.BookmarkService;
import com.ibm.sbt.services.client.connections.communities.CommunityList;
import com.ibm.sbt.services.client.connections.communities.CommunityService;
import com.ibm.sbt.services.client.connections.files.FileList;
import com.ibm.sbt.services.client.connections.files.FileService;
import com.ibm.sbt.services.client.connections.files.FileServiceException;
import com.ibm.sbt.services.client.connections.forums.ForumList;
import com.ibm.sbt.services.client.connections.forums.ForumService;
import com.ibm.sbt.services.client.connections.forums.TopicList;
import com.ibm.sbt.services.client.connections.profiles.Profile;
import com.ibm.sbt.services.client.connections.profiles.ProfileList;
import com.ibm.sbt.services.client.connections.profiles.ProfileService;
import com.ibm.sbt.services.client.connections.profiles.ProfileServiceException;

public class ServiceBean implements Serializable {
private static final long serialVersionUID = 1L;

public ActivityStreamEntityList getAllStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getAllUpdates();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getMyStatusUpdates();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyNetworkStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getStatusUpdatesFromMyNetwork();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyNetworkUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getUpdatesFromMyNetwork();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getUpdatesIFollow() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getUpdatesFromPeopleIFollow();
} catch (Throwable e) {
return null;
}
}

public FileList getMyFiles() {
FileService service = new FileService();
try {
return service.getMyFiles();
} catch (FileServiceException e) {
return null;
}
}

public ProfileList getMyColleagues() {
ProfileService service = new ProfileService();
try {
Profile profile = service.getMyProfile();
ProfileList profiles = service.getColleagues(profile.getUserid());
return profiles;
} catch (Throwable e) {
return null;
}
}

public Profile getMyProfile() {
ProfileService service = new ProfileService();
try {
Profile profile = service.getMyProfile();
return profile;
} catch (Throwable e) {
return null;
}
}

public BlogList getAllBlogs() {
BlogService service = new BlogService();
try {
BlogList entries = service.getAllBlogs();
return entries;
} catch (Throwable e) {
return null;
}
}

public BlogList getMyBlogs() {
BlogService service = new BlogService();
try {
BlogList entries = service.getMyBlogs();
return entries;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getAllBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getAllBookmarks();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getPopularBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getPopularBookmarks();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getMyBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getMyNotifications();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public CommunityList getAllCommunities() {
CommunityService svc = new CommunityService();
try {
CommunityList comms = svc.getPublicCommunities();
return comms;
} catch (Throwable e) {
return null;
}
}

public CommunityList getMyCommunities() {
CommunityService svc = new CommunityService();
try {
CommunityList comms = svc.getMyCommunities();
return comms;
} catch (Throwable e) {
return null;
}
}

public ForumList getMyForums() {
ForumService svc = new ForumService();
try {
ForumList forums = svc.getMyForums();
return forums;
} catch (Throwable e) {
return null;
}
}

public TopicList getMyForumsTopics() {
ForumService svc = new ForumService();
try {
TopicList forums = svc.getMyForumTopics();
return forums;
} catch (Throwable e) {
return null;
}
}

}

My communities sample

Below you see an example of a widget showing the communities I am member of:

Screenshot_1

The code for the custom control is as followed:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view
xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
xmlns:xe=”http://www.ibm.com/xsp/coreex”&gt;

<xe:widgetContainer
id=”widgetContainer1″
titleBarText=”My communities”>
<xp:panel>
<xp:dataTable
id=”dataTable1″
rows=”5″
value=”#{javascript:ServiceBean.getMyCommunities();}”
var=”comm”>
<xp:column
id=”column4″>
<xp:this.facets>
<xp:label
value=”Community”
id=”label4″
xp:key=”header” />
</xp:this.facets>
<h4>
<xp:link
escape=”true”
text=”#{javascript:comm.getTitle()}”
id=”link1″
value=”#{javascript:comm.getCommunityUrl()}”
title=”Open community…” />
</h4>
</xp:column>
<xp:column
id=”column5″>
<xp:this.facets>
<xp:label
value=”Creator”
id=”label5″
xp:key=”header” />
</xp:this.facets>
<xp:text
escape=”true”
id=”computedField4″>
<xp:this.value><![CDATA[#{javascript:var d = comm.getContributor().getName();
return d;
}]]></xp:this.value>
<xp:this.converter>
<xp:convertDateTime
type=”date”
dateStyle=”short” />
</xp:this.converter>
</xp:text>
</xp:column>
<xp:column
id=”column6″>
<xp:this.facets>
<xp:label
value=”Type”
id=”label6″
xp:key=”header” />
</xp:this.facets>
<xp:text
escape=”true”
id=”computedField5″
value=”#{javascript:comm.getCommunityType() }”>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />
</xp:this.converter>
</xp:text>
</xp:column>
</xp:dataTable>
<xp:pager
layout=”Previous Group Next”
partialRefresh=”true”
id=”pager1″
for=”dataTable1″ />
</xp:panel>
</xe:widgetContainer>
</xp:view>

Some thoughts

The presentation of the data from the services in Connections may vary for each type of information. Some information is more suitable to present in a tabular format, others e.g. in a Data View control. Also at this moment I am not fully aware about the available methods for each service and what data they may provide. Here the trial and error method I will simply apply, or provide multiple UI’s for the same type of information.

Time to publish this blog so I can continue with the presentation layer…

Tagged with: , , ,
Posted in SBT SDK

Developing social applications with the Social Business Toolkit SDK

Last week I have posted a blog item on the company blog, which you can read here. In this post I take you through the first steps how to enable a IBM Notes application to integrate with IBM Connections via the Social Business Toolkit SDK using XPages.

Learning Connections

I have the idea to build a set of custom controls which would allow you to quickly create mash-up applications to interact with IBM Connections and include them back in Connections or run them as stand alone apps. This approach allows me also to take a look at the services within IBM Connections. Once ready I will make my code available somewhere.

Inspiration

I found a great deal of inspiration in the following apps:

If you happen to know more application examples / code to integrate with IBM Connections please drop a link.

 

 

 

Tagged with: ,
Posted in SBT SDK

Developing social applications with the Social Business Toolkit SDK

Intro

The Social Business Toolkit SDK (SBT SDK) is a set of libraries and code samples that you use for connecting to the IBM Social Platform. As a developer you can choose which web development skills fits you best: Java, (client side) JavaScript or XPages. Your social platform may reside in the cloud or on premise.

In this post I will give you guidelines and practical examples to get you started. I choose XPages as development environment.

Terminology

In the document terms are thoroughly used:

Term Description
SBT Social Business Toolkit
SDK Software Development Kit
DDE Domino Designer on Eclipse
XPages XPages is a rapid web and mobile application development technology
OpenNTF Open Source Community for (IBM) Collaboration Solutions
OAuth Open standard for authorization
Managed Bean Java Beans representing system objects and resources
Endpoint Encapsulates the access to a service provider, like Connections or Sametime

Installation of the SDK

Prerequisites

Before you can start with development in Domino Designer on Eclipse you need to install the SBT SDK. It can be downloaded from the following address: http://ibmsbt.openntf.org/. The files you need to work with the SBT SDK and Domino are located in folder ‘redist\domino’ in the downloaded ZIP file.

Extension Library

Another condition to be able to run the Social SDK within your XPages you need to have installed the Extension Library, available on OpenNTF: http://extlib.openntf.org/. You need to have the library installed on both Domino server and DDE.

Installation for Domino Server

You can find a set of instructions how to install the SBT SDK on an IBM Domino server on the address:
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Installing_on_Domino_Server_SDK1.0&content=pdcontent. I recommend the installation via an Eclipse Update site. As a result your Update site should display the following plugins:

Screenshot_4

 

Installation for DDE

The Domino Designer deployment of the IBM Social SDK can use the same imported update site from the Update Site NSF. On Domino Designer verify that the checkbox for “Enable Eclipse plugin install” is checked in the Domino Designer preferences. You can find a set of instructions how to install the SBT SDK on DDE on the same address:
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Installing_on_Domino_Server_SDK1.0&content=pdcontent.

Setting up a Notes application

Create a new Notes application from scratch. I called mine ‘bornsocial.nsf’. Open the Xsp Properties file in DDE. Include the following libraries:

  • com.ibm.xsp.extlib.library
  • com.ibm.xsp.sbtsdk.library

Screenshot_5

 

Authentication

The Social Business Toolkit leverages a credential store for single sign on. For OAuth for example the user tokens are stored in this repository so that users don’t have to authenticate and grant access to services like IBM Connections for every session. The OAuth application tokens are also stored in this repository so that all tokens can be managed in one central place. You can read more on the credential store here: http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Configuring_token_stores_SDK1.0&content=pdcontent&sa=true. And it is also explained in the following video: http://www.youtube.com/watch?v=2CWD70XarX8#t=100.

In basic: the implementation of the credential store is performed by the use of a managed bean. The usage of this credential store is then defined in an endpoint. An endpoint encapsulates the access to a service provider, like Connections or SameTime.

In the Package Explorer open the faces-config.xml file:

Screenshot_6

 

Add the following lines:

<!– Token Store memory implementation –>
<managed-bean>
<managed-bean-name>CredStore</managed-bean-name>
<managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<!– Password Store memory implementation –>
<managed-bean>
<managed-bean-name>PasswordStore</managed-bean-name>
<managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Endpoint

In the first example(s) we are only going to demonstrate to connect to IBM Connections. Add the following lines:

<managed-bean>
<managed-bean-name>connections</managed-bean-name>
<managed-bean-class>com.ibm.sbt.services.endpoints.ConnectionsBasicEndpoint</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>url</property-name>
<value>https://your-connections-url.com</value&gt;
</managed-property>
<managed-property>
<property-name>authenticationService</property-name>
<value>communities/service/atom/communities/all</value>
</managed-property>
<managed-property>
<property-name>authenticationPage</property-name>
<value>/bornsocial.nsf/_BasicLogin.xsp?endpoint=connections</value>
</managed-property>
</managed-bean>

For value of managed property ‘url’ you must enter the address of your connections installation or in case you are using IBM Greenhouse for demonstration purposes you can choose ‘https://greenhouse.lotus.com’.

Login page

A custom login page will presented when a user initially tries to connect to IBM Connections:

Screenshot_7

 

The elements for the login page are in the XPagesSBT.nsf application which comes with the SBT SDK. The nsf is located in folder redist\domino. The login page consists of the following design elements:

Name Type
_BasicLogin.xsp XPage
sbtLoginPage Custom Control
sbtLoginPanel Custom Control

You can simply copy the design elements from the sample application in your application and modify them e.g. for branding.

Connecting to Connections

Your application is now ready to connect to Connections. Where you place the code to connect to Connections is up to you. A recommended approach could be to establish connections via Managed Beans.A managed bean is nothing more fancy than a registered a JAVA object.

Managed Bean

In our first example we are going to read the content under My Files in Connections. These are the files that you have uploaded and shared.

  1. Create a new Java design element (Java Class).
  2. Enter the following code:

package com.quintessens.bornsocial.sbt;
import java.io.Serializable;
import com.ibm.sbt.services.client.connections.files.FileService;
import com.ibm.sbt.services.client.connections.files.FileServiceException;
import com.ibm.sbt.services.client.connections.files.FileList;

public class ServiceBean implements Serializable{
private static final long serialVersionUID = 1L;

public FileList getMyFiles() {
FileService service = new FileService();
try {
return service.getMyFiles();
} catch (FileServiceException e){
return null;
}
}
}

Code explanation

The function getMyFiles gets handle to the FileService object. Then the getMyFiles function is called to get all the files (both private and shared) the user has uploaded in Connections. Then a FileList object is returned to the caller.

The FileList object can then be used in a suitable XPage control e.g. the DataTable or the DataView control.

Registration

In order to access the Managed Bean you have to register it. This is done in the faces-config.xml file. Open the file and add the following lines:

 <managed-bean>
<managed-bean-name>ServiceBean</managed-bean-name>
<managed-bean-class>com.quintessens.bornsocial.sbt.ServiceBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

You will access the bean via its name ServiceBean.

XPages

Finally we have come to a point where we can display the files that the managed bean returns from IBM Connections. I have choosen the XPages environment to do so.

Custom Controls

A best practice in XPages development is to divide functionality in individual blocks known as Custom Controls. This make it easier to re-use the functionality across your application.

Custom Control for a ‘My Files’ overview

  • Create a new Custom Control design element.
  • Add the following code to the control:

<xe:widgetContainer id=”widgetContainer1″ itleBarText=”#{javascript:return compositeData.widgetTitle;}”>
<xp:panel>
<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>
<xe:this.extraColumns>
<xe:viewExtraColumn columnTitle=”Filetype”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Created”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Size”></xe:viewExtraColumn>
</xe:this.extraColumns>

<xe:this.summaryColumn>
<xe:viewSummaryColumn columnTitle=”Filename”></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xp:this.value>
<![CDATA[#{javascript:ServiceBean.getMyFiles();}]]>
</xp:this.value>
<xp:this.facets>
<xp:panel xp:key=”noRows” id=”topicsPanel2″>
<xp:div styleClass=”lotusWidgetBody”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:return (viewScope.myFilesAvailable ? "No files found." : "My Files unavailable.");}]]>
</xp:this.value>
</xp:text>
</xp:div>
</xp:panel>
<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>
</xp:link></h4>
</xp:panel>
<xp:panel id=”typePanel” xp:key=”extra0″ style=”width: 20%;white-space:nowrap;”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:return file.getType();}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel id=”sizePanel” xp:key=”extra2″ style=”width: 15%;white-space:nowrap;”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:var size = file.getSize();
var kilobyte = 1024;
var megabyte = kilobyte *1024;
if(size < kilobyte) {
return (size + " B");
}else if(size < megabyte) {
return (Math.round(size/kilobyte) + " KB");
}else {
return (Math.round(size/megabyte) + " MB");
}}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel id=”panel1″ xp:key=”extra1″ style=”width: 15%;white-space:nowrap;”>
<xp:text escape=”true” id=”computedField3″ value=”#{javascript:file.getCreated()}”></xp:text>
</xp:panel>
</xp:this.facets>
</xe:dataView>
</xp:panel>
</xe:widgetContainer>

As a result the files in IBM Connections for the authenticated user will be listed e.g.:

Screenshot_8

 

Code explanation

The DataView control is using the getMyFiles function from Managed Bean ServiceBean for data binding:

Screenshot_9

<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>
<xp:this.value><![CDATA[#{javascript:ServiceBean.getMyFiles();
}]]></xp:this.value>

</xe:dataView>

It iterates through the returned FileList object and for each column values from each entry in the ‘file’ collection the value is computed e.g.:

<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>
</xp:link></h4>
</xp:panel>

API Explorer

Use the SBT API Explorer which method each object provides:

Screenshot_10

Link: http://greenhouse.lotus.com/llapiexplorer/.

Summary

As you have seen getting started with the Social Business Toolkit is not that difficult for XPages developers. As alternative you could also choose JavaScript or JAVA if those skills fit you better. The SDK will help you understanding Connections piece by piece from a developer perspective.

In the example information is read from Connections but you can also post data. The SDK allows you to create great ‘social enabled’ applications. This can be applications that solely work with Connections or integrate with other platforms e.g. IBM Notes.

I hope to write more on the Social Business Toolkit in another post. Thank you for reading.

Patrick Kwinten

 

Tagged with: , ,
Posted in XPages

CU in Orlando !

I decided last minute to take usage of the early bird rate for IBM ConnectED. Since the event has this time more focus on technical content and a pre-release of Mail Next I have a feeling this edition will be of great value. Hope to CU in Orlando!

ibmconnected

Tagged with: , ,
Posted in Education, IBM, IBM Notes

Social Connections VII – Stockholm

Social Connections VII will be held in the stunning city of Stockholm in Sweden on Thursday 13th and Friday 14th November, 2014. Since I work for Infoware, a company who will be sponsoring the event in order to promote their IBM Connections management tool called Domain Patrol Social I would like to highlight this event on my blog.

From previous events (Amsterdam) I can only recommend this event to those working with IBM Connections, integration with other platforms (e.g IBM Notes) and social collaboration in general. Of course Stockholm is marvelous city to explore (but maybe not so god in November…).

I hope to see you there!

Tagged with: , ,
Posted in Uncategorized
Introduction
I am Patrick Kwinten. I am a IBM Notes Domino Product Specialist since 1996. With this blog I am trying to give my contribution to the community.

The posts in this blog project my personal opinions, not the company I work for.
.

C U in Orlando

ibmconnected

CV
OpenNTF
Follow my projects on OpenNTF. Below are some examples:

Categories
RSS Feed
Follow

Get every new post delivered to your Inbox.

Join 221 other followers