Kit Menke's Blog » JavaScript

Using undefined in JavaScript

Kit — Tue, 10 Aug 2010 17:37:52 +0000

Working with JavaScript can definitely be painful, but I always love stumbling across interesting and strange features of the language. I just found wtfjs.com which led me to these two answers on stackoverflow.

The first answer made me realize that undefined is not a keyword in JavaScript; it actually is a type that also happens to have a global variable with the same name. This means that you can change the value of undefined (the global variable) to be something else.

>>> typeof undefined === "undefined"
true
>>> undefined = 42
42
>>> typeof undefined === "undefined"
false

And, like shown above, the correct way to check if a variable is undefined is by using typeof.

>>> var myVariable;
>>> typeof myVariable
"undefined"
>>> myVariable = 1;
1
>>> typeof myVariable
"number"

The second feature, is something that I often used but had no idea why it actually worked: void(0).

<a href="javascript:void(0)">do nothing</a>

According to Breton’s excellent explanation, void is actually a prefix operator. When you prefix any expression with void, the result evaluates to undefined. So, using our correct method for checking undefined above you get this in the console:

>>> typeof void(0) === "undefined"
true

Awesome!

Wrap ListViewWebPart Column Headers

Kit — Thu, 08 Jul 2010 18:55:58 +0000

I recently got asked if it was possible wrap the column headers in a list view web part. The user had a WebPart with quite a few columns with long names and was trying to prevent the page from scrolling left to right.

What we needed to do was wrap the column header so that it fit more to the data in the grid.

The solution is relatively simple to implement; all you need is a Content Editor Webpart at the bottom of the page somewhere with the following JavaScript in it:

A Simple AJAX App using SharePoint Web Services

Kit — Mon, 15 Mar 2010 00:08:18 +0000

In this era of Web 2.0 web applications, I think it was only a matter of time before I needed to investigate how I could apply AJAX to SharePoint. With a little JavaScript and SharePoint’s web services, you can build fancy apps that can easily be dropped into a document library. And after reading Glen Cooper’s blog post on the subject, I figured it was something definitely worth investigating.

I also took this opportunity to improve a process I have to do all the time: what are the internal column names in a list? To get the list information, I built a simple AJAX app that consumes the Lists.asmx web service. Please keep in mind that this code will have be uploaded into SharePoint in order to work (a document library will work) and will not run from your desktop.

Step 0: HTML for user input and displaying results

Since I will be calling the GetList method on Lists.asmx, I will need two parameters from the user: Site URL and List Name. Site URL gives the web service context to a particular web and List Name should be a list within that web. I also specify a DIV which is where I will display the list’s information.


   
      List Information
      Site URL:

      Example: http://server/sites/SiteCollection/SubSite
      List Name:

      Example: Images
      
   



   (results)

Now that we have our HTML form, we can work on the JavaScript code.

Step 1: Building a SOAP Message

To communicate with the web service, we need to use SOAP. Luckily, Glen has already created a very handy class for taking care of these operations. It is also reusable so it will come in handy for other web service calls. I tweaked his code a little bit and then put it into SoapUtils.js (also, please note this code depends on Prototype.JS):

/*
SoapUtils.js
Author: Glen Cooper

http://blog.glenc.net/2007/04/20/calling-sharepoint-web-services-from-javascript/

*/
var Soap = {
   createEnvelope: function(action, ns, parameters) {
      var soap = '';
      soap += '';
      soap += '  ';
      soap += '    <' + action + ' xmlns="' + ns + '">';
      soap += Soap.__parseParameters(parameters);
      soap += '    ';
      soap += '  ';
      soap += '';
      return soap;
   },

   __parseParameters: function(parameters) {
      var params = "";
      if (typeof parameters == 'object') {
         // check if we were provided an array or an object
         if (typeof parameters.push == 'function') {
            for (var i = 0, length = parameters.length; i < length; i += 2) {
               params += "<" + parameters[i] + ">" + parameters[i+1] + "";
            }
         }
         else {
            $H(parameters).each(function(pair) {
               params += "<" + pair.key + ">" + pair.value + "";
            });
         }
      }
      return params;
   }
}

This utility class handles a lot of the grunt work for creating the SOAP message. It makes it pretty easy to grab the input, build the message, and then send it to the server. Next, I need to give it the specifics it needs to build the actual message. This is all contained inside my Execute function:

function Execute() {
   $('result').innerHTML = "Executing..."

   var txtSiteUrl = $('txtSiteURL').getValue();
   var txtListName = $('txtListName').getValue();

   // build parameter object
   var parameters =
   {
      listName: txtListName
   }

   // create soap envelope
   // can find the action and namespace from the WSDL page
   // ex: http://servername/_vti_bin/Lists.asmx?op=GetList
   var soap = Soap.createEnvelope(
     "GetList", // action
     "http://schemas.microsoft.com/sharepoint/soap/", // namespace
     parameters);

   if (!txtSiteUrl.endsWith('/')) {
      txtSiteUrl += '/';
   }
   txtSiteUrl += '_vti_bin/Lists.asmx';

   // call web service
   new Ajax.Request(
     txtSiteUrl,
     {
       method: "post",
       contentType: "text/xml",
       postBody: soap,
       onSuccess: ajaxSuccess,
       onFailure: ajaxError
     });
}

