none
[Forum FAQ] A custom Content Type Picker in NewForm page of SharePoint 2013 list RRS feed

  • General discussion

  • Scenario:

    Add a Drop Down Menu for picking Content Type when in NewForm.aspx page.

    Solution:

    The example below will show how to add a Drop Down Menu for picking Content Type when in NewForm.aspx page.

    1. Download the jQuery API to the "Site Assets" library, then we can reference it in our script like this:

    <script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>

    2. Create a custom list and add some Content Types into it.

    3. This is the complete code in new form page(NewForm.aspx) of this list:

    <script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    
    var listContentTypes = null;
    
    _spBodyOnLoadFunctionNames.push("spReady");
    
    function spReady()
    {
      ExecuteOrDelayUntilScriptLoaded(ready, "sp.js");
    }
    
    function ready() {
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getById(_spPageContextInfo.pageListId);
    
        //get the content types and load the collection
        listContentTypes = oList.get_contentTypes();
        clientContext.load(listContentTypes);
     
        clientContext.executeQueryAsync(Function.createDelegate(this, getContentTypeOfCurrentItemSucceeded), Function.createDelegate(this, onQueryFailed));
    }
     
    function getContentTypeOfCurrentItemSucceeded(sender, args) 
    {    
        var ct_enumerator = listContentTypes.getEnumerator();
        var hAry = {};
    
        while (ct_enumerator.moveNext()) 
        {
            var ct = ct_enumerator.get_current();
            hAry[ct.get_id().get_stringValue()] = ct.get_name();
        }
    
        var $t = $("#onetIDListForm");
        createSelectBefore($t, hAry);
    }
    
    function onQueryFailed()
    {
        console.log("Failed");
    }
    
    function createSelectBefore($t, hash)
    {
      var sel1 = "<span>Content Type</span><select id='ctp'>";
      var option1 = "<option title='";
      var option2 = "'>";
      var option3 = "</option>";
      var sel2 = "</select><br>";
    
      var t1 = sel1;
      
      var len = hash.length;
      for(var name in hash)
      {
        t1+=option1+name+option2+hash[name]+option3;
      }
      t1+=sel2;
      $(t1).insertBefore($t);
      
      //selected an option
      var s = location.search;
      
      //if not the default content type
      if(s.indexOf(getParameterByName("ContentTypeId"))>0)
      {
        $("#ctp").val(hash[getParameterByName("ContentTypeId")]);
      }
      //if it is the default content type, get the first result
      else
      {
        $("#ctp").val(hash[first(hash)]);
      }
    
      //onchange event
      $("#ctp").change(function(){
    
        //get contenttypeid, redirect
        window.location = _spPageContextInfo.serverRequestPath+"?ContentTypeId="+$(this).find("option:selected").attr('title');
    
      });
    }
    
    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, " "));
    }
    
    function first(obj) {
        for (var a in obj) return a;
    } 
    
    </script>

    When in NewForm.aspx page, there will be a Content Type Picker at the head of the form:

    Choose an option:

    The corresponding fields show up:

    Happy coding!


    Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.


    • Edited by ForumFAQ Saturday, May 2, 2015 11:17 AM
    Saturday, May 2, 2015 11:16 AM