New Lotus Notes Attachment Viewer 2.0.1 posted

The Attachment Viewer 2.0.1 for Lotus Notes is now posted on this site. I fixed a couple of problems reported and it looks like the Microsoft Office Converter EXE is now behaving a bit better. From the original post (click here), you may need to install the inter-op libraries for your version of MS Office in order to use it. You need to be running at least Lotus Notes 8.5.2 for this update.

Drag this to My Widgets in Lotus Notes

Continue reading

The Dojo Toolbar dijit

One of the best things about using a JavaScript framework like Dojo is getting something up and running very quickly. The dijit.Toolbar is no exception. You can get a very quick toolbar by just using the declarative method right in  your HTML. If you are using the declarative method then you need to make sure you parse the DOM on load, this is how you tell Dojo to parse on load:


To get some cool look and feel you should then include one of the base Dojo style-sheets in your code. The easiest way to do this is just make the entire <body> use the style sheet so all sub-elements will inherit it:

<body style="margin:0px; padding:0px;">

You will also have to define in your CSS the images you want to use for the buttons (if they are icon buttons). Make sure you specify a height and width!

.iconfilm {
   background-image:url(icons/filmstrip.png) !important;
   width: 22px;
   height: 22px;
.iconthumb {
   background-image:url(icons/thumbnail.png) !important;
   width: 22px;
   height: 22px;
.iconslides {
   background-image:url(icons/slides.png) !important;
   width: 22px;
   height: 22px;

Lastly, you just put the code directly in your HTML. Declaring the toolbar as the outer

and then each button individually. You could also include this inside of an XPage, JSP, or PHP file and conditionally show or not each button. Notice I use a and a connectId to attach a Dojo tooltip to each icon.

iconfilm" showLabel="false">
<span id="fs_tip" dojoType="dijit.Tooltip" connectId="toolbar1.filmstrip">Film Strip</span>
iconthumb" showLabel="false">
<span id="slides_tip" dojoType="dijit.Tooltip" connectId="toolbar1.slides">Slides</span>
iconslides" showLabel="false">
<span id="thumb_tip" dojoType="dijit.Tooltip" connectId="toolbar1.thumbnail">Thumbnail</span> </div </div>

This code was taken from the Attachment Viewer project on OpenNTF. You can download the project and see how the code works. Here is a screen shot of the toolbar in the Lotus Notes client:

Make sure you check out the awesome online documentation for the dijit.Toolbar!

As for a jQuery version of Toolbar, I couldn’t find one. I did find a really nice article that shows how to create a CSS based toolbar with some cool jQuery effects. Check that out and if you find an actual toolbar plugin for jQuery let me know.

Lord of the JavaScript frameworks, one framework to rule them all…

(in a slow deep voice) In a time of web 2.0, css3, and JavaScript, the average programmer is challenged to learn many technologies and patterns. The tide has turned and the world is changing, the inevitable is near. Websites across Middle Earth suffer from cross browser and web 2.0 compatibility. Somewhere, in the dark shadows of the web, a JavaScript framework was born. One framework to rule them all….Dojo. It wants to be found…

Ok, now back to reality.  And yes, I watched the extended version of Lord Of the Rings tonight.

So, I thought it fitting to give a Lotusphere update on the plugin development sessions I mentioned earlier. One of the projects I will be referencing is the Attachment Viewer project on OpenNTF. This is a slightly different kind of plugin, in that the content is embedded HTML, JavaScript, and CSS. The viewer actually uses the embedded web container from Lotus Expeditor – which is included in Lotus Notes 8.0 and above.

I have just finished the “Ultimate Attachment Viewer” implementation for OpenNTF. Since the default browser on Windows in Lotus Notes uses Internet Explorer I had to rely on Dojo in many areas for the different views. I will be posting the updated viewer on OpenNTF within the next week or so, so stay tuned. The primary additions are the new Dojo toolbar and the three view modes: Film Strip, Slide Show and Thumbnails.

Click on picture to see full

Tracking download counts

Today I installed a new plug-in to track downloads from my site.  I realized that while OpenNTF tracks downloads it does not really account for the user base as many users are not really interested in the code but more the function and end up just installing the widget from my site.  So the problem is I can not track how many people have installed the widget!  I scoured the WordPress site (actually it was a single search) and found what appears to be the most popular download counting plug-in – WP-DownloadCounter.  I actually enabled it earlier today and I am surprised I am already getting hits!  Here is a picture of the new widget for the WordPress dashboard:

I like how it makes the download URL’s easy to read.  For instance, the URL to download the Attachment Viewer is very easy to read:

One viewer to rule them all!

I have gotten tons of feedback on this site, in email, and from colleagues for how to support Office (both ODF and MS Office) attachment viewing with the OpenNTF Attachment Viewer project.  I put together a small demo of an interesting technique for supporting different kinds of viewers.  The idea is to make it preference based or hopefully, in the end, through some kind of automated way in code.  The first stab is of course a preference.  Check out the preference screen:

Suggested preference screen

I currently have two converters, with one more possibly on the way (Symphony or OpenOffice using UNO API’s).  The two current ones are very different indeed.  For the first one,  I am using some code borrowed from the Quickr team that converts basically anything to HTML.  It uses the KeyView technology that has been in the Notes client for a long time.  The second viewer, (the Microsoft Converter), is one that I coded while playing around with C# and the MS Office Interop API’s.  The biggest difference, outside of the output, is the one written in C# relies on Microsoft Office to be installed and that the Interop API’s also be installed – which I believe are by default, still have to verify that.  So if you have M$ Licenses then the C# converter might be for you.  If not, the KeyView one does in fact ship with Notes – ie. FREE!

In the video you can see I just put the output HTML from the local server into an iFrame to keep the full fidelity of the converters output.  I am actually still working through a few selection issues but for the most part it works pretty well.  The KeyView converter does not convert the files as nicely as the other viewer but it does a good enough job for preview.

Continue reading

Attachment viewer and OpenOffice

So there has been a lot of discussion both internally and externally about the attachment viewer and if it should support viewing Microsoft Office and Symphony files.  One solution would be to extend the attachment viewer that uses API’s to do the previewing of the files.  This of course would require Open Office to be installed on the desktop.  So I ask this question, is that even a viable option for companies at this point? What is the reality of relying on an open source office suite?  We could even use Symphony to do the conversion and preview but I am not confident enough people actually use Symphony (except IBM) on an enterprise level.  So what are you thoughts?  Feel free to comment here or email me privately.  I would be interested to hear direct feedback on this before I go off and attempt anything.

Pretty slick feature…

I got this very cool idea from Mary Beth Raven – user interface Goddess of Lotus. The concept is the attachment viewer is embedded into the Notes Mail template (as another component in the composite application) and hides and shows based on the cursor selection. This allows for the real-estate to stay large when typing or reading but if you want to quickly view the attachment the viewer shows.

Another neat piece you may notice, is the web application actually saves state!  I do this by accessing the Eclipse preferences from JavaScript using the more than cool BrowserFunction I mentioned a few weeks back.  So when the user selects different view modes the preference is automatically saved so when the view part is re-opened it goes back to the last view mode.

Continue reading

New Attachment Viewer posted!

You can NOW (thanks Kevin) download the Attachment Viewer I mentioned yesterday.  Not a lot in this release but it will help with performance in the Notes client when the viewer is minimized in the side-bar.  You can also install the viewer from the extensions.xml from yesterdays post.

– Fixed viewer to not process selection if view part is minimized
– Added a “pin” icon to the UI to pin an attachment

Pinning attachments

I was working one day and I used the attachment viewer to view a PDF a colleague had sent me.   Not realizing what I was doing, I switched back to the inbox to see what new email had come on. Guess what, the PDF disappears and a new selection was selected – I totally lost my place in the PDF. Doh..I just thought of a new cool feature!

I thought, how cool would it be if I could “pin” the attachment in the viewer so as long as its pinned the selected attachment never changes. This would allow me to navigate across many different documents and views and never lose the PDF I am reading. This was actually a dead simple feature and I hope to get this out on OpenNTF soon. I would be interested to hear if you think this is a good feature or not.

The pinning function is in the form of an icon that is put to the right of the page.  I just add a new boolean variable to the page and show the icons relative to its value:

function constructPin(){
 var headerArea = document.getElementById("header");

 if (_pinned){
      headerArea.innerHTML = "<img style="float: right;" title="Un-pin Attachment" src='icons/pinned-down.png' onClick="togglePin();"></img>";
      headerArea.innerHTML = "<img style="float: right;" title="Pin Attachment" src='icons/pinned-up.png' onClick="togglePin();"></img>";

The result is a clickable icon that toggles whether the current selection is pinned or not:

Pin Attachment

Unpin Attachment

Go ahead and install the following widget into your Notes client.  If you are not familiar with how to install the widget with the “extension.xml” below you can watch this video I posted that shows how to enable widgets and install the viewer.

Any and all feedback is greatly appreciated!

Attachment Viewer on Steroids

Ok, maybe not steroids but Dojo and CSS!

Lots of work on the attachment viewer.  Using Dojo, CSS and JavaScript I was able to give the viewer two new view modes with some eye candy in each.  I use CSS to have shadows and a tile mode.  Check out the three screen shots below, I will most likely be posting a video to show how the new views can be used.  Just remember, this is a 100% web based component in the Notes client.  You will notice I have three actions on the attachments – Open, View, and Share – which use the BrowserFunction to provide a custom experience in the rich client – otherwise it just uses the normal web semantics for launching.

I used Dojo for the slide show view.  I use the dijit.layout.StackContainer and then each attachment is placed into a dijit.layout.ContentPane.

For the thumbnail view I use basic CSS to accomplish this.  The two classes, border and thumb, give the experience of them being “thumbnails” and as the mouse moves over the div block it “selects” it with a new background color using the hover tag.

div.border {
    border: 1px solid #A0ACC0;
    height: auto;
    float: left;
div.thumb:hover {
   background-color: #ADD8E6;
   border: 1px solid #FFACC0;

Here are some screen shots of the three support view modes:

Film Strip

Slide Show