Wednesday, February 25, 2009

Quickr UI hacking

This week I was in a workshop at a customer where we discussed among others how to customize Quickr for Portal. They had some special requirements regarding the UI about which I'd like to write here.

One of their requirements was, to have a sidebar menu on the left-hand side containing the place navigation in the upper part of the sidebar and the functional elements below the navigation. They took the current Quickr for Domino look&feel as an example. I don't exactly know how the Quickr for Domino works, but I know that the Quickr for Portal works differently. The main problem is, that the PDM portlet (Library) in Quickr J2EE contains the entire toolbox as a right-side menu (with the "Create" button on top of if). So I needed to find a way to rip it off the portlet and place it in the right side navigation. I did this using JavaScript and it was actually only a couple lines of code.

First of all, create a place that uses a theme policy that displays the sidebar. Create a page that contains the library portlet (the one with the right sidebar). Then open the Default.jsp of the theme and search for the expression that includes the sidebar.

<%@ include file="./sideNav.jspf" %>

Place the following html snippet below this sidebar include.

<div id="injection-point"> </div>

Its important, that it is not a standalone html tag.
Now go to the end of the file and add the following script before the closing body tag:

<script type="text/javascript">
document.getElementById("sidebar").style.visibility = "visible";

You could see, that the visibility attribute of the sidebar is set to visible, this comes a long with a change in the styles.jsp where you'll have to add the following snippet
#sidebar {
visibility: hidden;

This prevents from showing the sidebar on the right side during page load and then jumping to the left side, when the rendering process is complete. The sidebar is simply not shown from the beginning. Now save the files and see what happens :)

The final result looks like this:

Using this technique of adding injection points to the theme and some javascript code that moves elements around, you could easily modify the entire look and feel. For a customization I did this week for a customer, I moved the Create button and the Action menu to the left bar, and the other sections to the right side (outside of the portlet area). I also modified the search box, which is completely generated by a JSP tag.

Friday, February 13, 2009

Pointing to a specific Activity using the Portal Bookmark portlet

Today we tried to create a landing page for a Portal with integrated Connections. The landing page should contain a link to give feedback. Since it is a PoC we'd like to use an Activity for collecting feedback to demonstrate the various usage possibilites for Lotus Connections. The link to the feedback activity should have been provided in the Bookmark portlet of WebSphere Portal. However, we encountered a minor issue for which we found a solution.

The problem was, that the URL to the Activity contained a comma character respectively the octet encoding of it (%2C). Although this format is conforming with URL RFC 1738 (paragraph 2.2.) the Bookmark portlet refused to accept this URL stating the URL was not valid.

However, we found a workaround for that. We created a Portal URL page pointing to the feedback activity and put this URL page underneath the Activities URL page in the portal page structure so that it remains invisble. We assigned a uniquename to this URL page pointing to the Feedback Activity and created a bookmark in the bookmark portlet that pointed to the Portal URL page for the Feedback Activity. Thats it. The uniquename is required, otherwise this URL page would not be selectable as portal internal page in the Bookmark portlet.

By the way, I like the approach of collecting feedback using an Activity. The users can comment on existing feedback, agree, disagree. The feedback can be given in a structured way, like technical feedback, opinions, enhancement requests, and the users could even post files. The receivers of the feedback can give answers directly to the posts and users could easily subscribe to updates to stay informed about what's going on. And the best of all: it's usable out-of-the-box, we did not need to create a custom feedback form :)