Site Creation App in SharePoint 2013

This article describes how to create a Site Creation App in SharePoint2013 step-by-step. You can refer to my article for configuring an app in SharePoint 2013.

Introduction

In SharePoint Server 2013, a Site Creation App allows an option to the users to create a site even if the user has no permission to create a site from a web template that we can configure either custom or OOTB. For example, if we use SharePoint as a social platform and use community sites and community portalm then we can provide an option to user this app where the user can create a community site (site template will be configured in app code).

Prerequisites for setting up your development environment to work with a Site Creation App

To create the SharePoint Hosted App that uses the JavaScript object model to work with a Site Create App, you'll need:

• Visual Studio 2012
• App Configuration in server
• Local administrator permissions for the logged-on user

Create a farm solution and SharePoint-Hosted App

Use the following procedure to create a farm solution and SharePoint-Hosted App in Visual Studio 2012:

1. Run Visual Studio as administrator, and choose "File" -> "New" -> "Project...".
2. In the New Project dialog box, choose ".NET Framework 4.5" from the drop-down list at the top of the dialog box.
3. In the Templates list, expand "Office/SharePoint", choose "Apps", and then choose the "App for SharePoint 2013" template.
4. Name the project "SiteApp", and then choose the "OK" button.
5. In the SharePoint Customization Wizard dialog box, choose "Deploy as a farm solution" and then choose the "Finish" button.
6. In Solution Explorer, open the shortcut menu for the SiteApp project, and expand the Pages folder and click on the default.aspx page.
7. In the markup of the "Default.aspx" file, paste the following code between the "Main" asp:Content tags. This code defines controls and script references.
   
   HTML
   
   <div>
   Site Name: <inputtype="text"id="siteName"value=""/>
   <inputtype="button"onclick="createSite()"name="Create"value="Create"/>
   </div>
    
8. Open the "App.js" file under the Script folder. Replace with the following code:
   
   function getQueryStringValue(key) {
       var returnValue = "";
       var params = document.URL.split("?")[1].split("&");
       var strParams = "";
       for (var i = 0; i < params.length; i = i + 1) {
           var singleParam = params[i].split("=");
           if (singleParam[0] === key) {
               return decodeURIComponent(singleParam[1]);
               break;
           }
       }

       return returnValue;
   }
    
   function createSite() {

       var hostWebUrl = getQueryStringValue("SPHostUrl");
       spcontext = new SP.ClientContext.get_current();
       //then use the host web URL to get a parent context -this allows us to get data from the parent
       parentCtx = new SP.AppContextSite(spcontext, hostWebUrl);
       currentWeb = parentCtx.get_web();

       context.load(currentWeb);
       context.executeQueryAsync(onCreationSuccess, OnFailure);
   }

   function onCreationSuccess() {
       //alert("In onCreationSuccess");
       var appInstanceID = currentWeb.get_appInstanceId();
       var webCreateInfo = new SP.WebCreationInformation();
       webCreateInfo.set_description("This site created from Javascript");
       webCreateInfo.set_language(1033);
       var site = $("#siteName").val();
       webCreateInfo.set_title(site);
       webCreateInfo.set_url(site);
       webCreateInfo.set_useSamePermissionsAsParentSite(true);

       webCreateInfo.set_webTemplate("COMMUNITY#0");// you can add webtemplate as per your choice
       web = currentWeb.get_webs().add(webCreateInfo, false, appInstanceID);

       context.load(web);
       context.executeQueryAsync(onSuccess, OnFailure);

   }

   function onSuccess() {
       alert("Web created");
   }
    
   function OnFailure(sender, args) {
       alert(args.get_message());
   }

9. Open the "AppManifest.xml" file and set the permission to "Site Collection as Full Control".
   
   
    
10. To test the solution, on the menu bar, choose "Deploy". The output should be as in the following:
    
    
    

I hope you liked my article... happy learning.