SharePoint Custom List with Custom Display Forms for each Content Types

Recently we came across an issue with SharePoint Custom List with Custom Display Forms for each Content Types. We wanted each content type to have its own custom display form.

In a document library, you can associate a template for each content type. Lists have forms and you can associate forms for different content types. Out of the box, when you edit a list item, you can also switch between content types if more than one is present (as you do with item properties in a document library). When you select a new (content type) from the list items, there is no indication what content type you are using once you start filling it, and in some case, you do not need to see all fields or just want to re-order them. Let’s make a new form for a custom content type.

In this example, I used the OOB Announcements list. I created a new content type based on the Announcement content type and added one additional site column to it. I added the new content type (called AKAnnouncement) to my announcements list, so for my New Item (ribbon) I have new Announcement and AKAnnouncement.

Open the site in SharePoint Designer and go to Lists and Libraries (under Site Objects, left pane). Click the list (announcements) and in the details page, Forms section, click New and fill the dialog. The name is just the first part of the page filename (the extension is already there) – ex. newak. Leave the radio button as is (new item) and only change the drop down box “select the content type to use” to your custom one (AKAnnouncement) in our case. The file will be added to the list of forms. Click it to open for editing. You can re-arrange or remove items that are not required. In this example, we are just adding a header that show the selected content type (read only). To do this, select the Title row, select Table (data view tools, from ribbon) and select insert above. You should see a row with two cells on top of the Title row. You can merge the two cells if you want, I just put Content Type in the left one and the actual type to the right. Save your form.

Back on your list details page, lower left, locate the Content Types section (see the below),

click your custom type (AKAnnouncement in this case) to see its details page. In the forms section (top right), click the hyperlink next to “New Form” and enter the relative url of your form (ex. /sites/teamsite/Lists/announcements/newak.aspx ) and click the save button on the quick access menu (see the below).

Back in the browser, try to add a new item based on your custom content type (AKAnnouncement) and you’ll get your custom form. The original announcement will use the default form.

When searching a content or an item from this list using SharePoint Search you will face one problem, . When you search an item from this list it will give the default display form url in your search result. To fix this you have to add the following code in your default display form under “onetidPageTitleAreaFrameScript” script tag

/* Getting query string for item id*/

JSRequest.EnsureSetup();
var itemId = JSRequest.QueryString[“ID”];

/* Client object model code for retrieving item properties*/

ExecuteOrDelayUntilScriptLoaded(GetItems, “sp.js”);
var context;
var web = null;
var collListItem;
var Initialvalue = 1;
var docItem;

function GetItems()
{
try
{
context = new SP.ClientContext.get_current();
web = context.get_web();
var lists = web.get_lists();
var doclogList = lists.getByTitle(“listname”);
docItem = doclogList.getItemById(itemId);
context.load(docItem,’Title’, ‘ContentTypeId’);
context.executeQueryAsync(Function.createDelegate(this, this.itemReceived), Function.createDelegate(this, this.failed));
}
catch(e)
{
alert(e);
}
}

/* Let us consider I have 2 different content types with the following IDs

newak = 0x0100863B8B29335BAF4481A5CA2ACCED155E008C0AEC34BA9F1447913B0E28247BD0BA
newak1 = 0x0100B5DA9AD10641494AA721F44CCF89A928003A57D431589C80428EBB37AA055E9CF3

*/
/* Function code is to redirect to respective content types custom display page */

function itemReceived()
{
var cTitle=docItem.get_item(‘ContentTypeId’);
var itemIdval = JSRequest.QueryString[“ID”];

if(cTitle==’0x0100B5DA9AD10641494AA721F44CCF89A928003A57D431589C80428EBB37AA055E9CF3′)
{
/* Redirect to Custom content type page designed for CT_A content type */
window.location.href=’sites/team/Lists/AKAnn/newak.aspx?ID=’+itemIdval;
}
else if(cTitle==’0x010400E39B41873A1F7840B1FE133CE431E56C00DA02B82C4CC08444A1E64B47676551F4′)
{
/* Redirect to Custom content type page designed for CT_B content type */
window.location.href=’sites/team/Lists/AKAnn/newak1.aspx?ID=’+itemIdval;
}
else if(cTitle==’0x010400E39B41873A1F7840B1FE133CE431E56C00DA02B82C4CC08444A1E64B47676551F4′)
{
/* Redirect to Custom content type page designed for Main content type */
window.location.href=’/sites/booklist/Lists/AKAnn/DispForm.aspx?ID=’+itemIdval;
}

}

function failed(sender, args)
{
alert(‘failed. Message:’ + args.get_message());
}

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: