Born social – Create a Social Notes application from scratch

Introduction

A long time ago (it seems) I had the idea to prepare integration of Connections with Xpages development via the SBTSDK. I thought this would be a good way to learn Connections and it’s API more in details. By setting up custom controls you would be able to build mash-up apps piece by piece.

However there seemed to be little interest for this in the market (correct me if I am wrong) so I continued with other technologies.

Lately Mark Roden posted a couple of posts on his blog regarding the social business toolkit so I hop on to this and post my previous work. Hopefully it can help someone getting started.

Downloads

Born Social – the doc

The document Born Social describes how to setup your server, development environment and application to get started developing with the SBTSDK.

It also provide code samples of custom controls to display information from IBM Connections.

born social

Previous Posts on SBT SDK

Perhaps it helps to read some previous posts I wrote on the SBT SDK.

Born Social – the app

The following file contains an NSF file with all the code, custom controls and some sample xpages.

born social app

Summary

I hope the provided samples and guidance will help you to get started with the SBT SDK.

At IBMConnect at the IBM developers booth I asked what the upcoming plans where for SBT SDK and if we could get more controls for XPages but the answer was that IBM had received very few questions for application development with Connections :-/

Perhaps if more people debunk this mind-set at IBM, perhaps by sharing their samples, interest will grow.

Delivering responsive web design in IBM Notes applications

The following is a re-post I originally posted on Infoware’s blog: link.

Introduction

Responsive web design (RWD) has been the talk of town the last years. In 2012 it was listed as #2 in ‘Top Web Design Trends’ by .net magazine and Mashable called 2013 the ‘Year of Responsive Web Design’. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications.

responsive

While I assume that a large portion of the internet (and in some cases intranet) sites are nowadays optimized for the device that accesses them, but what about your company’s (internal) business applications? 

Business value

IT departments need to prioritize their activities and internal applications are most often accessed by a smaller audience than external applications. Historically the internal app was accessed with a desktop computer. With the trend of smartphones and tablets taking over the workspace this may no longer be the case in your company?

With a VPN connection users want to continue to execute their work on this new breed of devices, instead starting up a desktop computer for a single task. Here is where the business value of RWD comes in.

Continue to work on same device = More productive employees = Saving time and perhaps even hardware

Mobile first

A trend is to apply the progressive application strategy of ‘Mobile first’. Instead of designing a complex application for desktop computers first and thereafter gracefully degrade it for mobile devices, the user interface is initially designed for mobile devices and enhanced for desktops with more processing power.

mobile-first-icons

 

Many RWD frameworks embrace this ‘Mobile first’ concept nowadays.

Options in Notes

So what are your options in delivering RWD in your beloved Notes applications? Depending on your roadmap for the platform and personal preferences you have the following options.

  1. Build the application with XPages technologies.
  2. Build the application with common web technologies.

The XPages way

An approach for your Notes platform that is highly promoted by IBM is to deliver web interfaces for Notes applications with XPages. Not only bring you in Rapid Application Development (RAD) principles in your project also the range of capabilities is much more diverse.

Another benefit is that you can stay on the core technologies: JSF, JavaScript and Java. This you can combine with common web technologies like AJAX, HTML5, CSS and REST services. For the RWD you can use your favorite framework such as Bootstrap or Foundation.

Bootstrap framework

twitter-bootstrap

Bootstrap is a popular framework for developing responsive, mobile first projects on the web. It makes front-end web development faster and easier. Bootstrap is based upon HTML, CSS and JavaScript, technologies already well-known in Notes web apps.

Distribution

You have several options how you distribute the Bootstrap framework to your audience:

  1. Install the files on your Domino server.
  2. Embed the files in a Notes application.
  3. Install an additional XSP library on your Domino server.
  4. Install the latest extension library on your Domino server.

In case you do not utilize the OSGi runtime on your Domino server you can either install the files on centrally on the Domino server or embed the files in each Notes application. The installation on the Domino server makes the distribution of updates easier but the administrator is responsible for the distribution across servers. Embedding the files in a Notes application is less efficient (e.g. caching) but makes distribution of updates a task for the developer.

Probably the best approach would be to utilize the OSGi runtime on your Domino server and distribute the files as a library via an Update site Notes application across your servers. This makes the task even simple and small for an administrator.

