Imagino que casi todos ya lo conocen, y muchos ya lo utilizamos hace algún tiempo. AngularJs es un framework de javascript que permite trabajar con modelos MVC (Modelo Vista Controlador) de forma fácil y rápida.
La verdad que el mundo del javascript esta pegando los últimos años unas mejoras y expansión espectacular, y lo bueno de todo esto, es que Dynamics CRM está apoyado en todo esto y nos permite aprovecharnos de todo lo nuevo.
Lo que voy a hacer hoy es una especie de “Hola mundo”, aprovechando lo siguiente:
- AngularJS (con su NGGrid)
- jQuery
- Ejemplos en javascript de la SDK de CRM
La idea funcional es mostrar en un Dashboard de CRM (Panel), un web resource, que recoja datos de CRM y mediante AngularJS, me cree un grid, con funcionalidades como agrupar, ordenar, etc.
Lo que finalmente obtengo es lo siguiente, un grid de Cuentas, con sus ciudades, y la posibilidad de ordenar y agrupar haciendo drag & drop, todo esto en un web resource dentro de un dashboard:
Como lo hice, es bastante sencillo. Primero empiezo con un web resource de tipo HTML con el siguiente código:
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>CRM con AngularJS</title>
<link rel="stylesheet" type="text/css" href="new_nggrid.min.css" />
<link rel="stylesheet" type="text/css" href="new_style.css" />
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript" src="new_jquery2.0.3.min.js"></script>
<script type="text/javascript" src="new_jqueryui1.9.1.custom.min.js"></script>
<script type="text/javascript" src="new_angular.min.js"></script>
<script type="text/javascript" src="new_nggrid2.0.7.min.js"></script>
<script type="text/javascript" src="new_SDK.REST.js"></script>
<script type="text/javascript" src="new_script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
En este HTML, lo importante es como llamo a mi aplicación “myApp” con el parámetro ng-app y luego el control “MyCtrl” con el parámetros ng-controller, que utilizaré luego.
Fácil, el tema es que hay que añadirle muchas librerías de javascript. Para esto, las añado como web resources en mi solución:
Todos esos javascript son librerías genéricas (angular, jquery, etc.) salvo una que llamé “script.js”. En este fichero voy a añadir la lógica de mi formulario:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) { $scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [250, 500, 1000],
pageSize: 250,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var number = 50;
var options = "$select=Name,Telephone1,Address1_City&$top=" + number ;
SDK.REST.retrieveMultipleRecords("Account", options, function (retrievedAccounts){
$scope.setPagingData(retrievedAccounts,page,pageSize);
}, function (error) { alert(error.message); }, function (res){var aux=1;});
}, 100);
};
$scope.gridOptions = {
data: 'myData',
enablePaging: false,
showFooter: false,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
columnDefs: [{field:'Name', displayName:'Name'}, {field:'Telephone1', displayName:'Telephone1'}, {field:'Address1_City', displayName:'Address1_City'}],
showGroupPanel: true,
jqueryUIDraggable: true,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: true,
};
});
Este código consulta a CRM al punto oData, y el resultado que es un objeto jSON, lo meto en gridoptions con sus columnas definidas en “columnDefs”. Además en gridOptions se pueden añadir o quitar parámetros de comportamientos del grid, como paginaciones, ediciones, selección de líneas o celdas, etc.
Para mas información, recomiendo estudiarse a fondo este framework, a mí sinceramente me encante porque soy un amante del Javascript (
http://angularjs.org/). Mirar también algo específico de ngGrid (Grid de AngularJS utilizado en este ejemplo).
Por último, como siempre, les dejo toda la solución no administrada para que podáis jugar:
angulasJS_1_0_0_0.zip
Un saludo!
).
Suscribirse al RSS