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("injection-point").appendChild(document.getElementById("sidebar").parentNode);
document.getElementById("sidebar").style.visibility = "visible";
</script>

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.