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.
Databoom 
Reblogged this on Dinesh Ram Kali..
LikeLike