Suppose that you are developing a user survey Web application. The application would include the survey form (detailed form) and a form to view and edit the list of surveyed users (list form).

Let us consider the process of creating these forms using the following tools: OData, Angular.js, Bootstrap and JavaScript Grid. All of the necessary features have already been implemented in these tools, and we practically do not need to write anything.

The basic requirements of the survey form are as follows (in the brackets we mention the tool that implements the requirement):

The form fields are: “First Name”, “Last Name”, “Email”, “Comment”

The form should store data in a database for later review and analysis (Angular.js)

The form should conduct data verification prior to sending data to the server (Angular.js)

Form should not reload the page when sending data to the server (Angular.js)

The form should adapt for various screen or div sizes

The basic requirements of the form to operate with the list of users:

Provide paging or virtual scrolling (in case of a large number of users)

Provide sorting by any field (any column of the grid)

Provide the search capability

Enable data adding, editing and deletion

Any known JavaScript grid fully meets all these requirements. For examples, it is worth looking at the following libraries: Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo.

Basic queries to the server:

Add a new record

Modify a record

Delete a record

Get the number of records that meet a certain condition

Get a subset of records to display per page

Get the entire set of records

Sort the records by one or more fields

Filter records for a set of conditions

Perform batch update.

To avoid having to implement all of the necessary handlers, we will use ready OData server databoom. It provides completely automated processing of these queries.

The Survey Form





To develop the Survey Form, we will use Bootstrap and Angular.js.

Bootstrap greatly facilitates the design of the form, enables easy resizing of the elements, etc.

Angular.js provides compactness of code for data verification and sending data the server.

Bootstrap + Angular.js bundle allows you to create simple forms “on the fly”.

We recommend that you always have on hand a few ready templates of different forms. For Example:

A simple detailed form with fields of different types

A simple detailed form with a small list. For example, the detailed form of person’s data with the list of his contacts

etc.

It would be very good practice to keep the templates on a special website like JSFiddle, Bootply, CodePen, Plunker etc.

Based on a template using simple copy-paste we:

Create the form fields, change their names

Indicate that the fields “First Name”, “Last Name” and “Email” are mandatory

Specify URL for storing form data. In this particular case: https://samples.databoom.space/api1/sandboxdb/collections/user .

Slightly customize the form layout (in this case, a comment is placed to the right of the other fields); this is all we have to do.

<!doctype HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example32-production</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link href="http://bootswatch.com/cerulean/bootstrap.min.css" rel="stylesheet" type="text/css"> <style> .form-control { border-width: 2px; } </style> </head> <body ng-app="formExample" ng-controller="ExampleController"> <div class="container"> <div class="col-md-12"> <h1>Simple Bootstrap + Angular.js form</h1> <br /> </div> <form name="myForm"> <div class="col-md-4"> <div class="form-group"> <label for="firstname">First Name:</label> <input class="form-control" id="firstname" type="text" placeholder="Enter first name" ng-model="user.firstname" required autofocus /> </div> <div class="form-group"> <label for="lastname">Last Name:</label> <input class="form-control" type="text" id="lastname" placeholder="Enter last name" ng-model="user.lastname" required /> </div> <div class="form-group"> <label for="email">Email:</label> <input class="form-control" type="email" id="email" name="input" placeholder="Enter email" ng-model="user.email" required> </div> </div> <div class="col-md-8"> <div class="form-group"> <label for="comment">Comment:</label> <textarea rows="9" class="form-control" id="comment" placeholder="Enter comment" ng-model="user.comment"></textarea> </div> </div> <div class="col-md-12"> <input class="btn btn-primary" type="submit" ng-click="insert(myForm.$valid, user)" value="Add new user" /> <input class="btn btn-info" type="submit" ng-click="update(myForm.$valid, user)" value="Update" /><br /><br /> </div> </form> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', '$http', function ($scope, $http) { $scope.update = function (isvalid, user) { if (!isvalid) return; $http.post('https://samples.databoom.space/api1/sandboxdb/collections/user', JSON.stringify(user)) .success(function (data, status, headers, config) { $scope.user = data.d.results; }); }; $scope.insert = function (isvalid, user) { if (!isvalid) return; user.id = undefined; $scope.update(isvalid, user); } }]); </script> </body> </html>

User List



We will develop the User List (list form) based on the sample grid control from Kendo UI library. Virtually all development will be reduced to specifying the right URL for the data modification operations and to the description of the grid columns.

<!DOCTYPE HTML> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding"> <style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; } </style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://samples.databoom.space/api1/sandboxdb/collections/user", create: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, update: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, destroy: { url: function (data) { return "https://samples.databoom.space/api1/sandboxdb/collections/user" + "(" + data.id + ")"; }} }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true, schema: { model: { id: "id" } } }, filterable: true, editable: true, toolbar: ["create", "save", "cancel"], sortable: true, pageable: true, columns: ["firstname", "lastname", "email", "comment", { command: "destroy", title: " ", width: 150 }] }); }); </script> </div> </body> </html>

Server

To process all the necessary queries in this example, we do not need to develop any code. All queries to the database are fully covered by the Odata standard, and databoom automatically processes them.

Conclusion

There are many libraries to simplify Web development, such as: Angular.js Bootstrap, Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, angular-odata, databoom etc. Each library solves a particular problem. Successful selection of a set of libraries for a specific application can significantly reduce the development time.

Using the template forms with the libraries listed above would allow you to develop “on the fly” using copy-paste and making only minor changes to the code.