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 !

 

 

 

 

Advertisements

Adding Twitter Bootstrap to the IBM Domino Blog template

Our current design layout for a blog application was mainly based on the ‘by default’ design from the ‘early days’. A three column layout with a header and footer section.

(I guess you recognize this)

All nice wrapped in a HTML table to structure the layout. Maybe not the best and convenient solution, but quiet ‘solid’ compared with CSS layouts.

Nevertheless users were complaining, mainly because they import large images, which look nice on large screens, but not so nice on smaller ones. In such cases the right column was only visible when scrolling.

We have been so nice to add some corporate design guidelines flavours to the design, so users can recognize themselves when publishing within and beyond our corporate walls.

I guess we are talking now years ago, in the days that there were no mobile visitors with smartphones and tablets.

Time to move-on!

Since I noticed some buzz in the collaboration community around Twitter Bootstrap and responsive web design I decided to take a look around to see if we could bring the Domino template to the next level.

I did not take so much time to compare Twitter bootstrap to other frameworks (I leave that up to the pro’s) but after taking a look around, this framework seemed to be pretty solid and includes some other valuable components (which do not win from our oneUI components!).

Here is a summary how I implemented Twitter Bootstrap.

  • Update the Page  Templates documents to support the grid layout.

Here an example how most Page Templates look like (this is code for the homepage)

<!DOCTYPE html>
<html lang=”en”>
<body data-spy=”scroll” data-target=”.bs-docs-sidebar”>

<$DXTemplateBlock Name=”HTMLTop”$>
<$DXTemplateBlock Name=”Banner”$>
<div class=”container container-body”>
<div class=”row-fluid”>
<div class=”span3″>
<$DXTemplateBlock Name=”LeftSideBar”$>
</div>
<div class=”span9″>
<$DXContent$>
</div>

</div>
</div>
<$DXTemplateBlock Name=”HTMLBottom”$>

</body>
</html>

As you can see I have choosen for a ‘2 column layout’. Basically because I did not get the ‘holy 3 column’ layout properly established (with a responsive design). If you got the proper solution, please drop a line in the comments..

  • Update the Block Template documents.

Here is the code for my ‘top navbar’ section:

<head>
<link rel=”icon” type=”image/png” href=”../dx/favicon.ico/$file/favicon.ico” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title><$DXTitle$></title>
<!– HTML5 shim, for IE6-8 support of HTML5 elements –>
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
<![endif]–>
</head>

<!– Navbar ================================================== –>
<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”navbar-inner”>
<div class=”container”>
<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”brand” title=”<$DXTitle$>” href=”#”><img src=”../dx/logo.gif/$file/logo.gif” border=”0″></a>
<div class=”nav-collapse collapse” id=”topnav”>
<ul class=”nav”>
<li class=””><a href=”#”>Home</a></li>
<li class=””><$DXLogin$></li>
<li class=””>
<$DXAdmin$>
</li>
</ul>
</div>
</div>
</div>
</div>

The HTML5Shim code is needed to insert the HTML5 header and footer elements, which IE7 does not support.

Here is the code for my ‘header section’:

<!– Subhead ================================================== –>
<header class=”jumbotron subhead” id=”overview”>
<div class=”container”>
<div class=”row”>
<div class=”span3″ style=”margin-top:20px;”><img id=’id_photo’ class=’left’ src=’../dx/profileNoPhoto.png/$file/profileNoPhoto.png’ alt=’logo’ title=’logo’ height=’51’ width=’51’ /></div>
<div class=”span6″>
<h3><$DXTitle$></h3>
<h5><$DXDescription$></h5>
</div>
</div>
</div>
</header>

As you can see, you really need that HTML5Shim code here!

Here is the code for my ‘left column’ containing the search bar and navigational links (tag cloud, recent entries):

<!– Docs nav ================================================== –>
<div class=””>
<form class=”search” style=”margin:10px 0 0 0;” title=”Search” method=”get” id=”searchForm” action=”javascript:doSearch(”,”,”,”);”>
<input title=”Search” type=”text” alt=”Search” style=”width:180px;” value=”Search” name=”s” id=”Query” onblur=”if(this.value==”) this.value=’Search’;” onfocus=”if(this.value==’Search’) this.value=”;” />
<input type=”image” src=”../search.gif” title=”Search” alt=”Search”/>
</form>
</div>

<div>
<h4>Hot Topics</h4>
</div>
<ul class=”nav nav-list bs-docs-sidenav”>
<$DXHighlighted$>
</ul>
<div>
<h4>Tags</h4>
</div>
<div class=”tagCloud”>
<ul><$DXTagCloud$></ul>
</div>

<div>
<h4>Latest entries</h4>
</div>
<ul class=”nav nav-list bs-docs-sidenav”>
<$DXRecentSubjects$>
</ul>
<br/>

I wonder how I could get this column BELOW the second, content column, when the media queries kick in for e.g. smaller devices. I have not find out yet how to do this (again you may contribute here to improve my design)…

