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.

My reflections of IBMConnectED

Yes, or ofcourse, I attended the IBMConnectED 2015 event in Orlando. First start with a summary of sessions I attended:

XPages Performance and Scalability
IBM Domino Applications on Cloud
IBM’s Mobile Collaboration Strategy and Portfolio
IBM ConnectED – A New Way to Engage
IBM Domino – 2015 and Beyond
IBM Domino Applications in Bluemix
The Future of Web Development – Write Once, Run Everywhere with AngularJS and Domino
Mastering Your Logs
IBM Domino App Dev Futures
There’s an API for That! Why and How To Build on the IBM Connections Platform
Yes! You CAN Use Those Cool New Frameworks in Your Mobile Domino Apps!
Considerations for the Cloud
Be Open – Use WebServices And REST In XPages Applications
IBM Domino Application Development – CHALK201
App Throwdown Winner’s Circle
GURUpalooza!
Responsive Application Development for XPages
Build Your Own Apps in Minutes Leveraging IBM Bluemix and IBM Connections
ConnectED Closing Session

That sounds like a lot but have we actually learned or heard something new out there?

IBM killed the master-classes

A class given by an expert to highly talented students

A class may be seen as a course of instruction. In previous editions a master-class tend to be a deep-dive into a subject, where you were taught from a beginner’s level to an expert level. A typical master-class extended the hour, due to the complexity or diversity of the subject.

Often this setup was already worth to attend the conference. However at the 2015 edition subjects where squeezed into a 45 minute time-frame and sometimes presented by an IBM-er so it became a sales pitch in disguise (IBM Domino Applications on Cloud).

When talking with other attendees I heard similar disappointments about the masterclass setup.

Oh my God they (almost) killed the Notes client

Lot’s of Verse at the conference, but the Notes client was mentioned very little. You might wonder if there is a roadmap for Notes?

If you look at the following picture you would think a new edition of the Notes client would appear in 2015:

ibm-connect-2013-messaging-and-collaboration-roadmap-43-638

 

So IBM Verse = Notes Next? I wonder why IBM is not able to tell about their plans for Verse on premise and if it is going to be the future Notes client and how native Notes applications will be delivered in this Verse client. I assume via the Notes browser plugin but the fact that IBM simply ignores these kind of important questions is a slap in the face of current customers to my opinion.

Application development on Bluemix

One of the scarce announcements on the event was the future delivery of XPages and Connections development on the cloud aka Bluemix. This is great and exciting news to my opinion! I understand IBM Notes team can not keep up with bringing new internet related services into their platform but by bringing the platform into an environment that is based on open standards like Bluemix those services will become available for us developers.

Exciting news! I was expecting to have Notes as a data-source in Bluemix but with XPages as a runtime environment this will bring the platform much closer to us.

Meet the developers

The opportunity to meet the developers behind the different products in the Connections portfolio is excellent so I stepped in with some questions of my own.

  • No we are not thinking about a development client for Connections, either make development in Connections easier than it is today :-/
  • No we are not thinking about an admin client for Connections, either try Domain Patrol Social by Infoware or the Connections Administration Toolkit by TimeToAct.
  • No clear roadmap for the social business toolkit. IBM is waiting for requests.

Nevertheless I got help/guidance with other development questions and it was nice to meet the IBM developers who normally help you on StackOverflow.

Application development future

There were some sessions about app dev futures but mainly they were summaries of the recent activities. OK you had Bluemix ofcourse and about responsive design via the Extension Library but nothing about a roadmap or exciting ideas for the Domino Designer client during this event.

Encryption in XPages

This was promised and demonstrated during the App Dev future session. Great & finally!

