I Like Bubble Commenting

Strange subject title isn’t?

I have created a repository of my bubble/social speech layout, so if you want to have a closer look and implement it yourself then you are free to go.

I updated the @mention implementation so you get a nice icon in front of the name:

mention20

In order to have icons I updated my LotusScript agent to add a URL to an image in the PhotoURL field of the Person form in the FakeNames.nsf. For now I stored the icons in the NSF but in case you have a directory you use the reference to images from there.

I have also added an updated version to Like/Unlike comments, in stead of SSJS now most of the logic resides in the LikeController class. When you hover over the icon you get a list presented with people who have liked the comment.

likes_hover_icon

Ofcourse nothing is stress-tested but I have not seen major issues so far. I hope you like it and get inspired to modernize your IBM Notes applications !

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

A modern commenting view in XPages

Introduction

In the old days you a typical commenting feature was something with a form and a view. Typically you could read a list of comments in a historical (flat) order and on the bottom you had the form to enter your comment. Something like in the IBM Domino blog template.

domino-blog

With the rise of social and mobile it became more important to be able to comment-only so the form moved to the top and the list of comments became sorted in the opposite order (Youtube).

Discussions are still displayed in a thread but since threads are less friendly on a mobile device a more what’app like chat display. But these are more instant messaging apps, similar to Slack or IBM’s upcoming Toscana.

slack

My idea: welcome to the bubble

So what can/should we do to modernize the display of the comment feature in our Notes/XPages application?

Well mainly we still have a top level object (TLO) where people comment on. To stimulate people to comment the form should be close to this TLO. We can promote the interaction between a user and others and provide some form of “bubble speech” experience and (ofcourse) the option to “like” a comment.

That would bring us to something more like this:

social_comment

 

Notice on the left you see the comments I have made and on the right comments made by others. The latest comment is displayed first and mines are a bit more outstanding using a background-color.

Now how it’s made

To come to this solutions I am using the following technologies:

  • XPages
  • Java
  • SSJS
  • Bootstrap
  • PrettyTime
  • CSS
  • JavaScript / mention JS

Note that in a previous post I described how to add @mention autocomplete like Facebook, Twitter & Google+ to your XPages app. So I will not discuss in this post how to build the form to comment.

Here is a general outline of what we are going to build:

outline

Step 1 – basic structure; a repeater with a panel

step01

First I have a repeat control which is bound to an ArrayList containing JsonObjects. This approach you can find in my Bildr project on OpenNTF (shameless plug).

I also added an infinite scroll function. You can read about how to set that up in this post.

The panel has a computed styleclass. The style defintion “right” does nothing more than a  text-align: right. This makes sure the text in the content is … aligned right.

Step 2 – adding a user icon

Humans are visually oriented and idle so nothing wrong making our display attractive with a user icon.

step02

In this example I am just displaying some random icons, but if you have a corporate directory with user profiles containing icons you should embed them here.

The pull-left and pull-right classes are from Bootstrap. My comments are pulled to the left, comments from others to the right.

Step 3 – the media body

Next item that we add is a div with a media-body class. It contains out of 2 sections: the content of the comment (text written) and some meta-data (date, author). I also added a “like” link which is inspired by Thomas Adrian’s Intrapages app also available on OpenNTF.

step03

(Guess I don’t need the attributes here…). Here is the part of the meta-data:

step03b

First I display the Author name, only for comments written by others. In order to make the date more human friendly to read I am using PrettyTime. In the past I have blogged about how to use it.

For the remove link I am using the userbean to check if I can delete documents in the database and if the comment is mine: (@UserName() == obj.From) && (userBean.canDeleteDocs == true)

For the event I check and ask if I am sure that I want to remove the entry and then I simply remove it by UNID:

step03c

For the “like” button I would like to point to Adrian’s example in his Intrapages project. I made however the exeption to store the likes in a separate document, so not in the comment. By this way I can tighten my security model. Everybody has the role of [liker] and author access. So everybody can update a like document and not the original comment document.

The like function uses the cookie management principles described here. It stores the username:

userCookie = new javax.servlet.http.Cookie(“userid”, @UserName());

I have set the duration of the cookie as long as the session is active:

//Cookie.setMaxAge(-1) will make the cookie expire after the browser is closed
userCookie.setMaxAge(-1);

But beware that the cookie still exists when users logout and login with a different username-password combination !!

So I have a counter for the number of likes, and depending on my activity I have a like or unlike link.

Ready! Some CSS whistles

After we have added some more (basic) CSS we are done! As a result we have created something much more modern that the old school comments display as we know from the IBM Domino Blog template.

If you are interested and want to receive the details of this setup I welcome you to send me a message and we can exchange code.

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

 

 

 

 

Presentations from EntwicklerCamp 2012 available

I have experienced that IBM has some problems linking to their material that lies out in the open, but I hope this post does not cause the same kind of trouble. I also know the solution in case needed: contact the content publisher to remove the files…

Nevertheless Entwicklercamp sounds like a excellent technical conference and for those of you who have no problems with reading a bit of German (not all presentations are in German, by the way) here are some interesting presentations:

