JavaScript DataSource Setup

Home >Shield UI Documentation >DataSource >JavaScript >JavaScript DataSource Setup

Shield UI DataSource is a JavaScript component that simplifies working with data on the client-side. It is part of the core Shield UI scripts and is available on the page once the JavaScript references are added:

<!DOCTYPE html>
<html>
<head>
<title>Shield DataSource</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

</body>
</html>

The DataSource component is initialized through the shield.DataSource constructor, passing initialization options as a first argument object literal :

$(function () {
	var ds = new shield.DataSource({
		data: [/* data array*/],
		skip: 3,
		take: 5,
		sort: { path: "path.to.sort.field", desc: true },
		filter: { path: "path.to.filter.field", filter: "eq", value: 13 }
	});
	
	ds.read().then(function () {
		var dataView = ds.view;
		//dataView contains the filtered, sorted and paged data
	});
});

After a data source component is created, it needs to read the data and apply the specified data transformations. The read() method of the data source component returns a jQuery Promise object that can be waited for. When the success function is called, the view field of the component contains the result of the transformation as a JavaScript array. This can then be used for display on the page.