I would have rather heard about activities on features we do not have today:

  • secured local storage & synchronization (Darwino/Unplugged)
  • more mobile controls (the next billion web users are gonna be mobile http://time.com/3589909/internet-next-billion-mobile/)
  • technologies/modules behind Verse
  • Verse theme for app dev

Just to name a few.

Best session

A bit of a sensitive topic since people were throwing on stage what session they thought to be best. So I rather prefer to highlight the session I enjoy most.

Most enjoyable session

As criteria for my nomination I choose:

  • Presentation skills/confidence of the speaker
  • Topic skills of the speaker
  • Personal reflections of the speaker on the topic
  • Real world examples on the topic
  • Funny quotes / remarks on the topic

And the winner is….

Considerations For The Cloud – BP207
Best Practices
Chris Miller (Connectria)

Although I am not an admin guy (anymore) Chris managed to teach me a lot on moving to the cloud in a fast tempo with a lot of funny references.

Cookiegate, Project Chrome & more

I did not understand the twitter stream about people not having a Pretzel cookie in their lunch-box since I had one in mine. Or was I not to pick up a lunchbox with the label IBM-ers only on it?

Project Chrome held the twitter stream for a while. I am not aware of the outcome. Either that journalist is not to be taken serious any more or an amount of IBM-ers will face the beginning 2015 with a new perspective. Hopefully IBM is wise enough to send out the right type of people and within the Connections portfolio we do not suffer the consequences of it.

It was announced that you could pick up or register for a free certification voucher during IBMConnectED because there wouldn’t be a certification lab at the conference. I would like to thank Daniel Brix for chasing IBM ICS support together and to manage to register myself for such a voucher.

Counting the Notes client phrase

Out of curiosity I counted Tuesday the phrase “Notes client” in presentations. This was rare.

notes client counter

The session from Chris Miller came out as the winner in this ‘challenge’.

Final thoughts

I enjoyed my conference and be able to meet a lot of people with similar interests. From a developer perspective I think the conference was nevertheless a bit poor. I thought IBM would focus in this ConnectED version more on technology and less on softer sections like adaption. The app dev sections were too scarce to my opinion.

The move to more sessions in Swan with smaller rooms caused that some rooms were full and people could not attend it. It happened for me once for the session on internet security. You happen to pay an considerable amount of money for an event in, what IBM calls an intimate setting, and you cannot attend a session. How poor for return for your investment!

Should Notes client customers be uncomfortable about IBM Verse? From what I understood IBM Verse is just a different rendering machine for your inbox adding to features from Connections and Analytics. So it should not be a replacement for the Notes client. But the fact that IBM could not tell anything on the Notes client should worry you. IBM spilled another year on the Notes client roadmap it seems.

Jeff Schick may call he “loves the Notes client”. Is he willing to tell this hooked on a lie detector?

Using XControls for developing cards-based UI for mobile and desktop applications

Introduction

For a project I reviewed several frameworks to deliver a web interface. Among them was XControls which is a project on OpenNTF. XControls promises to deliver:

  • Faster design and assembly of modern user interfaces, using Card & List objects.
  • Easy the auto-optimization for smartphones, tablets and PCs.

bc-ipad-contacts-framed

XControls is built with Bootstrap and the Bootcards project.

Bootcards

Bootcards is a cards-based UI and it is built on top of Bootstrap. Unlike most other UI frameworks, it includes a dual-pane interface for tablet users.

The documentation describes well the structure and options for the two main objects, card and list (analagous to Forms and Views in traditional Notes development).

Basically you have 2 types of list:

  • Normal.
  • Detailed.

Below is an example of the Detailed list:

bc-list-detailed

And 8 types of cards:

  • Base.
  • Form.
  • Table.
  • Chart.
  • Summary.
  • Media.
  • File.
  • Rich text.

Below is an example of the Media card:

card-media-ios

Bootstrap

Bootstrap claims to be the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. We will not introduce this framework further.

Getting started with XControls

Part of the documentation for XControls is the Getting started page which will walk you through creating a new application using XControls. I suggest to read this first and keep the primer documentation side by side.

Download the files

The required files can be either downloaded from OpenNTF or Github. Unfortunately XControls is not available as a plugin for your XPages development so you need to copy the required files manually in your existing project/NSF or you can use the provided NTF as a starter-kit for a new project.  The files are:

  • All custom controls starting with UnpBoot naming.
  • All Xpages starting with Unp naming.
  • All Resources\Files.
  • The”blank” theme (set this as application theme in XSP Properties file).

After that you are ready to develop the UI for your application! A recommended tip is to install the sampler application provided with the OpenNTF download and open that one in a browser and Domino Designer.

Test: Notebook/Journal

For my review I decided to apply the XControls methodology on a simple existing Notes application: the Notebook. This application allows you store simple documents which can combine rich text and file attachments. You are also able to ‘tag’ these documents by applying categories.

I will describe the steps taken to apply the XControls cards-based UI to this application.

Step: Copy the required files

The documentation does not describe to copy the unpCommon server-side javascript library.

Step: Create XPage unpMain

When creating an application, if it is going to be used on Teamstudio Unplugged mobile devices then we recommend that the home XPage is called UnpMain. Otherwise you are free to name your XPage.

Step: Add UnpBootResources

Every XPage that will be opened by the end-user needs the UnpBootResources custom control added. This adds CSS, JavaScript and Server Side JavaScript to your application.

<unp:UnpBootResources></unp:UnpBootResources>

Step: Create a common application layout

To provide a common application layout the Common Header and Common Footer custom controls should be included in the XPages that are accessible by the end-user.

Common Header

In case you want the app to develop for Mobile and Desktop then add a UnpBootNavigator and UnpBootHeader.

  • UnpBootNavigator: for mobile (the so-called ‘hamburger’ menu).
  • UnpBootHeader for desktop.

Also define the navitems in UnpBootHeader.

<unp:UnpBootHeader title=”${javascript:return @DbTitle()}”>
<unp:this.navitems><![CDATA[#{javascript:[
{label: “All Entries”, hasSubMenu: false, page: “/UnpMain.xsp”, icon: “fa-database”},
{label: “By Category”, hasSubMenu: false, page: “/vwCategory.xsp”, icon: “fa-list”},
{label: “By Entry Date”, hasSubMenu: false, page: “/vwEntryDate.xsp”, icon: “fa-calendar”},
{label: “Trash”, hasSubMenu: false, page: “/vwTrash.xsp”, icon: “fa-trash-o”}
]}]]></unp:this.navitems>
</unp:UnpBootHeader>