The Execute method is then bound to the “Get Columns” button on page load:

Event.observe(window,'load',function(){
   Event.observe('btnExecute','click',Execute);
});

Step 2: Parsing the Web Service’s XML response

At this point, we are ready to handle the response from the web service. Unfortunately, parsing XML using JavaScript was not exactly the easiest experience. I haven’t found an easy way to do it, so if you have any ideas, please let me know in the comments.

In any case, if an error occurs, I simply want to print the error message:

function ajaxError(result) {
   Element.insert($('result'), {bottom:'' + result.responseText + ''});
}

A success message is a lot more complicated since we want to extract information out of the returned XML. In fact, if you look at the entire response from the webservice after calling GetList, the returned result for a simple Images library is something like 1100 lines of XML. The majority of this is taken up by the full description of each column in the list. There is a LOT of junk that we are simply going to be skipping over. For sanity sake, I’m not going to post the entire response, but useful snippets of interest.

Overall, the response will look something like:


  
    
      
        ... all fields are listed here in  nodes
      
      
         ...
      
      
         ...

Notice, the List node contains a LOT of useful information. Once we have that node, we can display a lot of it using this function:

function addListInformation(nodeList) {
   var listTitle = nodeList.attributes.getNamedItem('Title').value;
   var listImg = nodeList.attributes.getNamedItem('ImageUrl').value;
   var listDesc = nodeList.attributes.getNamedItem('Description').value;
   var listCount = nodeList.attributes.getNamedItem('ItemCount').value;
   var listViewURL = nodeList.attributes.getNamedItem('DefaultViewUrl').value;

   var output = ''
   output += '';
   output += '';
   output += ' ' + listTitle + ' # of items = ' + listCount + ' ' + listDesc + '';
   Element.insert('result', {bottom:output});
}

Also, since we are interested in the internal column names, we want information about each of the fields. All of the columns are listed inside the Fields node (see above). A lot of them have attributes similar to below:

So, for each of the Field nodes, we are interested in the StaticName and DisplayName attributes:

function addFieldInformation(nodes) {
   if (nodes.length <= 0) {
      Element.insert(container, {bottom:"No results to display."});
      return;
   }

   var output = '';
   for (i = 0; i < nodes.length; i++) {
      var attr = nodes[i].attributes;
      // there are a lot more attributes, but right now only care about the Display Name
      // and the internal name
      var displayName = attr.getNamedItem('DisplayName').value;
      var internalName = attr.getNamedItem('StaticName').value;
      output += '';
   }
   output += 'Display Name Internal Name
' + displayName + ' ' + internalName + '';

   Element.insert('result', {bottom:output});
}

Display Name	Internal Name
' + displayName + '	' + internalName + '

And finally, to bring it all together, we are calling these functions inside our success function:

function ajaxSuccess(result) {
   // we're going to be adding HTML so reset this to be empty
   $('result').innerHTML = "";

   // put it in xmlDoc to make it shorter
   var xmlDoc = result.responseXML;

   // get the List node and show some of the attributes that are interesting
   addListInformation(xmlDoc.getElementsByTagName("List")[0]);
   // then select the Fields node and get all of its children (Field nodes)
   addFieldInformation(xmlDoc.getElementsByTagName("Fields")[0].childNodes);
}

All together now:







List Information - Kit's Utilities

















   
      
         List Information
         Site URL:

         Example: http://server/sites/SiteCollection/SubSite
         List Name:

         Example: Images
         
      
   

   
      (results)

Autopopulate a SharePoint Form from URL

Kit — Thu, 11 Mar 2010 17:28:02 +0000

August 20, 2010 Update: The code below has moved to be part of a bigger library… check out SPUtility.js on CodePlex!

Original Post:
This post builds off of my previous post about making fields read only. In this case, I needed to autopopulate the NewForm.aspx with a value that gets passed to the form via URL parameters.

In this case, the URL that gets passed in is something like:

/Lists/ProjectTasks/NewForm.aspx?projectID=523

I wanted to take the ‘projectID’ URL parameter and autopopulate my Project ID field with this value.

Additionally, we will make this field Read Only so that they can’t change the value. Lastly, do this all without SharePoint designer or C# code.

Stick the following code in a Content Editor on your NewForm.aspx or EditForm.aspx. (Remember you can get to edit mode by appending ToolPaneView=2 on the end, like NewForm.aspx?ToolPaneView=2)

Depends on Prototype.js.

Relative Dates in JavaScript

Kit — Sun, 24 Jan 2010 03:37:41 +0000

