Create Web Site using SharePoint REST API & AngularJS: Part 1

I plan to cover the creation of sub-sites in SharePoint 2013 using the Rest API, AngularJS and jQuery in a 3-part series of articles.

1. Create Web site using SharePoint 2013 REST API and AngularJS.
2. Implement AngularJS validation to the website creation form.
3. Convert this application to an app using NAPA in office 365.

Before getting to the main topic, just visit the link http://www.c-sharpcorner.com/UploadFile/54472d/introduction-to-angular-js-in-sharepoint-2013/ for an introduction to the use of AngularJS to access the SharePoint REST API.

To learn more about AngularJS, visit their site at https://angularjs.org/

Now we can jump to the first part of the series. Create a web site using the SharePoint REST API and AngularJS.

I have done some basic combination of both HTML and CSS stuff to do the following UI for a web site creation form.



Here, the scenario is as follows:

1. Populate the Web Templates for the site in a drop down box.
2. Based on the site template selection and user entries, create a site.
3. After site creation, show the success message and newly created Site URL.

To populate the web templates, use the following script code to get the site templates and populate it in a select element using AngularJS.

JavaScript Snippet

$http(
    {
    method: "GET",
    url: "https://sharepointsite/_api/web/GetAvailableWebTemplates(1033)?$filter=(isHidden%20eq%20false)",
    headers:
    {
        "Accept": "application/json;odata=verbose"
    }

}).success(function(data, status, headers, config)
{
    $scope.wts = data.d.results;
}).error(function(data, status, headers, config) {});

//Method to split the string based on the character '#'
$scope.mySplit = function(string, nb)
{
    $scope.array = string.split('#');
    return $scope.result = $scope.array[nb];
}

First we are getting the available site templates for the site using the following REST API:

• The REST API URL returns only the visible site templates as a result
• The successful response stores the result (collection of site templates) in an Anugular js scope variable “wts”

HTML Snippet

<select id="web-template" ng-model="_webTemplate" >
    <option selected="selected" value="">-- Select Site Template --</option>
    <option id="{{mySplit(_wt.Name,0)}}" ng-repeat="_wt in wts | orderBy:'Title'">{{_wt.Title}}</option>
</select>

• Option tag has an ng-repeat attribute. This tells the AngularJS to create an option element for each (web template) _wt in the array (web template collection) _wts using the option as template.
• orderBY: "Title" tells the Angular to order the array based on the Web Template Title.
• _wt.Name returns the Web Template Name in the format STS#0. So we have used the custom method to split the string variable and store the first array from the value.
• _wt.Title was the title of the Web Template.

Next we have a button with a click event to create a web site based on the values entered in the form.

HTML Snippet

<label>
    <span>Title :</span>
    <input type="text" ng-model="_webTitle" placeholder="Enter Title"/>
</label>
<label>
    <span>Url :</span>
    <input type="text" ng-model="_webUrl" placeholder="Enter Url"/>
</label>
<label>
    <span> </span>
    <input type="button" ng-click="createweb()" class="button" value="Create Web"/>
</label>
<label ng-bind-html="_message" ></label>

JavaScript Snippet

$scope.createweb = function()
{
    $scope._message = $sce.trustAsHtml("<img src='/_layouts/images/loadingcirclests16.gif'/>");
    var selectedOption = $("#web-template option:selected");
    var selectedTemplate = selectedOption.attr('id');
    $http({
        method: "POST",
        url: "https://sharepointsite/_api/web/webs/add",
        data:
        {
            'parameters':
            {
                '__metadata':
                {
                    'type': 'SP.WebCreationInformation'
                },
                'Title': $scope._webTitle,
                'Url': $scope._webUrl,
                'WebTemplate': selectedTemplate,
                'UseSamePermissionsAsParentSite': true
            }
        },
        headers:
        {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $('#__REQUESTDIGEST').val(),
        }
    }).success(function(data, status, headers, config)
    {
        $scope._message = $sce.trustAsHtml("<div class='success'>Site created successfully. </div> Click <a href='" + data.d.Url + "'>" + data.d.Title + "</a> to view the created site.");

    }).error(function(data, status, headers, config)
    {
        $scope._message = "<div class='error'>Problem in creating site.</div>";
    });

}

The $scope._message variable shows the status message in the screen.

The $sce.trustAsHtml Angular method transforms the HTML content and binds it to the element that has the attribute ng-bind-html="<variable name>". We need to pass the $sce as a parameter in the controller function during the initialize.

The $scope._webTitle variable get the values from the Title TextBox.

The $scope._webUrl variable has the URL value from the URL TextBox.

We used jQuery to retrieve the selected Web Template option to pass that in the REST API to create a site. I have 3 simple files, for scripting is “createweb.js”, for presenting is “createweb.html” and for styling is “createweb.css”. Download the source code and upload the files to any Document Library and map the HTML file to the Content Editor / Script Editor to have a working form.

 

OUTPUT