unpl_header

<unp:UnpBootNavigator>
<unp:this.menuitems><![CDATA[#{javascript:[
{label: “All Entries”, hasSubMenu: false, page: “/UnpMain.xsp”, icon: “fa-database”},
{label: “By Category”, hasSubMenu: false, page: “/vwCategory.xsp”, icon: “fa-list”},
{label: “By Entry Date”, hasSubMenu: false, page: “/vwEntryDate.xsp”, icon: “fa-calendar”},
{label: “Trash”, hasSubMenu: false, page: “/vwTrash.xsp”, icon: “fa-trash-o”}
]}]]></unp:this.menuitems>
</unp:UnpBootNavigator>

unpl_navigator

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized – size, color, drop shadow, and anything that can be done with the power of CSS. XControls supports Font Awesome icons everywhere.

As you can see in the code above Font Awesome is for example used in the common header.

Common Footer

In case you want to include synch (for when running on Unplugged) add the UnpBootFooter as the common footer. You can also apply tabs in the footer if desired.

<unp:UnpBootFooter synctype=”none”>
<unp:this.tabs><![CDATA[#{javascript:[
{label: “Google”, hasSubMenu: false, page: “http://www.google.com&#8221;, icon: “fa-google”},
{label: “Like us”, hasSubMenu: false, page: “http://www.facebook.com/infowaresweden&#8221;, icon: “fa-facebook”}
]}]]></unp:this.tabs>
</unp:UnpBootFooter>

unpl_footer

 

Best practice tip

Since you will place the application layout just created across multiple XPages it is wise to store them in re-usable custom controls e.g. commonheader and commonfooter.

Step: Create the first content list

In the navigation we have declared that the initial XPage shall contain the All Entries overview. This overview simply lists the documents in a flat structure. You can use the UnpBootFlatView custom control for this.

Apply wrappers

To layout the content according to the bootcards definition apply a wrapper for the content:

<div id=”main” class=”container bootcards-container”>
<div class=”row fullheightrow”>
<!– add your list –>
<div id=”doccontent” class=”col-sm-7 bootcards-cards hidden-xs”>
<!– add your initial content e.g. a card–>
</div>
</div>

In the dual pane UI the target for dropping card content will be the div with ID doccontent.

Apply a list

<unp:UnpBootFlatView viewname=”($All)” summarycolumn=”$52″
numberofrows=”20″ newlink=”entry.xsp” xpagedoc=”UnpMain.xsp”
title=”All Entries” ajaxload=”Yes”>
</unp:UnpBootFlatView>

A description for all the available properties for the UnpBootFlatview can be read here: link. Property xpagedoc defines the xpage to load documents with, by default this would be the same as the current XPage.

Below is the result (only 2 documents in the database at the moment):

unpl_list

 

Below is the result when clicking on the Add link:

unpl_newentry

