How to automate site creation on save in a SP list form using JSOM?

Question

For one of the Clients Requirements, I have to automate Sharepoint site creation on a button click. Basically there will be a SharePoint list form in which a user will enter data as title, url, and select a template. Once clicked on save it should create a sharepoint site. I have been able to implement this using a HTML form web part but now i need to Use SharePoint OOTB list form and need to do the same thing. Below is the code I wrote that creates a sharepoint site upon button click, the code works fine and creates a site depending upon the selection. I am using SharePoint online.

Any ideas on how to convert this approach to A Sharepoint list form approach?

    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

function PreSaveAction(){
    CreateSubWeb();
    return true;
}

function CreateSubWeb() {
    // defualt list Title field
    var webTitle=$("input[title='Client_x0020_Name']").val();
    //custom fields URL and Template
    var url=$("input[title='Site_x0020_URL']").val();
    var template=$("input[title='Custom_x0020_Template']").val();

    // current web url
    var webUrl = _spPageContextInfo.webAbsoluteUrl;

    var clientContext = new SP.ClientContext(webUrl);
    this.oWebsite = clientContext.get_web();

    var webCreationInfo = new SP.WebCreationInformation();
    webCreationInfo.set_title(webTitle);
    webCreationInfo.set_language(1033);
    webCreationInfo.set_url(url);
    webCreationInfo.set_useSamePermissionsAsParentSite(true);

    if(template == 'Customer W Project'){       
            webCreationInfo.set_webTemplate("{2936BD84-30AD-413E-8933-2A6B7856D10F}#Template 2");
    }
    else
    {
        webCreationInfo.set_webTemplate("{ED884F01-6B10-4791-A704-FF05A047D0F3}#Template 1");   
    }
    oWebsite.get_webs().add(webCreationInfo);
    oWebsite.update();
    clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

}
function onQuerySucceeded(sender, args) {
    alert('success'); 
}
function onQueryFailed(sender, args) {
     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
}  
</script>

LZ_MSFT · Accepted Answer · 2018-02-02T01:42:56.827

The code below for your reference, add the code into script editor web part in new form page.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
    var templateName=$("select[title='Custom Template']").val();
    getTemplateName(templateName).done(function(template) {
        createSubSite(template);    
    }); 
    return true;
}
var createSubSite = function(templateName) {
    // defualt list Title field
    var webTitle=$("input[title='Title Required Field']").val();
    //custom fields URL and Template
    var url=$("input[title='Site URL']").val();

    // current web url
    var webUrl = _spPageContextInfo.webAbsoluteUrl;

    var clientContext = new SP.ClientContext(webUrl);
    this.oWebsite = clientContext.get_web();

    var webCreationInfo = new SP.WebCreationInformation();
    webCreationInfo.set_title(webTitle);
    webCreationInfo.set_language(1033);
    webCreationInfo.set_url(url);
    webCreationInfo.set_useSamePermissionsAsParentSite(true);
    webCreationInfo.set_webTemplate(templateName);
    oWebsite.get_webs().add(webCreationInfo);
    oWebsite.update();
    clientContext.executeQueryAsync(function() {
            console.log("Done");
        }, function(sender,args){ 
            console.log("failed. Message:" + args.get_message());
    });
}

var getTemplateName = function(templateName) {
    var dfd = new $.Deferred(); 
    var clientContext = SP.ClientContext.get_current();
    var templates = clientContext.get_web().getAvailableWebTemplates(1033, false);
    clientContext.load(templates);

    clientContext.executeQueryAsync(function() {
        var templateGuidName;

        for (var template in templates.get_data()) {
                if (templates.itemAt(template).get_title() === templateName) {
                    templateGuidName = templates.itemAt(template).get_name();
                    break;
                }
            }   
        dfd.resolve(templateGuidName);

     }, function() { dfd.reject(); });

    return dfd.promise();

}
</script>

thanks so much for your response. I updated the code in my question as you suggested but getting an error as shown in the screenshot attached. Please note that i am using Customized templates to create the site. Can you please tell me what's wrong in the code? Thanks so much. Please refer to my question to see the code i am using and the screenshot as well. — mdevm, Feb 01 '18 at 14:35
Do you know how to retrieve the vales of SharePoint list choice fields and store it in a variable using js/jq? — mdevm, Feb 01 '18 at 19:06
I modify the code above, If you use custom template, we need get the templateGuidName using JSOM first. To get the select value, we can use $("select[title='Custom Template']").val() . — LZ_MSFT, Feb 02 '18 at 01:44
Thanks for your response. I will try this out and let you know. Also for now i am able to copy the web title field to another list column field, along with that i also need to copy the newly created site url to a list column filed. How to get the URL of the newly created site? — mdevm, Feb 02 '18 at 12:18
To get the newly created site URL, we can use this: var newsiteUrl=_spPageContextInfo.webAbsoluteUrl+"/"+url; — LZ_MSFT, Feb 05 '18 at 01:44

How to automate site creation on save in a SP list form using JSOM?

1 Answers1