XRX/Breadcrumb Navigation Bar

Motivation

We want to provide a consistent way for users to navigate around in applications and their functions. To do this we provide a standard site navigation breadcrumb view.

Method

Each site style module has a breadcrumbs() function. This function looks at the context of the application in the site and conditionally displays each level of the site as a path of links.

To support this function we will need to create a function that displays the depth we are in the site. We call this the $style:web-depth-in-site variable.

Here is an example of how to calculate it:

declare function style:web-depth-in-site() as xs:integer {
(: if the context adds '/exist' then the offset is six levels.  If the context is '/' then we only need to subtract 5 :)
let $offset := 
   if ($style:web-context)
then 6 else 5
    return count(tokenize(request:get-uri(), '/')) - $offset
};

This function counts the number of "/" characters that appear in the current uri using the function get-uri(). It then does some offset calculations so that the root node of the site has a count of 1.

The $style:site-home is a path to the site home that can be renders in the context of the site. For example you might set it to:

  let $style:site-home := '/rest/db/org/my-org'

The Application ID and Application Name should also be set in the $style:app-id $style:app-name variables.

This can be extracted from URI and the app-info.xml file.

declare function style:breadcrumbs() as node() {
   <div class="breadcrumbs">
   
      { (: Check if Site Home should be displayed :)
      if ($style:web-depth-in-site gt 1) 
        then <a href="{$style:site-home}/index.xq">Site Home</a>
        else ()
      }
      
      { (: Check if Apps Link should be displayed :)
        if ($style:web-depth-in-site gt 2) then
             (' &gt; ' , <a href="{$style:site-home}/apps/index.xq">Apps</a>)
        else ()
      }
      
      { (: Check if App Name should be displayed :)
        if ($style:web-depth-in-site gt 3) then
             (' &gt; ' , 
             <a href="{$style:site-home}/apps/{$style:app-id}/index.xq">
             {$style:app-info/xrx:app-name/text()}
             </a>)
        else ()
      }
   </div>
};