Then my ‘main / content column’:

<div id=”content”>

<a id=”mainContent” name=”mainContent”></a>

<div id=”entries” class=”entry”>

<div class=”page-header”>
<h3><$DXSubjectLink$></h3>
<p class=”pull-right” width=”80″ height=”80″ alt=”<$DXAuthor$>”/><$DXAuthorImageLink$></p>
<h6><$DXAuthor$> &nbsp;<span class=”date”><$DXLocaleLongDate$> <$DXTime$></span></h6>
<p style=”font-size:0.9em;”><img id=’id_photo’ src=’../dx/tag_blue.png/$file/tag_blue.png’ alt=’tags’ title=’tags’ height=’16’ width=’16’ /><$DXCategory$></p>
</div>
<p><$DXItemContent$></p>
<h4>Comments [<$DXCommentCount$>]</h4>
<p><$DXInlineComments$></p>
<commentblock>
<ul class=”actions inlinelist”>
<li class=”first”><$DXInlineCommentLink$></li>
</ul>
</commentblock>
<br/>
</div>

</div>

Nothing strange here. Therefore a preview:

Finally the footer section. This contains now mainly the navigational links that were displayed in the right column. For performance I load the JQuery and Bootstrap scripts at the end:

<!– Footer ================================================== –>
<footer id=”bottom-nav” class=”footer”>
<div class=”container”>
<p class=”pull-right”><a href=”#”>Back to top</a></p>

<div class=”row”>
<div class=”span3″>
<h4>Feeds</h4>
<ul class=”footlink”>
<li><img src=”../dx/Feed.png/$file/Feed.png” border=”0″><$DXRSS$></li>
<li><img src=”../dx/Feed.png/$file/Feed.png” border=”0″><$DXRSSComments$></li>
</ul>
</div>
<div class=”span3″>
<h4>Blog Roll</h4>
<ul class=”footlink”>
<$DXLinks$>
</ul>
</div>
<div class=”span3″>
<h4>Recent</h4>
<ul class=”footlink”><$DXRecentSubjects$></ul>
</div>
<div class=”span3″>
<h4>Archive</h4>
<ul class=”footlink”><$DXMonths$></ul>
</div>
</div>

<p><$DXCopyright$></p>
</div>
</footer>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script src=”bootstrap.min.js/$file/bootstrap.min.js”></script>

Stylesheets

I noticed that default a stylesheet called global.css is loaded (I am not sure where that comes from, but I see it in the page source – please get me some proper system documentation, IBM).

So in this stylesheet I load Bootstrap and it’s responsive part:

/* First, pull in Bootstrap’s stylesheet */
@import url(bootstrap.min.css/$file/bootstrap.min.css);
@import url(bootstrap-responsive.min.css/$file/bootstrap-responsive.min.css);

/*
Custom Blog Stylesheet
*/
/* Now the custom styles */

body{
font-size:0.8em;
font-family:Verdana,sans-serif;
background-color:#FFFFFF;
background-image:url(‘../dx/grid-with-white.png/$file/grid-with-white.png’);
background-repeat:repeat scroll 50%;
}

For the top navbar we have guidelines to use a gradient style. I noticed that IE, Firefox and Safari (remember our mobile target) behave a bit different here so I stated:

.navbar-inverse .navbar-inner {
overflow:auto;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#e1e1e1);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#e1e1e1)”;
background: -moz-linear-gradient(rgba(245, 245, 245, 0.6), rgba(204, 204, 204, 0.6)) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e1e1e1));
border-bottom: 1px solid #DDD;
font-family:Arial,sans-serif;
color: #555555;
}

For the footer we use a gradient image:

#bottom-nav{
font-size:0.9862em/1.5em Verdana,sans-serif;
font-family:Verdana,sans-serif;
background-color:#E1E1E1;
background-image:url(‘../dx/footer-grid.png/$file/footer-grid.png’);
background-repeat:repeat scroll 50%;
}

Before having the HTML5Shim script applied IE7 refused to load an image for the background. Took some time to have that figured out.

Some final thoughts

Am I happy? For sure! In less than a day I transformed the blog application into a compatible site for mobile devices. No data migration to any new system/application or whatever!

Users can continue to work off-line (still a killer feature) just as they are writing a simple mail message. Import pictures taken at site visits all around the world and share it with their colleagues (occasional we notice also pictures from company parties, birthdays and social celebrations).

Blog owners can still modify the look & feel of any blog application, without disturbing anything for other blog applications. I heard stories of vendors that do not recommend to modify the common page of their collaboration platform, duh!

It would be nice if IBM would lift up the design of the DOMINO blog template to 2012 (2013 is also fine for me) with XPages and connection points to other social services.

If not, at least they can provide a complete, proper documentation of the application, so we understand what we implement in our environment. But this last request seems like ‘shouting to the wind’ (a Dutch saying).

Note: this was my first encounter with Twitter Bootstrap, so suggestions for improvement are more than welcome!