If you choose to do so you have the option to either install bootstrap4xpages library as a separate library or you can install the latest extension library (from 10 november 2014). The latter give you several benefits:

  • Custom renderer for the Application Layout control, which makes it easy to define the layout structure of your application.
    • This renderer gives the control a Bootstrap look & feel, as well making the control responsive.
  • A newer version of jQuery.
  • Latest Bootstrap themes (3.2.0 normal or flat).
  • Additional configuration options in the Application Layout control wizard for the Bootstrap navigation components.

Separate Mobile devices UI alternative

The extension library (a library with additional XPages controls and functions) provides also so-called ‘Mobile controls’ which allow you to deliver a separate interface for mobile devices for your Notes apps. Via a wizard you can build a ‘single page application’ in a matter of minutes with full CRUD (create, read, update and delete) operations and infinite scrolling through document lists (aka views).

This approach does not deliver RWD but a separate user interface for mobile devices. At least it gives you the option to deliver a UI adapted for mobile devices in a very short time with little investment.

You can choose to make the UI of the app look like a native app for iPhone or Android. Alternatively you can choose to make the UI look in line with other IBM products (iNotes, Connections). A video that demonstrates the controls briefly you can find here: http://vimeo.com/99537780.

The WEB way

In case you do not walk the XPages path but instead you prefer the approach to deliver the application with more common web technologies like HTML, CSS, AJAX and REST services you can still install the files of your responsive web design framework of choice on the Domino server or embed them in a Notes application.

From there you can start to (re)write your ‘traditional’ Domino application as a Web project. In the latter case you use Notes only as a container for your data documents and design elements and use forms and views only as data schemes.

This approach dodges the RAD capabilities in Notes and will demand more development time. But you can apply this approach also to other platforms that you may have. You can later even debate why the data should be stored in Notes and not in a document-oriented database alternative? The layered security and replication capabilities are often good arguments.

Implementing RWD via the Extension Library option

In the following scenario we will describe the implementation of RWD with the Extension Library more in details.

  • Database enablement.
  • Application Layout.

Database enablement

Assuming you have installed the extensions for the Domino server and Domino Designer (DDE) client according the instructions in the readme.pdf file you can now enable a Notes application.

XSP properties

The XSP properties file allows you to configure parameters for the XPages framework. Open the file in DDE.

Screenshot_1

In the General tab you have now two more themes to select:

  • Bootstrap 3.2.0
  • Bootstrap 3.2.0 flat

The ‘flat’ theme delivers:

  • The resources and styling that comes with Bootstrap v3.2.0.
  • jQuery v2.1.1 resources.
  • Cleanup of specific XPages controls when using Bootstrap.
  • Glyphicon halflings.
  • dbootstrap resources, which provide Bootstrap styling for Dojo controls.

The ‘ordinary’ theme provides all of the same resources as the flat theme, and includes 3D effects to buttons and some other additional styling.

Select one of the two themes:

Screenshot_2

Application layout

The RWD plugin adds a new renderer for the Application Layout control which you normally use to structure the layout of your application. This renderer gives your application layout the Bootstrap look and feel, as well as responsive behavior. When the application is rendered on a smaller screen, such as on a mobile device, it will automatically re-organize the application contents for an optimal user experience.

The control also has new configuration options. Add the Application control on a custom control and open the All Properties tab. In the basics section you can choose now the xe:bootstrapResponsiveConfiguration option:

Screenshot_3

Note: in case you have already a configured Application Layout control you can change the configuration option directly in the Source panel to keep the rest of your configuration (e.g. xe:applicationConfiguration -> xe:bootstrapResponsiveConfiguration).

This configuration options give you several more properties:

  • collapseLeftColumn
  • collapseLeftMenuLabel
  • collapaseLeftTarget
  • fixedNavbar
  • invertedNavbar
  • pageWidth

With the first 3 properties you define how the left column should behave on smaller devices (collapsed for smaller devices, display text when collapsed, item the left menu should be attached to).

You can determine the behavior of the navbar (inverted, fixed (top or bottom)) and the width of the page e.g. fluid = use Bootstrap ‘fluid’ container (almost full width).

Wizard