The XPage entry.xsp will be opened in a dialog. For now entry.xsp contains an unconfigured Form Editor custom control only. As you can see this requires more work.

 

 

Apply a Form Viewer

A Form Viewer is a wrapper that allows you to display document data inside a card. I created a custom control named docviewer and placed a UnpBootFormViewer inside it and configured it as followed:

<unp:UnpBootFormViewer editxpagewithajax=”yes”
formname=”JournalEntry” title=”Notebook Entry”
titleiconfield=”thumbnail” showbuttons=”true”
editxpagename=”entry.xsp”>
<unp:this.footertext><![CDATA[#{javascript:var id = context.getUrlParameter(“documentId”);
if (id != “”){
var doc:NotesDocument = database.getDocumentByUNID(id);
if (doc !=null){
var date = doc.getLastModified();
return “Last modified: ” + date
}
}}]]></unp:this.footertext>
<xp:this.rendered><![CDATA[#{javascript:context.getUrlParameter(“documentId”) != “”}]]></xp:this.rendered>
<xp:this.facets>
<xp:panel id=”list-group” xp:key=”facet_1″ styleClass=”panel”>
<div class=”list-group”>
<div class=”list-group-item”>
<label>Subject</label>
<xp:text id=”subject” tagName=”h4″ styleClass=”list-group-item-heading”>
<xp:this.value><![CDATA[#{javascript:docview.getItemValueString(“Subject”)}]]></xp:this.value>
</xp:text>
</div>
<div class=”list-group-item”>
<xp:label value=”Category” id=”lblCategory” for=”category”></xp:label>
<xp:text tagName=”h4″ id=”category” value=”#{docview.Categories}” styleClass=”list-group-item-heading”></xp:text>
</div>
<div class=”list-group-item”>
<xp:label value=”Date” id=”lblDate” for=”date”></xp:label>
<xp:text tagName=”h4″ id=”date” value=”#{docview.DiaryDate}” styleClass=”list-group-item-heading”></xp:text>
</div>
<div class=”list-group-item”>
<xp:label value=”Content” id=”lblCnt” for=”content”></xp:label>
<xp:text tagName=”h4″ id=”content” value=”#{docview.Body}” styleClass=”list-group-item-heading” escape=”false”></xp:text>
</div>
</div>
</xp:panel>
</xp:this.facets>
</unp:UnpBootFormViewer>

Again the entry.xsp is set to offer the document in edit mode (in a dialog). It appears that docview is the representation of the document. If you want to use data from the document outside the facet e.g. in the card footer you seem not to be able to refer to docview.

Below is an example of a selected document from the list:

list_docview

If you select Edit the document is presented in a dialog via XPage entry.xsp which is still empty. Let’s work on that one right now!

Apply a Form Editor

A Form Editor is a wrapper into which you can insert form fields for creating and editing documents. Fields can include auto clearing, type ahead, date pickers, numbers and rich text.

Below is the code that I included in the Xpage entry.xsp which is shown in dialog boxes when editing or creating a new document:

<unp:UnpBootFormEditor showbuttons=”true”
viewxpagename=”UnpMain.xsp” title=”Entry” formname=”JournalEntry”
footertext=”You can use your Notebook as a diary, to store meeting minutes or status reports, or simply as a place to create and store draft documents until they are ready for publication.”>
<xp:this.facets>
<xp:panel xp:key=”facet_1″ id=”list-group”>
<div class=”form-group”>
<xp:label styleClass=”col-xs-4 control-label” for=”subject” value=”Subject”></xp:label>
<div class=”col-xs-8″>
<xp:inputText id=”subject” value=”#{docedit.subject}” styleClass=”form-control required”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Subject”></xp:attr>
</xp:this.attrs>
</xp:inputText>
<a href=”” class=”bootcards-clearinput”>
<i class=”fa fa-lg fa-times-circle”></i>
</a>
</div>
</div>
<div class=”form-group”>
<xp:label value=”Date” id=”datetime_dairydatelabel” for=”dairydate”
styleClass=”col-xs-4 control-label”>
</xp:label>
<div class=”col-xs-8″>
<xp:inputText id=”dairydate”
styleClass=”form-control”>
<xp:this.attrs>
<xp:attr name=”datevalue”>
<xp:this.value><![CDATA[#{javascript:try{
var date:lotus.domino.local.DateTime = docedit.getItemValueDateTime(‘DiaryDate’);
return date.toJavaDate().getTime();
}catch(e){
return new Date().getTime();
}}]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type=”date”
dateStyle=”short”>
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>

</div>
</div>
<div class=”form-group”>
<xp:label styleClass=”col-xs-4 control-label” for=”Categories” value=”Category”></xp:label>
<div class=”col-xs-8″>
<xp:inputText id=”Categories” value=”#{docedit.Categories}” styleClass=”form-control required”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Category”></xp:attr>
</xp:this.attrs>
</xp:inputText>
<a href=”” class=”bootcards-clearinput”>
<i class=”fa fa-lg fa-times-circle”></i>
</a>
</div>
</div>
<div class=”form-group”>
<xp:label value=”Content” id=”biolabel” for=”content” styleClass=”col-xs-4 control-label”>
</xp:label>
<div class=”col-xs-8″>
<unp:UnpBootRichTextEditor fieldname=”Body”></unp:UnpBootRichTextEditor>
</div>
</div>
</xp:panel>
</xp:this.facets>
</unp:UnpBootFormEditor>

Notes:

  • For the viewxpagename property I have chosen the UnpMain.xsp Xpage, this is the XPage to open after saving the document. Normally this would be the same as the current XPage.
  • The date field is bound to a date-picker.
  • For the rich text field I included a UnpBootRichTextEditor custom control. This will give the field some edit options.

Below is an example of the result. As you can see I did not at so many bells & whistles to the form editor (yet) to improve usability:

unpl_newentrydate

Step: Create the categorized content list

Can you imagine a Notes application without a categorized view? Probably not. In XControls you seem to have 2 options:

  • A flat list.
  • An accordion list.

A flat list for categorization, really? If you bind the UnpBootFlatView custom control to a categorized view as in the example below, the categorized view will be displayed as a flat list, but with documents/entries grouped in the provided categories:

<unp:UnpBootFlatView title=”Entries By Category”
summarycolumn=”$52″ viewname=”By Category” numberofrows=”20″
ajaxload=”Yes” detailcolumn=”$44″ xpagedoc=”vwCategory.xsp”
newlink=”entry.xsp” footertext=”A Flat List but with Categories :-?”>
</unp:UnpBootFlatView>

Below is an example of the result:

unplflatlistcategorized

Accordion list

However, if you want to apply a collapsible Notes-a-like feature, you can choose the UnpBootAccordion custom control to provide an Accordion list.

<unp:UnpBootAccordionView title=”Dates” summarycolumn=”$39″
viewname=”By Diary Date” expandfirstcategory=”no” ajaxload=”Yes”
loaddocumenttarget=”doccontent” detailcolumn=”$44″
xpagedoc=”vwEntryDate.xsp” newdatatarget=”#editModal”
newlink=”entry.xsp”>
<unp:this.footertext><![CDATA[#{javascript:var date = @Date(@Today());
return “Today is: ” + date.toDateString()}]]></unp:this.footertext>
</unp:UnpBootAccordionView>

Below is an example of the result:

unplaccordion

The ‘categories’ are collapsible. Note that I had to modify the column value for the date: @Text(DiaryDate).

unplaccordioncollapsed

Summary

So far my initial review took. It seems fair enough to say that XControls enables you to deliver a dual pane cards-based UI for your Notes application without too much amount of development time.

I did explore many other features the framework offers (calendaring, carousels, charts) but it is definitely an OpenNTF project to keep an eye on. Especially if you are not capable of running a full blown solution like Worklight or you want to test early feedback for delivering existing Notes applications to mobile devices.

Getting frustrated with Eclipse & Liberty server

I am trying to run a lab to install a custom app in connections cloud. Only I have a problem with Eclipse and installing a local Liberty server. For another project I performed the Liberty installation earlier. Piece of cake! But for this project I started with a clean sheet: re-installed Eclipse and when I choose to install Liberty server from a repository Eclipse (Lunar 4.4.1) simply collapses.

As a check I installed Eclipse and a Liberty server on a clean OS and I do not have the same problems there. Do you recognize this?

install liberty eclipse 01

After this screen it goes wrong. I choose no additional add-ons and select Next
install liberty eclipse 02

*crying* I never get to this next step.
install liberty eclipse 03

install liberty eclipse 04

install liberty eclipse 05

install liberty eclipse 06

 

As I said, it worked before and it was easy as pie :-?