Playing with XSLT – Domino view

In a recent project I was asked to find a solution to display the entries in a view in a more advanced navigational way. Currently this functionality is being built by an agent.

The general quest is to limit the amount of using agents and try to use already available views instead. Also the agent has it’s limitations.

There were some conditions this ‘navigator’ must have:

  • documents must be displayed in a familiar way, like a menu-tree structure 
  • a document may have maximum 4 categories depth
  • not each document will have 4 categories depth
  • when clicking on a twistie (plus/minus sign) the tree must be opened
  • when clicking on a category name all the corresponding documents must be presented as thumbnails and the user must be able to navigate through these thumbnails
  • when clicking on a final document entry (the product name) the document must be presented
  • the navigator may only show documents a person is entitled to see, therefor a person may only see documents for his organisation

Nice!

The view

Since I did not had any experience in transforming a view in XML format via a XSL stylesheet I use some old articles available on the IBM website here and here.

Finally my view looked like this:

notes categorized view

Transformation

I first setup my XSL file in Eclipse, just because I just got it installed. But since the view was only allowed to show the documents a person is entitled to somehere in the XSL document capture which OU1 unit a person is listed in.

By placing the XSL on a page and add some good old <computed text> it was easy to create some automated text:

@Name([OU1];@UserName) 

Validating the code I managed by making everytime an export to a flat file, import it in Eclipse again and there do the validation 😦

Finally my code looked like this:

<?xml version=“1.0” encoding=“UTF-8”?>

<xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform&#8221; version=“1.0” xmlns:xalan=http://xml.apache.org/xslt&#8221;>

<xsl:template match=“viewentry[@children]”>

<div>

<xsl:attribute name=“ID”>

<xsl:value-of select=“@position”/>

</xsl:attribute>

 

<span style=“cursor:arrow;” onclick=“toggleSection(this)”>

<img border=“0” src=“./navigation_plus.gif”/>

</span>

 

<span style=“font-size: 8pt;font-weight:normal;cursor:hand;color:#000000;” onclick=“collectCategory(this)”>

<xsl:attribute name=“NextEntrySrc”><Computed Value>/<Computed Value><Computed Value>&Start=

<xsl:value-of select=“@position”/>.1&Count=

<xsl:value-of select=“@children”/>&Collapse= <xsl:value-of select=“@position”/>1.1

</xsl:attribute>

<xsl:attribute name=“CatPos”>

<xsl:value-of select=“@position”/>

</xsl:attribute>

<span><xsl:value-of select=“entrydata”/></span>

</span>

 

<div style=“margin-left:15px;display:none;”/></div>

</xsl:template>

<xsl:template match=“viewentry”>

 

<table border=“0” width=“120”>

<tr bgcolor=“#FFFFFF”>

<xsl:if test=“position() mod 2 != 0”>

<xsl:attribute name=“bgcolor”>#FFFFFF</xsl:attribute>

</xsl:if>

<td width=“1%” valign=“top”>

<xsl:variable name=“unid” select=“@unid”/>

 

<span style=“font-weight:normal;color:#000000;cursor:hand;”><a href=<Computed Value>/0/{$unid}?opendocument” target=”main”>

<img border=“0” src=/<Computed Value>/dot.gif”/></a>

</span>

</td>

<span><a href=<Computed Value>/0/{$unid}?opendocument” target=”main”><xsl:apply-templates select=“entrydata”/></a></span>

</tr>

</table>

 

</xsl:template>

<xsl:template match=“entrydata[@columnnumber=1]”>

<td width=“39%”>

<span style=“font-weight:normal;color:#0060C0;cursor:hand;”><xsl:value-of select=“text”/></span>

</td>

</xsl:template></xsl:stylesheet>What this code does:

  • basically it goes through the view, looks if the entry has got children (which means it’s a category) if so it will display a + sign and the entrydata (category name).
  • the + sign got a toggle() function assigned which is described in the related IBM article
  • the entry data (the category) will get a collectCategory() function assigned which will make an AJAX call which collects all documents under the selected category

The result looks finally with some little help of a CSS file like this:

view in web

