Using SPServices to Get the Display Names for a SharePoint List’s Content Types – Follow Up

A couple of weeks ago I got a question from my pal Tasha Scott (@TashasEv) about how to find the DisplayName of a Content Type on a NewForm. At the end of the code in that post, I had the comment:

//... do something with the Content Type Name ...

Well, it turned out that the “do something” that Tasha wanted was to display that name in the page title to give the user a better handle on what they were actually creating. This is a powerful idea, especially if you have Content Types that have similar metadata structures so that the user can remember what they are up to.

This is a great example of what I talk about in my Enhancing the User Experience with jQuery sessions at conferences. It’s not always about the big, flashy stuff. In this case, a simple change to the page title gives the user better context for what they are doing (think about the case where they go to the NewForm and then have to take a long phone call) and improves their experience with SharePoint. Small investments like this on frequently used pages can provide ridiculously good benefit for the small outlays.

So, in my silly test list NewForm, we go from…

…to…

Tasha posted the code that she ended up using on my prior post, but I decided to clean it up a little bit and post it here. You might even consider adding this to your master page if you are using a lot of Content Types in your lists, which means, of course, that you are using SharePoint well.

$(document).ready(function() {

  // The SPGetQueryString function parses the Query String values out into an array
  var queryStringVals = $().SPServices.SPGetQueryString();
  // This grabs the value of the ContentTypeId Query String parameter
  var contentTypeIdValue = queryStringVals["ContentTypeId"];
  // Define a variable to hold the name of the Content Type
  var contentTypeName = "";

  // Get the list's Content Types
  $().SPServices({
    // See the MSDN SDK at http://msdn.microsoft.com/en-us/library/lists.lists.getlistcontenttypes.aspx for details on this operation
    operation: "GetListContentTypes",
    // The SPListNameFromUrl function gets the list name for the current context based on the URL
    listName: $().SPServices.SPListNameFromUrl(),
    // We'll do this asynchronously
    async: false,
    completefunc: function (xData, Status) {
      // Find the Content Type with the matching ID
      $(xData.responseXML).find("ContentType[ID='" + contentTypeIdValue + "']").each(function() {
        // ...store the name in our variable...
        contentTypeName = $(this).attr("Name");
      });
    }
  });
  // Add the Content Type name to the page title
  var currentTitle = $("td.ms-pagetitle h2").html();
  $("td.ms-pagetitle h2").html(currentTitle.replace(":", ": " + contentTypeName + " - "));
});