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

My pal Tasha Scott (@TashasEv) tweeted a question today about how to get at the display name for a Content Type on a NewForm:

Hello Gentlemen,

As requested, I am posting my query from Twitter in regards to trying to pass the Content Type of an item into the PlaceHolderPageTitleinTitleArea, um, area of a New Form. I can do it easily in the Edit and Display forms using the “ContentType” property, but as stipulated i don’t think this property is set for the item until save. However, there is a Content Type ID# in the query string, so the new form knows what fields to pull… how can we convert this info into the Content Type name and display it?

Thanks for any assistance you can render! You guys are always the best.

It just so happens I got an email last week from a Codeplex user called jenglish who wanted to do something very similar, and s/he gave me the code s/he used. (I’ll just go with “he” for simplicity.) The approach is fairly simple.

First, he grabs the Content Type’s GUID from the URL. When you create a new item based on a Content Type (management of Content Types is enabled in the list’s settings), SharePoint passes the GUID for the Content Type on the URL in the Query String. It looks something like this:

http://[yourservername]/NewForm.aspx?RootFolder=[rootfolder]&ContentTypeId=0x0100D01A03625CF08449BEFDB6DF55795D14&Source=[sourcepage]

Since the ContentTypeId is on the Query String, we can use it to look up the name of the Content Type so that we can display it however we’d like.

I’ve taken jenglish’s code, simplified it a little bit, and added some more comments, but it accomplishes the same thing he intended:

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

// Get the list's Content Types
$().SPServices({
  operation: "GetListContentTypes", // See the MSDN SDK at http://msdn.microsoft.com/en-us/library/lists.lists.getlistcontenttypes.aspx for details on this operation
  listName: $().SPServices.SPListNameFromUrl(), // The SPListNameFromUrl function gets the list name for the current context based on the URL
  async: false, // We'll do this asynchronously
  completefunc: function (xData, Status) {
    $(xData.responseXML).find("ContentType").each(function() { // All of the list's Content Types will be returned. We'll loop through to get the one we are interested in
      if($(this).attr("ID") == contentTypeIdValue) { // If the contentTypeId matches...
        contentTypeName = $(this).attr("Name"); // ...store the name in our variable...
        return false; // ...and return false, which breaks us out of the loop. (We've found what we need, so no reason to continue looking.)
      }
    });
  }
});
//... do something with the Content Type Name ...

10 Comments

  1. Marc, I know this is way late but I wanted to give you massive thanks for helping me solve this issue. For those, um, unskilled with jQuery (like me!) who might decide they need this as well, here’s the code wrapped up all nice and pretty:

    <script type="text/javascript" src="(location of your jQuery Library here)"></script> 
    <script type="text/javascript" src="(location of your SPServices Library here)"></script> 
    <script language="javascript" type="text/javascript">
    
                   $(document).ready(function() {
                  
                                  var queryStringVals = $().SPServices.SPGetQueryString(); // The SPGetQueryString function parses the Query String values out into an array
                                  var contentTypeIdValue = queryStringVals["ContentTypeId"]; // This grabs the value of the ContentTypeId Query String parameter
                                  var contentTypeName = ""; // Define a variable to hold the name of the Content Type
                                  // Get the list's Content Types
                                  $().SPServices({
                                    operation: "GetListContentTypes", // See the MSDN SDK at http://msdn.microsoft.com/en-us/library/lists.lists.getlistcontenttypes.aspx for details on this operation
                                    listName: $().SPServices.SPListNameFromUrl(), // The SPListNameFromUrl function gets the list name for the current context based on the URL
                                    async: false, // We'll do this asynchronously
                                    completefunc: function (xData, Status) {
                                      $(xData.responseXML).find("ContentType").each(function() { // All of the list's Content Types will be returned. We'll loop through to get the one we are interested in
                                        if($(this).attr("ID") == contentTypeIdValue) { // If the contentTypeId matches...
                                          contentTypeName = $(this).attr("Name"); // ...store the name in our variable...
                                          return false; // ...and return false, which breaks us out of the loop. (We've found what we need, so no reason to continue looking.)
                                        }
                                      });
                                    }
                                  });
                                  //... do something with the Content Type Name ...
                                  var currentTitle = $("td.ms-pagetitle h2").html();
                                  $("td.ms-pagetitle h2").html(currentTitle.replace(":", ": " + contentTypeName + " - "));
                   });
    </script>
    

    The idea here is that there are a number of content types applied to one list and this way when the end user opens a new form they are sure of the content type they have chosen. Not to give too many hints, but this could be really useful if you are using content types for things like “statuses” a la Laura Rogers’ (@wonderlaura’s) blog! I should also point out that once the list item is saved, this method is no longer necessary to retrieve the content type and place it in the form’s title (at this point, we’re talking Edit and Display forms). For those, you can add this code in the asp:Content area of your choice (depending on where you want it rendered):

    <SharePoint:ListItemProperty Property="ContentType" id="ID_ContentType" MaxLength=40 runat="server"/>
    

    I hope to put something together so you can see this baby in action (with your permission and proper credit, of course!).

    Thanks again Marc! You know there’s a hug waiting for you next time I see you! ;+D

    ~Tasha

    Reply
  2. Hello Marc,
    I’m currently tring to get the items from a sharepoint list.
    Once I get the items from the SharePoint list I’m going to write them to an html table with two columns. If my list has and even number of items the two columns would have the same amout of items, but if he list has an odd number of items one column would be bigger than the other by one item.
    I know how to accomplish this but the problem that I’m having is that I need to create several loops and I have not been able to find the correct way to do it.

    using $(xData.responseXML).find(“z\\:row”).each(function()

    I iterate through the list, but I need to be able to grab one item and then write that item in one column before moving to the next one.

    Do you know how would I be able to create such a loop ?

    Thank you

    Reply
    • Sure. Add a counter (i below) to your .each() loop and test for the modulus for 2. If it’s 1, close the current row and start a new one.

      $(xData.responseXML).SPFilterNode(“z:row”).each(function(i)

      M.

      Reply
  3. Hai Marc,
    I have an issue i want to display the edit form because i am creating one EDIT link when i am click on this edit link that url goes to EditForm.aspx it is fine for me BUT i want update the data in EditForm.aspx that fields data is empty.It is possibe to get the EditForm.aspx page with default data in that fields.
    i am using soap services to get the list items.
    and add anchor tag to get the editform.aspx

    Edit

    If it is possible to get the data in the fields by default please share any information.

    Thanks in advance,
    Suresh

    Reply
    • suresh:

      I can’t really follow what you want to do, but it sounds like you’d like to pre-populate some column values with the data from an existing item. That’s certainly possible by adding some script into your form.

      M.

      Reply
  4. Hi Marc,

    I am getting the Display Name(Anil Yadagiri) from the people picker.Now i need to get the Account Name(Domain\\username) of the user.So that i can pass it to the sp services to get the manager of that particular user.

    Can you please help me on this requirement.

    Regards,
    Anil

    Reply

Have a thought or opinion?