Javascript

Creating Dynamic Controls with Javascript

MOSSLover — Wed, 13 Aug 2008 20:14:57 GMT

I was working on a search hack and needed the session state from ASP .Net controls and the ids from html controls using this hack: http://www.tqcblog.com/archive/2007/10/26/creating-a-custom-advanced-search-box-in-moss-2007.aspx. So I came up with a creative solution. I would add the html controls in the background. Here is some code if you would like to add your own hidden html controls or just create some for fun:

var currentElement = document.createElement("input");
currentElement.setAttribute("type", "hidden");
currentElement.setAttribute("name", "YourName");
currentElement.setAttribute("id", "YourID");
currentElement.setAttribute("value", "YourValue");
document.getElementById("DivName").appendChild(currentElement);

You are going to want to create a div or a span to add your elements or you can do document.body.appendChild. SharePoint for some reason did not like that statement, so I created a div before the button to add the elements. You do not need to add a hidden element. You can add a checkbox, but remember to add an element.display = "none"; or it will display the item. If you have any comments or questions send them my way. Hope you all have a good week!

My Battle with the Quick Launch Accordion Slider Control

MOSSLover — Sat, 14 Jun 2008 01:49:44 GMT

A good portion of this week was spent recovering some documents that were deleted by a rogue console application (most likely my fault). I wrote a Console Application to combine some document libraries and I spent a good portion of a week testing it. However, I did not really think of enough scenarios, because it obviously did not move the documents properly. Some libraries were moved and others were not. At any rate I practiced my SQL Restoration skills and wrote another two console applications to print out the document count for the libraries on our current portal and the restored portal. Then I compared the lists and copied over the missing files. The rest of the week was spent on this quick launch modification issue. I am not a JavaScript Guru, but I am stubborn person who will tackle Google and my own brain for a few days before giving up.

It was a pretty long day and I was pretty frustrated, so I went to our JavaScript Guru at work, Kevin. He's a really cool guy and knows some pretty neat things about JavaScript and AJAX. I told him we wanted to use the SharePoint Quick Launch Menu Control (<SharePoint:ASPMenu>) with an expand/collapse accordion/slider control type menu. I had tried a few different menu options and realized that most of them would not work, because SharePoint will override the CSS. The easiest way to do anything is to stick with there controls and bend the rules a little. About 6/7 pm on Friday I check my Gmail account and Kevin sent me an e-mail with some code. One hour later after some dinner and a movie I crack open my web user control and test it out. Sure enough it works. Here is a reference to the link that he used:
http://weblogs.asp.net/asmith/archive/2003/10/06/30744.aspx

Here is the code that finally ended up at the top of the user control:
<script type="text/javascript">

var _Menus = [];
_Menus.push("<% QuickLaunchMenuID.ClientID.ToString() %>");

//attach to the load/onload event the method
//to add the handler to add the animations when
//menu section is clicked.
if (window.addEventListener)
{window.addEventListener("load", AttachMenuAnimation, false);}
else if (window.attachEvent)
{window.attachEvent( "onload", AttachMenuAnimation );}

function AttachMenuAnimation()
{
    if (_Menus != null) {
    for ( i=0; i < _Menus.length; i++)
    {
        InitMenuAnimations(_Menus[i]);
    }
    }

}
//this function will attach events to all the TR elements that
//have IDs
function InitMenuAnimations(cntrl)
{
    //get all of the TR elements in the table, TBODY is the first element
    //so get all of the TR elements from the TBODY element
    var allTr = document.getElementById(cntrl).childNodes[0].childNodes;

    //loop through all of the TR objects and if it has an ID
    //it is a section header so attach an event to hide or unhide
    //its content, Attach the event in a non destructive manner
    for(i=0;i < allTr.length;i++)
    {
        if (allTr[i].id != ""){
            allTr[i].MyClick = HideUnhide;
            //add the handler
            XBrowserAddHandler(allTr[i],"click","MyClick");
        }
    }
}

function XBrowserAddHandler(target,eventName,handlerName) {
if ( target.addEventListener ) {
    target.addEventListener(eventName, function(e){target[handlerName](e);}, false);
} else if ( target.attachEvent ) {
    target.attachEvent("on" + eventName, function(e){target[handlerName](e);});
} else {
    var originalHandler = target["on" + eventName];
    if ( originalHandler ) {
      target["on" + eventName] = function(e){originalHandler(e);target[handlerName](e);};
    } else {
      target["on" + eventName] = target[handlerName];
    }
}
}

function HideUnhide(e)
{
    var el = this.nextSibling;
    if (el.id == ""){
        if (el.style.display == "none")
            el.style.display = "block";
        else
            el.style.display = "none";
    }
}
</script>

If you paste that into the header of your page and add the ID of the menu above, then it should expand/collapse your headers and hide/un-hide your child nodes. In future I will show you guys how to loop through and add Quick Launch Nodes and any additional nodes you would like to the Quick Launch Menu Control. This is just a neat little tidbit that you guys can play with for now. Remember: JavaScript is fun, but if you can use a .Net Control or Code it is more manageable in the long run. Have a good weekend guys!

Technorati Tags: MOSS,QuickLaunch Bar

Custom Flag Issue in Wikis

MOSSLover — Wed, 27 Feb 2008 23:12:18 GMT

I must admit that I know only the most basic things about javascript (how to create a slideshow, how to redirect items, and how to write basic functions). I am debugging someone else's code and I still have no idea what I am doing. Basically on every one of these sites we have one default master page with a script inside to check every list and document library to see if a yes/no "Flag" field is checked and also checks the "Flag Expiration" to see if it is expired. If the field is checked and it is not expired, then a Flag Picture shows up (rather than yes or no) and the Flag Expiration Field is hidden. Well there is a problem with wiki articles, because the ListIteratorView Webpart only shows columns in text without a picture. I understand that to get these to push out on all the sites that were created the template would need to be overrode or someway to override the ListFieldIterator part on just the wiki pages would need to be implemented (possibly a custom template). If anyone has a great idea for me I'm all ears and maybe some awesome linking. Here is the code for the convert to flag function:

Re-Posted from Old Blog

Technorati Tags: MOSS,Wiki,Javascript

Replace URL's on the Quicklaunch in Javascript

MOSSLover — Fri, 22 Feb 2008 22:00:47 GMT

Here is some sample code:

while(document.getElementById('zz2_QuickLaunchMenu'+i) != null)
{
               var menu = document.getElementById('zz2_QuickLaunchMenu'+i);
              //looks for the hyperlink tags using the quicklaunch tag
               var hyperlinks = menu.getElementsByTagName('a');
               hyperlinks[0].href = hyperlinks[0].href.replace(URL, URLToReplace); //replaces the URL text
               hyperlinks[0].target = "_blank";                            //allows for opening the link in a new window
               i+=1;
}
This tag for the quicklaunch: zz2_QuickLaunchMenu you can find by right clicking on your list and looking for the quick launch menu. It will probably include the name "QuickLaunchMenu" and some text in the same format as zz2_. The code is pretty straightforward. If you have any comments or questions let me know. Have a very good weekend!

Re-posted from old blog.

Technorati Tags: MOSS,Javascript,QuickLaunch