Cheers!

Domino blog template – automatic page name

I started a discussion on OpenNTF on the project place for the Domino Blog template: (link)

I would expect that the setting would create a bit more user-friendly url’s but somehow this feature does not seem to work as expected. Has anyone a clue why this does not work on my blog app? It seems to work for others

I notice e.g. for Swedish names including öäå the usage of user initials could cause problems using the default page name syntax generation…

Manual: Administrating the Domino Blog template (part 2, still incomplete)

I have described the options to administrate the Domino Blog template a bit further. However it is still incomplete. To make it a bit more attractive to read in the next version I will add descriptions how to alter the layout and how to enable commonly used options and their impact.

20100907 Manual_ Administrating the Domino Blog Template

The further I analyze the application the less in favor I become to offer it as a promoted solution to my customers. Mainly because administration is:

  • messy and spread out over the application
  • hard to understand (also due to technical character)
  • undocumented or not clearified with an understandable examples
  • impacts of options are not clear

I guess too much options has been put into the application which makes the learning curve (too) long. I guess not many helpdesks are likely willing to support this application.

Manual: Administrating the Domino Blog Template (incomplete)

Today I have started to write down a manual which will contain as much information as possible to administrate and give support on the blog template provided by IBM.

In pieces I will post the manual here on this site.

The reason why I started writing a manual myself is that:

  • Documentation provided by IBM is divided over several sources (Wiki, Help.nsf, blogs)
  • Available documentation does not fully covering the complete aspect of what is in the template.
  • Hereby is giving support on the template to end-users (people who write posts and manage the application) too time-consuming and therefor inefficient.

Well you can see the manual as a protest to IBM’s lack of giving full end-user suppport on the templates they create or have created. I am also tired of hearing such complaints from others and complaining about it, since I do not have the feeling things will change at I.

(Lotus knows it’s a dirty job so someone else has got to do it)

Since I do not know all the ins and outs of the template so the manual surely will contain some blank entries and not cover the whole spectrum of managing the blog template.

With your help maybe someday we will get there.

Administrating the Domino Blog Template

When is the Domino Blog application book coming out?

Well there have been long discussions about Domino as an application platform. Summarized: Mail is just an application and there are some other great applications for the platform, I name here the Blog, Discussion, … templates.

Since Ed closed the discussion I just post some feelings here, maybe it might reach IBM.

Because IBM has positioned Notes mainly as a mail solution, the Mail application has been widely described in multiple user-books, video tutorials and so on.

But what about those other great applications?

Today I received a question from a customer that they want to use categories in the Blog template and if I would like to enable it. Errrrrr……

So I took from the shelf the Blog Template DX Tag documentation (pdf) and went through the configuration documents in the applications. Some options in the configuration are really abacadabra for me and demonstrate that you should not let a developer (sorry Steve) decide how to name the labels for configurable options.

It took me 1 hour to understand the options for using categories at some level but I still have some questions remaining to make it as nice as I want to have it. Enabling options in the Blog template spent should be doable for end-users but in reality it is not. I can not hand-over them the pdf and wish them all the luck.  So that is 1 hour I have to charge them, just to enable an function.

So IBM, if you take Notes serious as an application platform, provide some good free instructions (pdf’s, wiki’s, video’s) that cover the usage and administration of the templates you provide. Throwing templates over the wall (read: posting them on OpenNTF) without good manuals (end-user, application administrator) is very unprofessional and below your level.

ps when do I get to see the manuals for the Blog template?

Question on Domino Blog Template – Show full entry in RSS not working

Hi, I am facing a problem with getting full entries in the RSS feed for the blog template. Basically if I select ‘Yes’ as option the feed becomes empty.

You can read a description of the option here:

http://www.stevecastledine.com/sc.nsf/dx/ibm-lotus-notes-blog-template-rss-options?opendocument

Show Full Entry in RSS? (Content Encoded)
Default is “No”. If set to “Yes” then full content is sent with RSS feed rather than just a short abstract.

If I dig down in the agent (feed.rss) I read it uses the scriptlibrary DXRSS. In Sub StreamRSS2 I read:

If configdoc.config_rssfull(0)<>”No” And contentdoc.excludecontentrss(0)<>”Yes” Then

But an else statement is never further defined.

So I just wonder if the full entry option is ever implemented? The template we are using is the STd7Blog template delivered with 8.02. Are there upgrades available for the template?

Thanks in advance for your help.

Looking for user manual / documentation IBM Blog template

Hej,

I am wondering if someone took the time for writing a user friendly manual for beginning end-users of the  IBM Blog template?

The ‘using this application’ document does not support a good guidance for end-users.

For now I have just made an abstract of what is available in the Notes 8 Client Help.nsf ( Link ) and an abstract from posts on Steve Castledines Blog ( Link ), the last one is more for application administrators or (web) designers.

But in case you have a friendly description of the template including some screen-dumps I would be thankful if you sharing it!