SharePoint 2013 Custom List Form

using Angular JS and Bootstrap

According to  Microsoft InfoPath Forms Services for SharePoint Server 2013 will be supported until April 2023. Keeping that in mind I have started looking into alternatives to build rich form which can be used with SharePoint list and replace OOTB form. I have started looking into Angular JS (AngularJS is a JavaScript framework. AngularJS extends HTML attributes with directives and binds data to HTML with expressions). From user interface point of view I spend some time with bootstrap (Bootstrap makes front-end web development faster and easier).

In the below example, I will use both AngularJS and Bootstrap to build custom SharePoint 2013 form to create new list items.

For this demo purpose, I will use SharePoint page with “Script Editor” to build this form. I highly recommend to use visual studio to build .aspx and .js files and update list schema to change lists default New/Edit forms.

1.Create “Customer Details” list which have the following column

Schema name

Display name

Title

First name

LastName

Last name

Address

Address

 

2.     Now create a new page in SharePoint 2013 “Pages” library. 

 

3.     Add “Script Editor” web part on the page.

4.     Copy and paste the following code inside script editor

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
    function mainController($scope) {

        $scope.customer = { firstName: "", lastName: "", location: "" };
        $scope.createContact = function ($event) {
            var c = $scope.customer;
            $event.preventDefault();

            var clientContext = new SP.ClientContext.get_current();
            var web = clientContext.get_web();
            var list = web.get_lists().getByTitle('Customer Details');
            var customerListItemInfo = new SP.ListItemCreationInformation();
            var listItem = list.addItem(customerListItemInfo);
            listItem.set_item('Title', c.firstName);
            listItem.set_item('LastName', c.lastName);
             listItem.set_item('Address', c.address);
            listItem.update();
            clientContext.executeQueryAsync(
                Function.createDelegate(this, onQuerySucceeded),
                Function.createDelegate(this, onQueryFailed)
            );

        };

        onQuerySucceeded = function () {
            alert('Successfully created new customer record');
        }

        onQueryFailed = function (sender, args) {
            alert('Failed: ' + args.get_stackTrace());
        }
    }
</script>

<h2>Customer Information:</h2>
<br />
<div ng-app="">
    <div ng-controller="mainController">
        First name
        <input type="text" ng-model="customer.firstName" /><br />
        <br />
        Last name
        <input type="text" ng-model="customer.lastName" /><br />
        <br />
        Address
		<input type="text" ng-model="customer.address" /><br />
        <br />
        <input type="submit" value="Save" ng-click="createContact($event)" />
    </div>
</div>

5.     Save the page and publish it. The form will look something like this.

You can now go ahead and start using the form to create new customer records, but I like to make the user interface a little better.

To do that, I have added bootstrap css library reference and added some classes with html elements.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
    function mainController($scope) {

        $scope.customer = { firstName: "", lastName: "", location: "" };
        $scope.createContact = function ($event) {
            var c = $scope.customer;
            $event.preventDefault();

            var clientContext = new SP.ClientContext.get_current();
            var web = clientContext.get_web();
            var list = web.get_lists().getByTitle('Customer Details');
            var customerListItemInfo = new SP.ListItemCreationInformation();
            var listItem = list.addItem(customerListItemInfo);
            listItem.set_item('Title', c.firstName);
            listItem.set_item('LastName', c.lastName);
             listItem.set_item('Address', c.address);
            listItem.update();
            clientContext.executeQueryAsync(
                Function.createDelegate(this, onQuerySucceeded),
                Function.createDelegate(this, onQueryFailed)
            );

        };

        onQuerySucceeded = function () {
            alert('Successfully created new customer record');
        }

        onQueryFailed = function (sender, args) {
            alert('Failed: ' + args.get_stackTrace());
        }
    }
</script>
      <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<h2>Customer Information:</h2>
<br />
<div ng-app="">
    <div ng-controller="mainController" class="col-xs-5 selectContainer form-group">
        First name
        <input type="text" ng-model="customer.firstName" class="form-control"/><br />
        <br />
        Last name
        <input type="text" ng-model="customer.lastName" class="form-control" /><br />
        <br />
        Address
		<input type="text" ng-model="customer.address" class="form-control" /><br />
        <br />
        <input type="submit" value="Save" ng-click="createContact($event)" class="btn btn-primary btn-lg active" />
    </div>
</div>

You can see the difference as it look more professional after adding couple of bootstrap css classes.

 

I hope the above demonstration is helpful. Smile

 

More Blogs

Contact us

To begin your digital transformation, get in touch.

We’re pleased to address any inquiries you might have and assist you in selecting the service that best suits your requirements.

Your benefits:
Speak To Us