When you initially drag on the Application Layout control on the custom control a two-step wizard is presented. In the first step you select one of available configurations. You can filter on responsive and non-responsive.

Screenshot_4

In the second you set the properties for the chosen configuration. In case you choose the Responsive Bootstrap option you will see the following screen:

Screenshot_5

Under configuration you can set the properties for the layout including the 6 additional properties mentioned earlier. Set also the other properties like you would normally do.

Voila! Your application is now ready for development.

Hiding elements for specific devices

The plugin provides only the resources and structure for responsive web design. In case you want to optimize the layout for devices by explicitly show or hide them you can use CSS classes.

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query combined with large, small, and medium devices.

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

Note that the elements that you hide are still being loaded, but simply not being displayed.

Data View control

Probably a typical use case is the display of table columns or lists. On a desktop you may want to show more columns than on a smaller devices.

Typical you use the Data View control from the extension library to display lists of documents. The information you want to display as a link is defined in the summaryColumn property.

Screenshot_6

Additional columns that are displayed on the right of the summaryColumn will be displayed via the extraColumns property. Each additional column is defined in a viewExtraColumn item which contains properties for styleClass and headerStyleClass. For example you could set these as followed:

<xe:this.extraColumns>

<xe:viewExtraColumn columnName=”Date” columnTitle=”Date” style=”width: 100px”  styleClass=” hidden-xs hidden-sm ” headerStyleClass=” hidden-xs hidden-sm“></xe:viewExtraColumn>

</xe:this.extraColumns>

This will show the extra column only for medium and larger devices since they will be hidden for (extra) small devices.

Screenshot_7

Wrap up

Delivering responsive web design on your Notes applications has never been as easy as it is nowadays with the RWD plugin in the extension library. It also respects the rapid application (web) development mantra of XPages.

In case you do decide to follow this path remember you need to check what information you want to show or hide for specific devices.

So what is keeping you from getting a bigger bang for the buck by delivering optimized user experiences for mobile, tablet and desktops for your Notes applications?

 

Certified Application Developer Notes 9

Today I passed the second exam for my certification for IBM Application Developer Notes and Domino 9. My last certification dated from the Notes 7 era so I was forced to take the two core exams as explained in the image below:

vlcsnap-2014-10-01-20h45m37s40

 

This second exam was much more focused on development with XPages, using the Extension Library and the Mobile controls. I guess according what you would expect in modern Domino development. There were the ooccasional LotusScript and @Formula questions, but the majority of the questions were XPages related. Personally I find the setup a bit odd. I Hardly use @Formula or LotusScript in new projects. I wonder why IBM is not defining exams within each technical area seperately e.g. XPages, @Formula & Functions, LotusScript, Java and Extension Library if you wish.

Overall I liked the second exam better, no odd questions about Notes client installation, parameters in the client, more practical development questions. But also expect questions on JSF, XSP configuration etcetera.

A tip I could give is to take a look at the API documentation:

XPages configuration file format

I have not considered to upgrade my certification to the ‘Advanced’ level since I have not worked with administration so intensively lately. I expect though that the XPages mobile advanced topics would be a “piece of cake”. What are your experiences? After all it is also a financial question because the exams are not free. Maybe there will be the option to take an exam on IBM ConnectED 2015?

 

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 :-)

(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…

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.

 

 

 

Handsons from EntwicklerCamp 2014

Subject Download Presentation
Javascript – Die ersten Schritte http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/aa9f566f61ab0287c1257be200295c9d/$FILE/H1-Javascript_HandsOn_1_0_0.pdf
Lotuscript – die ersten Schritte http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/4865dda7cb38ffc0c1257be200295ca0/$FILE/H2-LotusScript.pdf
Formeln – die erste Schritte http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/f33e4cd0f2817177c1257be200295c99/$FILE/H3-Hands%20Out%20Formel.pdf
C-API – die ersten Schritte http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/ab13b5dfac044f51c1257be200295c9a/$FILE/H5-C-API-Erste%20Schritte.pdf
XPages Grundlagen http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/715e4cb5349a351cc1257be200295c9b/$FILE/H6-XPages_0_0_2.pdf
Webservices unter Notes/Domino http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/41dc29a6c9b3d108c1257be200295c9f/$FILE/H8-Webservices%20unter%20NotesDomino.pdf