Thursday, July 16, 2015

Creating multiple layer of folders in SharePoint using SPServices and Jquery on any version.

Recently I got a requirement, where user wants to create a set of multiple layer of multiple folders. Creating all those folders one by one with same structure manually is very time consuming work. At the same time we wanted not to deploy any custom C# solution and we need it on SP2007. So I decided to use SPServices.

Below is the code which I have added into a Content Editor Webpart:

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.sympraxisconsulting.com/Demos/jQuery%20Libraries/jquery.SPServices-0.6.0.min.js"></script>
<script language="javascript" type="text/javascript">
  $(document).ready(function() {
  });

function CallOnButtonClick()
{
var librarynaem = "List or Library Title";
var newfolder = document.getElementById("topFolderName").value;
CreateFolder(librarynaem, newfolder);
}  

function CreateFolder(librarynaem, newfolder) {
 jQuery().SPServices({
  operation: "UpdateListItems",
  async: false,
  listName: librarynaem ,
  updates: "<Batch OnError='Continue' PreCalc='TRUE' ListVersion='0' >" +
    "<Method ID='1' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder + "</Field>" +
    "</Method>" +
    "<Method ID='2' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder1"+ "</Field>" +
    "</Method>" +
"<Method ID='3' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder1/Folder11"+ "</Field>" +
    "</Method>" +
"<Method ID='4' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder1/Folder12"+ "</Field>" +
    "</Method>" +
"<Method ID='5' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder2"+ "</Field>" +
    "</Method>" +
"<Method ID='6' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder3"+ "</Field>" +
    "</Method>" +
"<Method ID='7' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder3/Folder31"+ "</Field>" +
    "</Method>" +
"<Method ID='8' Cmd='New'>" +
     "<Field Name='FSObjType'>1</Field>" +
     "<Field Name='BaseName'>" + newfolder +"/Folder3/Folder32"+ "</Field>" +
    "</Method>" +
   "</Batch>",
  completefunc: function(xData, Status) {
   //alert("Status=" + Status); 
alert("New Service Added. Please refresh.");
 document.getElementById("topFolderName").value = "";
   }
 });
 }
  
</script>
<input type="text" id="topFolderName" />
<input type="button" onclick="CallOnButtonClick()" value="Add New Folder Structure">

Running this code will create folders and sub folders. We can create it any level using "/" for a new level in name parameter.

5 comments:

  1. Replies
    1. Nice to know that it helped someone.:)

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Do we have to create a top folder manually here? whats "topFolderName" here?

      Delete
    4. var newfolder = document.getElementById("topFolderName").value;
      CreateFolder(librarynaem, newfolder);

      On this line we are fetching top level folder name as per user input. TopFolderName is the id of input DOM element in this case a txt box.

      Delete