Blog Stats

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:

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

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):

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.

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

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.

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.

Think you’ve got great Active Directory data?

Try the FREE Hyperfish Analyzer
Find out just how bad your Active Directory data really is. In your custom report you will see how you are faring with key attributes including Profile Pictures, Phone Numbers, and Job Titles, as well as learn the value of an up to date Directory.