Track 0 – Session 1 – Eröffnungssession – Rudi Knegt (link)

Track 0 – Session 2 – Opening Session – Phil Riand (link)

Track 0 – Session 3 – Speeddemoing – Diverse (link)

Track 0 – Session 5 – Closing Session: Ein (grausamer Selbstversuch) – 5 Monate ohne Lotus Notes – Werner Motzet

“Ein (Arbeits-)Leben ohne Lotus Notes” / “Ein (grausamer Selbstversuch) – 4 Monate ohne Lotus Notes” (link)


Track 1 – Session 1 – XPages – 1 – Grundlagen – Ulrich Krause (link)

Track 1 – Session 2 – XPages: Practical Ideas for Converting Existing Notes Applications – Matthew Fyleman (link)

Track 1 – Session 3 – XPages – 3 – eXtension Library – Viagra für die XPages – Ulrich Krause (link)

Track 1 – Session 4 – XPages – 4 – IBM oneUI + MyTheme = myUI – Manfred Meise (link)

Track 1 – Session 5 – XPages – 5 – Wie mache ich meine XPages Applikationen ‘social’? – Niklas Heidloff (link)

Track 1 – Session 6 – XPages – 6 – XPages Extensibility API – going deep – René Winkelmeyer (link)

Track 1 – Session 7 – Zähme den Tiger – Java-Entwicklung in Notes und Domino – Bernd Hort (link)

Track 1 – Session 8 – XPages – 8 – Nutzung des Dojo Toolkits zur Optimierung bestehender Notes-Web-Anwendungen – Matthias Bierl (link)


Track 2 – Session 1 – Extending Lotus Notes – Widgets, Livetext, Plugins – Detlev Poettgen (link)

Track 2 – Session 3 – Agile Softwareentwicklung mit LotusNotes – Werner Motzet (link)

Track 2 – Session 4 – Ich weiß was du diesen Sommer tun wirst – Gregory Engels (link)

Track 2 – Session 5 – Erfolgreiches Projektmanagement mit agilen Methoden – Christian Habermueller (link)

Track 2 – Session 6 – Make the impossible possible with XPages – Frank van der Linden (link)

Track 2 – Session 7 – Connect your Lotus Notes app to the Activity Stream with XPages – Frank van der Linden (link)

Track 2 – Session 8 – Keine Angst vor großen Tieren – Peter Klett (link)


Track 3 – Session 1 – Rediscover the Power of LotusScript in Notes/Domino 8.5 – Rocky Oliver (link)

Track 3 – Session 2 – Die besten Open Source Projekte von OpenNTF – Niklas Heidloff (link)

Track 3 – Session 3 – Richtig(er) Kommunizieren! – Wie bringe ich meine Botschaft rüber? – Jürgen Kunert (link)

Track 3 – Session 4 – XPages und Domino App Dev Erweiterungen – Phil Riand und Niklas Heidloff (link)

Track 3 – Session 5 – Turbocharge Development in Notes/Domino 8.5 – with @Formulas! – Rocky Oliver (link)

Track 3 – Session 6 – Mobiler Zugriff auf Notes Daten – Matthias Schneider (link)

Track 3 – Session 7 – Es gibt keine Ausreden mehr – eGit im DDE : Versionskontrolle leicht gemacht – Holger Chudek (link)

Track 3 – Session 8 – Using the XPages Mobile Controls… and looking at alternatives – Rich Sharpe (link)


Track 4 – Session 1 – Security in Notes – Manfred Meise (link)

Track 4 – Session 2 – Workflow – Richtig analysieren, dokumentieren und schlüssig hinterfragen – Christian Habermueller (link)

Track 4 – Session 3 – Lotus Protector programmieren – Matthias Schneider (link)

Track 4 – Session 4 – WebServices unter Notes/Domino – Tim Pistor (link)

Track 4 – Session 5 – Hilfe, ich habe geerbt! – Bernhard Köhler (link)

Track 4 – Session 6 – NoSQL-Datenbanken – ein Überblick – Karsten Lehmann (link)

Track 4 – Session 7 – Notes und die Zeit – Bernhard Köhler (link)

Track 4 – Session 8 – Schnittstellendesign mit dem Tivoli Directory Integrator – Am Beispiel SAP – Andreas Artner (link)


In case you are a bit lazy or dont care about bandwidth: <here> you can find the presentations archived together by track…

There are also some hands-on sessions available:

Hands-On 1 – Javascript – die ersten Schritten – Manuel Nientit (link)

Hands-On 3 – XPages – the first Steps 1 – Howard Greenberg (link)

Hands-On 4 – XPages – the second steps 2 – Howard Greenberg (link)

Hands-On 5 – Signierung und Verteilung von Plugins für den Notes Client – Detlev Poettgen (link)

Hands-On 6 – LotusScript – so einfach geht es los – Peter Klett (link)

Hands-On 7 – Mobiler Zugriff auf Notes Daten – Matthias Schneider (link)

Hands-On 8 – XPages Extensibility API – first steps – René Winkelmeyer (link)

Btw, all links were collected from this source.