Using DHTML in Views

This article is the outset of a simple assignment which was given to me. The requirement was to hide the last 5 documents in a view (do not ask me where and why it is used). This led me to think on how to embed a categorized view on a form.The problem with categorized views on the web is that, there is a server hit every time you expand or collapse a category. As a result we end up in increasing the response time. All we know is that very few people are patient when they are on web (bet you I am not). So the problem is formulated as "How to expand collapse documents on the web without refreshing (passing a new request to the server) ?" The answer is "Using DHTML". "Treat view contents as HTML" property should be on in the view's Advanced Tab.



The first column needs to be categorized and also enable "Show twisty when the row is expandable" property. The formula for the first column is set to :

"</div><img src=/icons/expand.gif id=categorizedRow" + @Text(@DocNumber) + "onclick = showdocs (/'"+"categorizedRow" + @Text(@DocNumber) + "/') style=/"cursor:hand/">" + Tips + "<div id = categorizedRow" + @text(@docnumber) + "Div style=/"display:none/">"

This will display the image "expand.gif" and the id of this image will be "categorizedRow" with the docnumber appended to it. When the image icon is clicked a function with the name showDocs, which takes the id value as the parameter is being called. Next to image the value of the field Tips is appended.

A div tag with the id same as image tags id appended along with "Div" in the end . The style attribute for display is set to none so that initially everything in the div is invisible. The div tag has to be closed after the end of all the documents under the category and therefore it should start with a </div> tag so that the contents of every category is enclosed within the div tag. To understand this better just preview the view in notes.

Now coming to the part of displaying this view in web, just create a "$$ViewTemplate" form for the view.

And in the js header of that $$ViewTemplate form we are going to write the function "showdocs" which will be called when the image is clicked, just paste this code :

function showdocs(t)
{
var st = t +"Div";
var stt = document.getElementById(st)
var st1 = document.getElementById(t)

if (stt.style.display == "none")
{
stt.style.display="";
st1.src = "/icons/expand.gif";
}
else
{
stt.style.display="none";
st1.src = "/icons/collapse.gif";
}
}

In this the handle to the div tag is got using the id which is then used to display it or hide it accordingly.

That's all, just try this and it should solve the problem of the server hit that happens every time and save the visitor's precious time when he is on the web.