Display Parent nodes as a Breadcrumb Trail or a Dropdown

Customisation Title Display Parent nodes as a Breadcrumb Trail or a Dropdown
Purpose of Customisation Allows the user to toggle between a Breadcrumb Trail style and the standard Dropdown menu navigation in Livelink 9 .
Author Greg Griffiths
Date of Customisation 01 January 2004
Covers Livelink Livelink 9
Livelink Modules Webnode
WebWFP
Affected Templates \webnode\html\locationpopup.html
\webwfp\html\locationpopup.html
Customisation Format HTML
Download Here Download as a ZIP file

Building on the feedback from a previous customisation to allow the usage of a Breadcrumb trail navigator in Livelink 9, I decided to allow the user to select which method of display they preferred and display the list as such. Having previously used some WebLingo to allow some functionality to be enabled / disabled - see customisations Seven and Nine - I simply merged this code with the code from Customisation Forty One.

As with the Customisation that this one is based on, there are two files to amend to get this to work universally across Livelink as for some reason the Workflow Painter module has its own copy of this file. However, in both cases, the changes required are identical.

Firstly, we test to see if the user has already made a choice about the navigation style they prefer by looking at the Query String, if no preference is found we default to the standard - dropdown - approach. Once we know which display style we are going to use we simply output either the modified code from Customisation Forty One or the existing code for the standard Drop Down navigator, then finally we add a link to allow the user to toggle between the two styles. If you wanted to take this Customisation further, you could allow the user to select their preference in the Users and Groups dialog, but this would require some OScript changes, this appears to be included in Livelink 9.2 from what I have seen of it.

The changes in the WebNode version of this file are shown below :

;if displayIcon
    `%LwebNode.IMG( nodeRec )`
;end

;Boolean Breadcrumbs = false
;if (IsDefined(request.Breadcrumbs) && request.Breadcrumbs == 'on')
    ;Breadcrumbs = true
;end

;if (Str.LocateI(request.QUERY_STRING,'&Breadcrumbs'))
    ;request.QUERY_STRING = request.QUERY_STRING[:Str.LocateI(request.QUERY_STRING,'&Breadcrumbs')-1]
;end

;if Breadcrumbs
    // add in a HTML Form Select Control to ensure that any functions that are looking for the control find it,
    // but its hidden from the user display using CSS
    <SELECT NAME="locationSel" style="display:none"></SELECT>
    ;for element in location
        // check that we have a URL, this is to solve the issue of some elements such as a Form Template that don't provide a URL
        // and have code on their forms to remove themselves from this list.
        ;if (Length(element.url)>0)
            // put a link in for each element and add a <space>|<space> delimiter if not the last item.
            <a href="`%Lelement.url`">`element.name`</a>`%L( element in location == Length( location ) ) ? "" : " | "`
        ;end
    ;end

    // add a link to toggle the style
    <A HREF="`request.SCRIPT_NAME + '?' + request.QUERY_STRING + '&Breadcrumbs=off'`">Show as Dropdown</A>
;else
    <SELECT NAME="locationSel" ONCHANGE="SelLoc( this.form, this.options[ this.selectedIndex ].value )">
    ;for element in location
        ;if IsDefined( element )
            <OPTION VALUE="`%Lelement.url`"`( element in location == Length( location ) ) ? " SELECTED" : ""`>`element.name`
        ;else
            <OPTION VALUE=""> --------------------
        ;end
    ;end
    </SELECT>

    // add a link to toggle the style
    <A HREF="`request.SCRIPT_NAME + '?' + request.QUERY_STRING + '&Breadcrumbs=on'`">Show as BreadCrumbs</A>
;end

The changes required by the WebWFP or Web WorkFlow Painter module are almost identical to the above, but the placement of the change within the overall file is slightly different, as shown below :

<TD NOWRAP ALIGN="LEFT">
;Boolean Breadcrumbs = false
;if (IsDefined(request.Breadcrumbs) && request.Breadcrumbs == 'on')
    ;Breadcrumbs = true
;end

;if (Str.LocateI(request.QUERY_STRING,'&Breadcrumbs'))
    ;request.QUERY_STRING = request.QUERY_STRING[:Str.LocateI(request.QUERY_STRING,'&Breadcrumbs')-1]
;end

;if Breadcrumbs
    // add in a HTML Form Select Control to ensure that any functions that are looking for the control find it,
    // but its hidden from the user display using CSS
    <SELECT NAME="locationSel" style="display:none"></SELECT>
    ;for element in location
        // check that we have a URL, this is to solve the issue of some elements such as a Form Template that don't provide a URL
        // and have code on their forms to remove themselves from this list.
        ;if (Length(element.url)>0)
            // put a link in for each element and add a <space>|<space> delimiter if not the last item.
            <a href="`%Lelement.url`">`element.name`</a>`%L( element in location == Length( location ) ) ? "" : " | "`
        ;end
    ;end

    // add a link to toggle the style
    <A HREF="`request.SCRIPT_NAME + '?' + request.QUERY_STRING + '&Breadcrumbs=off'`">Show as Dropdown</A>
;else
    <SELECT NAME="locationSel" ONCHANGE="SelLoc( this.form, this.options[ this.selectedIndex ].value )">
    ;for element in location
        ;if IsDefined( element )
            <OPTION VALUE="`%Lelement.url`"`( element in location == Length( location ) ) ? " SELECTED" : ""`>`element.name`
        ;else
            <OPTION VALUE=""> --------------------
        ;end
    ;end
    </SELECT>

    // add a link to toggle the style
    <A HREF="`request.SCRIPT_NAME + '?' + request.QUERY_STRING + '&Breadcrumbs=on'`">Show as BreadCrumbs</A>
;end

The difference in the two display styles can be seen in the following screenshots :

Screenshot Screenshot
Drop Down Style Breadcrumb Style
Website Designed by Adservio Consulting Valid HTML 4.01 Strict    Valid CSS!    Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0