Introduction
Besides parameters you can include a hash (#) property in the URL in your XPages application. This “fragment identifier” is a short string of characters that refers to a resource that is subordinate to another, primary resource.
So it is mainly used to set a location anchor to a part in a page.
In this post I will show how to get value of Hash property in XPages and make a nice Bootstrap Pills navigation control for the Dynamic Content Control
XPages
In XPages you can use it within the xp:link control but the dynamic content control also makes use of it.
XSnippet Dynamic Content Control
The following XSnippet demonstrates how to set up a dynamic content control:
<?xml version="1.0" encoding="UTF-8"?> <xp:link escape="true" text="Load Dynamic Content Server side" id="link1"> <xp:eventHandler event="onclick" submit="true" refreshMode="partial"> <xp:this.action> <![CDATA[#{javascript:getComponent("dynC").show("key1")}]]> </xp:this.action> </xp:eventHandler> </xp:link> <xp:link escape="true" text="Load Dynamic Content Client side" id="link2"> <xp:eventHandler event="onclick" submit="false"> <xp:this.script><![CDATA[XSP.showContent("#{id:dynC}","key2")]]></xp:this.script> </xp:eventHandler> </xp:link> <xe:dynamicContent id="dynC" useHash="true"> <xp:this.facets> <xp:panel xp:key="key1">Content1</xp:panel> <xp:panel xp:key="key2">Content2</xp:panel> </xp:this.facets> </xe:dynamicContent></xp:view>Getting value of Hash property
I suggest to use one of the following 2 options to collect the value of the hash property:
- Use a custom function
- Use Dojo
The first option is another XSnippet by Thomas Adrian. The second is a suggestion by Mark Leusink to (re)use Dojo.
getHashUrlVars
Include the function in a shared CSJS library and call it via the function getHashUrlVars()["content"].
dojo.queryToObject
The dojo approach is also straightforward. Call the function dojo.queryToObject( dojo.hash() ); and then abstract the content property var active = hash[“content”];.
Pills navigation for Dynamic Content Control
Since there is no list item control in XPages it is a bit hard to set the properties via computation. However via CSJS you can manipulate the DOM a lot and add some responsiveness yourself.
The following script builds an unorderlist containing links to set a part of the Dynamic Content control as visible:
<xp:div id=”nav-pills-container”>
<ul class=”nav nav-pills”>
<li id=”Pictures” class=”dclist”>
<xp:link escape=”true” text=”Pictures” id=”link4″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Pictures”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>
<li id=”Albums” class=”dclist”>
<xp:link escape=”true” text=”Albums” id=”link1″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Albums”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>
<li id=”Profiles” class=”dclist”>
<xp:link escape=”true” text=”Profiles” id=”link2″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Profiles”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>
</ul>
The second script checks which content section is set “visible” for the Dynamic Content control via the hash property in the URL. The corresponding list item in the Pills navigation is set as active.
<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[function setActive(id){
$( “li.dclist” ).removeClass( “active” );
var id = “#” + id;
$(id).addClass( “active” );
}
var hash = dojo.queryToObject( dojo.hash() );
var active = hash[“content”];
setActive(active);
]]></xp:this.script>
</xp:eventHandler>
As a result I get the correct list item displayed as active for my Pills navigation:
Code
In case you want to see the code working in an example download the Bildr application on OpenNTF. There I have applied this technique for the search function.
Kwintessential Notes 