SharePoint 2010 : Create site with ECMA script with

Leave a comment

March 6, 2013 by Ravi C Khambhati

Before I go ahead let me give some background behind this.

For one of the project which I worked on does not allow custom development (only OOB SharePoint features). We did not even have VS2010 and CA control was given to some other company. As per the requirement we have to create 60 sites ( I mean web not site collection ). So I thought of creating this script. This scrip will take input from user and creates single sub site. I will also upload one more script which will create multiple sub site based on input( from custom list or some other option. will come up with that script soon).

Step 1 – Upload JQuery and createsite.js(see below for content) file

if (typeof jQuery == ‘undefined’) {
 alert(“jQuery library is not found!”);
}

function isEmpty(str) {
    return (!str || 0 === str.length);
}

function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}

function validateInput(){

 var siteName = $(“#txtSiteName”).val();
 if ( isEmpty(siteName) || isBlank(siteName) )
 {
  alert(‘Please enter valid Site Name’);
  $(“#txtSiteName”).focus();
  return false;
 }
 
 var siteTemplate = $(“#ddlTemplate”).val();
 if ( isEmpty(siteTemplate) || isBlank(siteTemplate) )
 {
  alert(‘Please select Site Template’);
  $(“#ddlTemplate”).focus();
  return false;
 }

 var siteUrl = $(“#txtUrl”).val();
 if ( isEmpty(siteUrl) || isBlank(siteUrl) )
 {
  alert(‘Please enter valid Site Url’);
  $(“#txtUrl”).focus();
  return false;
 }
 
 var siteLanguage = $(“#ddlLanguage”).val();
 if ( isEmpty(siteLanguage ) || isBlank(siteLanguage ) )
 {
  alert(‘Please select Site Language’);
  $(“#ddlLanguage”).focus();
  return false;
 }
 
 return true;
}

function CreateSite(){
 
 if( validateInput() == false )
 {
  return;
 }

 var clientContext = new SP.ClientContext.get_current(); 
 var site = clientContext.get_site();
 var rootWeb = site.get_rootWeb();
   
     var siteName = $(“#txtSiteName”).val();
 var siteDescription = $(“#txtDescription”).val();
 var siteTemplate = $(“#ddlTemplate”).val();
 var siteUrl = $(“#txtUrl”).val();
 var siteLanguage = $(“#ddlLanguage”).val();
 var useSamePermissionsAsParentSite = $(‘#chkUseSamePermissionsAsParentSite’).is(‘:checked’)
 
 //set creation info
 var WCI = new SP.WebCreationInformation();
 WCI.set_webTemplate(siteTemplate);
 WCI.set_description(siteDescription);
 WCI.set_title(siteName);
 WCI.set_url(siteUrl);
 WCI.set_language(siteLanguage);
 WCI.set_useSamePermissionsAsParentSite(useSamePermissionsAsParentSite );

 rootWeb.get_webs().add(WCI);
  
 //save changes and generate callbacks 
 clientContext.load(rootWeb); 
 clientContext.executeQueryAsync(Function.createDelegate(this, this.onCreationSuccess), Function.createDelegate(this, this.onError));
}

function onCreationSuccess(sender, args){
 alert(‘Site has been created’);
 //alert(“Web site url : ” + this.oNewWebsite.get_serverRelativeUrl());
}

function onError(sender, args){
 alert(‘request failed ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

Step 2 – Create web part page

Step 3 – Add Content Editor web part and add below HTML to web part

<script src=”/<jquery file path>/jquery-1.7.js” type=”text/javascript”></script>
<script src=”/<custom javascript file path>/CreateSite.js” type=”text/javascript”></script>
<div><span id=”part1″>
 <div><span>Create Site</span></div>
 <table style=”margin-top: 8px;” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
  <tbody>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Site Name</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <input id=”txtSiteName” name=”txtSiteName” type=”text” />
      </br>
     </span>
    </td>
   </tr>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Description</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <textarea id=”txtDescription” name=”txtDescription” cols=”20″ rows=”2″></textarea>
      </br>
     </span>
    </td>
   </tr>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Template</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <select id=”ddlTemplate” name=”ddlTemplate”>
       <option value=”STS#0″>Team Site</option>
       <option value=”GLOBAL#0″>Global template</option>  
      </select>
      </br>
     </span>
    </td>
   </tr>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Url</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <input id=”txtUrl” name=”txtUrl” type=”text” />
      </br>
     </span>
    </td>
   </tr>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Language</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <select id=”ddlLanguage” name=”ddlLanguage”>
       <option value=”1033″>English</option>  
      </select>
      </br>
     </span>
    </td>
   </tr>
   <tr>
    <td nowrap=”true” valign=”top” width=”190px”>
     <h3><nobr>Use Same Permissions as ParentSite</nobr></h3>
    </td>
    <td valign=”top”>
     <span dir=”none”>
      <input id=”chkUseSamePermissionsAsParentSite” name=”chkUseSamePermissionsAsParentSite” type=”checkbox” />
      </br>
     </span>
    </td>
   </tr>
   <tr><td></td></tr>
   <tr>
    <td>
    </td>
    <td><button type=”button” onclick=”javascript:CreateSite()”>Create Site</button>
    </td>
   </tr>
  </tbody>
 </table>
 </span>
</div>

Step 4 – Checkin and published the page

Google+

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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: