Toggling Between Content Types in SharePoint 2010

Introduction

In this post we are going to go through how to toggle between different content types in a list, after firing the Add and/or Edit form.

Now, we all know that we can do that from the ribbon on the top of the page (before firing the add form) like so:

However, I came across a customer requirement, which requested to be able to toggle between content types after firing the add form, which we'll address in this post.

Scenario

Company ABC, requests to have a list called Employees, which contains two content types:

• Employee
• Manager

Now, for the sake of simplicity,the Manager content type differs by one extra site column from the Employee content type. I have assumed that a manager gets a parking space in the company's building (Perfect!)

Content types looks as follows:

Employee	Manager
First Name	First Name
Middle Name	Middle Name
Last Name	Last Name
Full Name	Full Name
Job Title	Job Title
Manager	Manager
-	Parking Space

Preparations

Before starting, we'll make sure that we have all what we need for this:

1. Create the required content types, we'll create the Employee content type first, then the Manager content type which inherits from the Employee content type. We'll group the content types under ABC Company content type group.
2. Create Employees custom list.
3. Associate the list with the previously created content types.

Now, we're good to go!

The Action!

Now, go to the Employees list, and from the top ribbon choose items, and then choose to create a new Employee.

When the add form pops up, notice that the URL address bar is hidden, in order to get the URL (whereas we'll be using it for toggling), right click on the form and choose create shortcut (using IE),

A confirmation dialog will pop up, asks whether we want to save this shortcut to desktop or not, click yes.

Open the shortcut, and notice the content type ID query string

Repeat all of the above steps for the Manager's content type.

Open SharePoint Designer, and open the site where the Employees list is located. Next find and open Employees list, from the navigation pane on the left under Lists and Libraries.

Under the forms pane, open the default add form (NewForm.aspx)

As soon as we open the form, we'll notice that the fields are actually sealed, as they are part of the web part. Now, somewhere on that form - preferably on top of the fields area - add the following HTML, which represents a row in HTML table, a label, a drop down list of the content types we have, and a javascript function that triggers on item change of the drop down list.

<tr>

            <td width="190px" valign="top" class="ms-formlabel">

                <h3 class="ms-standardheader">

                    <nobr>Content Type</nobr>

                </h3>

            </td>

            <td width="400px" valign="top" class="ms-formbody">

                <select id="ddlContentType" onchange="setContentTypeDialog(this);">

                    <option value="Employee" title="Employee">Employee</option>

                    <option value="Manager" title="Manager">Manager</option>

                </select>

            </td>

        </tr>

Now, we need to add a couple of javascript functions and they are as follows:

setContentTypeDialog(this)

This function fires when selected item on the drop down list changes, in order to set the input form in accordance with the chosen content type. In this function we need the links that we've extracted from the new item dialog previously.

Simply, the function checks the selected value, and then redirects the dialog to itself  but with a different content type ID passed in the QueryString.

function setContentTypeDialog(selection) {

            var value = selection.value;

            if (value == 'Employee') {

                window.location = '/sites/DataCenter/Lists/Emplyees/NewForm.aspx?RootFolder=%2Fsites%2FDataCenter%2FLists%2FEmplyees&ContentTypeId=0x010043942E0DBD9341429553727FBF5CAA4A0048FE7FD3C7EA7141940EFA3614F1B708&IsDlg=1';

            }

            else if (value == 'Manager') {

                window.location = '/sites/DataCenter/Lists/Emplyees/NewForm.aspx?RootFolder=%2Fsites%2FDataCenter%2FLists%2FEmplyees&ContentTypeId=0x010043942E0DBD9341429553727FBF5CAA4A01007A90AE7642CA044B8AC729029F6810FA&IsDlg=1';

            }

        }

getParameterByName(name)

This function gets the QueryString value by passing the corresponding key name.

function getParameterByName(name) {

            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

        results = regex.exec(location.search);

            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

        }

setSelectedIndex(ddl, searchValue)

This function sets the selected index on the drop down list in accordance with the chosen content type. The drop down list, in addition to the value to select are passed to this function, whereas this function fires when the form loads.

function setSelectedIndex(ddl, searchValue) {

            // Loop through all the items in drop down list

            for (i = 0; i < ddl.options.length; i++) {

                if (ddl.options[i].value == searchValue) {

                    // Item is found. Set its property and exit

                    ddl.options[i].selected = true;

                    break;

                }

            }

            return;

        }

executeCode( )

This function executes on form loading, right after all form scripts are ready. The function utilizes previously mentioned function (getParameterByName) to get the passed content type ID in the URL and decide which drop down list item to be selected.

function executeCode() {

            var contentTypeId = getParameterByName('ContentTypeId');

            var ddl = document.getElementById('ddlContentType');

            if (contentTypeId == '') {

                setSelectedIndex(ddl, 'Employee');

            }

            else if (contentTypeId == '0x010043942E0DBD9341429553727FBF5CAA4A0048FE7FD3C7EA7141940EFA3614F1B708') {

                setSelectedIndex(ddl, 'Employee');

            }

            else if (contentTypeId == '0x010043942E0DBD9341429553727FBF5CAA4A01007A90AE7642CA044B8AC729029F6810FA') {

                setSelectedIndex(ddl, 'Manager');

            }

        }

Scripts Ready

As mentioned before the (executeCode) function needs to be fired after all scripts are loaded and ready.

document.attachEvent("onreadystatechange", function () {

            if (document.readyState === "complete") {

                document.detachEvent("onreadystatechange", arguments.callee);

                executeCode();

            }

        });

Save the form in SharePoint designer and close.

The Solution is Ready :)

Now, we go to the SharePoint site and open up the Employees, we should be able to see the drop down list for the content types and start toggling freely between content types on the add dialog!