I was developing an input form for a search when I came across the need to allow the user to filter items using a date range. I had two input boxes where the user could enter a start and an end date. For some of the most common date ranges, I decided to create links that could be clicked to auto-populate the start/end date textboxes. For example, searching for items that were created last week or last month. Using JavaScript’s Date object, I was able to put together some nice examples.

First, the setup. I needed two text boxes to hold the start/end dates and then wanted the user to click links to auto-populate them with some relative dates:

Today

Start Date:
End Date:

Then to figure out how to calculate the dates using JavaScript. Here are the examples.. starting out easy with Today‘s date. When creating a new Date object, it is automatically initialized to the current day and time:

var today = new Date();
txtStartDate.value = getShortDateString(today);
txtEndDate.value = txtStartDate.value;

Yesterday is Today -1:

var yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
txtStartDate.value = getShortDateString(yesterday);
txtEndDate.value = txtStartDate.value;

This Week is a little more complicated. getDate() returns the day of the month (1-31) and getDay() returns the day of the week (0-6).

var thisWeek = new Date();
// set the date to most recent Sunday
thisWeek.setDate(thisWeek.getDate() - thisWeek.getDay());
txtStartDate.value = getShortDateString(thisWeek);
// set the date to last week's Saturday
thisWeek.setDate(thisWeek.getDate() + 6);
txtEndDate.value = getShortDateString(thisWeek);

Last Week is pretty similar to this week. I think the hardest part for me is the function names getDate and getDay. I always was getting them confused and thought that they should have been more specific… like getWeekDay and getMonthDay or something.

var lastWeek = new Date();
// set the date to last week's Sunday
lastWeek.setDate(lastWeek.getDate() - lastWeek.getDay() - 7);
txtStartDate.value = getShortDateString(lastWeek);
// set the date to last week's Saturday
lastWeek.setDate(lastWeek.getDate() + 6);
txtEndDate.value = getShortDateString(lastWeek);

The main difficulty I had with This Month was how to figure out the last day of the month. Luckily, if you can figure it out by selecting the first of next month and then subtracting a day.

var lastDayOfThisMonth = new Date();
// go to the next month
var nextMonth = lastDayOfThisMonth.getMonth() + 1;
lastDayOfThisMonth.setMonth(nextMonth);
// go to the last day of the previous month (this month)
lastDayOfThisMonth.setDate(0);
txtEndDate.value = getShortDateString(lastDayOfThisMonth);
lastDayOfThisMonth.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfThisMonth);

Notice how Last Month is actually easier because you can simply move backwards a month.

var lastDayOfLastMonth = new Date(); // now
lastDayOfLastMonth.setDate(0); // last day of last month            
// set the end date first
txtEndDate.value = getShortDateString(lastDayOfLastMonth);
lastDayOfLastMonth.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfLastMonth);

The only issue I had with This Year was I didn’t realize that setMonth(int) took a zero based month: 0 = January … 11 = December.

var lastDayOfThisYear = new Date();
lastDayOfThisYear.setMonth(11); // December
lastDayOfThisYear.setDate(31);
txtEndDate.value = getShortDateString(lastDayOfThisYear);
lastDayOfThisYear.setMonth(0); // January
lastDayOfThisYear.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfThisYear);

Finally, to figure out Last Year I took advantage of the setFullYear(year,month,day) function to subtract one year.

var lastDayOfLastYear = new Date();
// -1 means last year
// 11 means December and there always is a 31st of december
var thisYear = lastDayOfLastYear.getFullYear();
lastDayOfLastYear.setFullYear(thisYear - 1, 11, 31);
txtEndDate.value = getShortDateString(lastDayOfLastYear);
lastDayOfLastYear.setMonth(0); // January
lastDayOfLastYear.setDate(1); // 1st
txtStartDate.value = getShortDateString(lastDayOfLastYear);

See all of it together in the complete demo.

References:

Make a Text field read only on EditForm.aspx without SPD

Kit — Wed, 03 Jun 2009 00:09:42 +0000

August 20, 2010 Update: The code below has moved to be part of a bigger library… check out SPUtility.js on CodePlex!

After looking at a couple of examples online, most of them require the use of SharePoint Designer to make a field read only (or to hide it). Here is a method to make a field readonly using only Prototype (javascript library) and a Content Editor Web Part

Edit the EditForm.aspx page
If the Edit Page option is missing from the Site Actions menu, use the ToolPaneView=2 URL parameter.
Ex: /EditForm.aspx?ToolPaneView=2
Add a Content Editor Web Part
Add the following code (in this example, “Question” is the name of my field):

References:

Read only field in SharePoint EditForm.aspx

Update after Patrick’s comment (below). Here is an updated version of the code if you want to use it for multiple fields. You can simply call SetTextFieldReadOnly for each text field you want to hide.

Using Prototype’s Element.insert

Kit — Mon, 01 Jun 2009 15:17:17 +0000

Strangely, Prototype’s documentation for Element.insert does not have any examples, so I cooked something up quick:







Template









    This is paragraph one.
    This is paragraph three.