Collecting the right documents

Because I wanted to display the exact subset of documents under a certain category structure I add the value ‘this’ in the collectCategory() function:

onclick=“collectCategory(this)”What is i get in return is the object (the viewentry) I click on. Via obj.CatPosI get the position (for example 1.2.2) which also tells me how many levels / categories I am in (3) .In order to get the right subset I needed an categorized view that has a flat construction of the categories at one level, for example:organisation||Cruiser||Shadow||2006||Gray  ororganisation||Touring||Goldwing||2007||BlackFinally I could just show that view to the browser via an ?OpenView command with &RestrictToCategory parameterfunction collectCategory(obj){

varPosSelect = obj.CatPos

varPosSelectSplit = varPosSelect.split(“.”)

var varPosLevels = new Array()

var varPosCat = new Array()

for(i=0; i<varPosSelectSplit.length ; i++){

varPosLevels[i]=varPosSelectSplit[i]

}

n=0

varCat=“”

for(i=0; i<varPosLevels.length ; i++){

// for each level we are going to perform a AJAXRequest

switch (i+1) {

// check which position we want to search in te view

case 1: searchPos=eval(varPosLevels[0]); break

case 2: searchPos=eval(varPosLevels[0]) + “.” + eval(varPosLevels[1]); break

case 3: searchPos=eval(varPosLevels[0]) + “.” + eval(varPosLevels[1]) + “.” + eval(varPosLevels[2]); break

case 4: searchPos=eval(varPosLevels[0]) + “.” + eval(varPosLevels[1]) + “.” + eval(varPosLevels[2]) + “.” + eval(varPosLevels[3]); break

default: result = ‘unknown’

}

varURL= ExtDBName + “/” + XMLCategories + UserOrg + “&start=” + searchPos;createAJAXRequest (varURL,“processReturnValue”)

varPosCat[n] = varCat

n++

 

}

varPosCatString = varPosCat.join(“||”)

parent.main.location.href = ExtDBName + “/OrgProdSingleCat?OpenView&RestrictToCategory=” + UserOrg + “||” + varPosCatString + “&Count=12”

}

The parameter &Count=12 indicates that I only want to display 12 documents at a time (to avoid long loading).

In the view the documents are being displayed in <div> tags, and via CSS I display them as a pure CSS picture alike gallery:

/* settings for view display product*/
.thumbnail { float: left;
width: 250px;
height: 400px;
border: 1px solid #E1E1E1;
margin: 0 15px 15px 0;
background-color:#FFF;
}
.clearboth {
clear: both;
}

Wrapping up

Transforming normal Domino views can be very interesting and add user-experience value to your applications.If you want to go deeper into, I believe more experience in XSL is necesarry. I only have seen a top of the iceberg, but in combination with some AJAX the results can be quite amazing!

Advertisements

7 thoughts on “Playing with XSLT – Domino view

  1. Jordan 2007-March-28 / 10:51 am

    I like your ideas and interface choices. I’m having a little difficulty understanding a few points. can you email a sample database to jtenjeras at gmail dot com?

  2. Sean 2007-October-20 / 12:44 am

    Hey I would also love to take a look at a example database if you have one. Im currently trying to create a dynamic view with a tree like structure on the web and am kinda pulling my hair with different solutions. shoot me an email please. thanks!

  3. Mohiuddin 2008-February-21 / 6:01 pm

    hi there

    me too would love to have a look at an example database if you have one…

    plz reply

    thanks

    Mohiuddin

  4. kamal 2009-August-5 / 3:22 pm

    I appreciate the way you have utilized xslt. Can you send me the sample database as well.

    Thanks,
    Kamalraj

  5. sandrar 2009-September-11 / 12:56 am

    Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

  6. Ken 2010-November-25 / 1:59 pm

    Hi

    Great work here – Thanks for posting.

    I am trying to adapt your work a bit and I am wodering if there is a problem with the asychronos AJAX request in function collectCategory. I seems to me that varPosCatString can only be built up with a value if it waits for the AjaxRequest to come back from a synchronos request. Apologies if I am misunderstanding how this works.

    Ken

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s