Isomorphic SmartClient Widgets Library for AngularJS.
Allows you to use Isomorphic SmartClient (ISC) Library widgets in AngularJS projects.
<!doctype html>
<html ng-app="sampleApp">
<head>
<!-- setup Isomorphic SmartClient -->
<script>var isomorphicDir = "lib/isomorphic/";</script>
<script src="lib/isomorphic/system/modules/ISC_Core.js"></script>
<script src="lib/isomorphic/system/modules/ISC_Foundation.js"></script>
<script src="lib/isomorphic/system/modules/ISC_Containers.js"></script>
<script src="lib/isomorphic/system/modules/ISC_Grids.js"></script>
<script src="lib/isomorphic/system/modules/ISC_Forms.js"></script>
<script src="lib/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script src="lib/isomorphic/system/modules/ISC_RichTextEditor.js"></script>
<script src="lib/isomorphic/skins/SmartClient/load_skin.js"></script>
<script src="lib/js/angular.min.js"></script>
<script src="ng-isc.js"></script>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.full {
width: 100%;
height: 100%;
}
</style>
</head>
<body ng-controller="SampleCtrl">
<!--root isomorphic directive must be defined as attribute in valid html tag, because ISC control get his
dimensions-->
<div class="full" isc-v-layout sc-width="'100%'" sc-height="'100%'">
<isc-list-grid sc-width="'100%'" sc-height="'50%'" sc-fields="fields" sc-data="data" ng-model="value"
sc-show-resize-bar="true" sc-on-row-double-click="onDoubleClick"></isc-list-grid>
<isc-dynamic-form sc-width="'100%'" sc-height="'*'" sc-fields="fields" ng-model="value"></isc-dynamic-form>
<isc-rich-text-editor sc-width="'100%'" sc-height="'10%'" ng-model="out"></isc-rich-text-editor>
</div>
<script type="text/javascript">
angular.module('sampleApp', ['ng-isc']).controller('SampleCtrl', ['$scope', function ($scope) {
$scope.fields = [
{name: 'name'},
{name: 'value'}
];
$scope.data = [
{name: 'one', value: 1},
{name: 'two', value: 2},
{name: 'three', value: 3}
];
$scope.out = '';
$scope.onDoubleClick = function (record, recordNum, fieldNum) {
$scope.out += 'Record ' + recordNum + ' double clicked<br>';
};
}]);
</script>
</body>
</html>In order to create ISC control, you must use directive with the name of ISC control class name and prefix 'isc'. For example, if you want to create ListGrid widget, you must use directive 'iscListGrid' as a tag name or attribute.
Each property of ISC control which can be put in create(props) function or set by a setter, can be determined through attribute with prefix 'sc-' and a name of a property. For example, for the property showEdges you must add attribute sc-show-edges="true". All 'sc-' attributes values are evaluated before use, i.e. all strings must be quoted with single-quotes (sc-name="'Hello world!'" or sc-name="'Hello {{name}}!'").
In order to subscribe to ISC control events you must use the attributes with prefix 'sc-on-'.
Also you can initialize ISC control by passing config object through attribute 'sc-config-object'.
// controller
function SampleCtrl($scope) {
$scope.config = {
width: '100%',
height: '100%'
};
}
// html
<isc-h-layout sc-config-object="config"></isc-h-layout>