{"id":532,"date":"2013-06-18T11:00:35","date_gmt":"2013-06-18T10:00:35","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=532"},"modified":"2013-07-16T10:06:00","modified_gmt":"2013-07-16T09:06:00","slug":"compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/","title":{"rendered":"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I)"},"content":{"rendered":"<p>La semana pasada salio a la luz el <strong>n\u00famero 16 de la revista digital<\/strong> <a href=\"http:\/\/www.compartimoss.com\" target=\"_blank\">CompartiMOSS<\/a>\u00a0en la que por cuarto n\u00famero consecutivo he tenido el placer de escribir un art\u00edculo. Este n\u00famero tiene muchos <strong>art\u00edculos interesantes sobre nuestro servidor favorito<\/strong> tanto para la versi\u00f3n 2013 como para 2010 as\u00ed que no dud\u00e9is en leerla, os lo recomiendo.<\/p>\n<p>Desde aqu\u00ed, dar las gracias a los directores de la revista: <a href=\"http:\/\/geeks.ms\/blogs\/ciin\" target=\"_blank\">Juan Carlos Gonzalez<\/a>, <a href=\"https:\/\/twitter.com\/fabianimaz\" target=\"_blank\">Fabian Imaz<\/a>, <a href=\"http:\/\/www.gavd.net\/servers\/default.aspx\" target=\"_blank\">Gustavo Velez<\/a> y <a href=\"http:\/\/geeks.ms\/blogs\/adiazmartin\/\" target=\"_blank\">Alberto D\u00edaz<\/a> por el gran trabajo que est\u00e1n haciendo en la revista.<\/p>\n<p>A continuaci\u00f3n os dejo con mi art\u00edculo (el c\u00f3digo fuente podr\u00e9is descargarlo en un enlace al final del post):<\/p>\n<p><!--more--><\/p>\n<h2><b>Resumen<\/b><\/h2>\n<p>En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo en el \u00e1mbito de desarrollo, para, de esta forma, quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript.<\/p>\n<p>Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma, de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, <strong>el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d<\/strong> ofreciendo soluciones que sirvan para todo tipo de plataformas.<\/p>\n<h2><b>Art\u00edculo<\/b><\/h2>\n<p>La llegada de la nueva versi\u00f3n de SharePoint obliga en cierto modo a que los desarrolladores de anteriores versiones tengan que adaptarse a los cambios del desarrollo en la Web y a familiarizarse con un lenguaje de programaci\u00f3n que no levanta las simpat\u00edas de la comunidad .NET. Este lenguaje como se deduce es JavaScript. En este art\u00edculo se va a introducir el\u00a0 framework JavaScript Kendo UI de Telerik y en un art\u00edculo posterior ExtJS de Sencha para facilitar nuestro trabajo en los desarrollos a realizar y sobre todo otorgarles una mayor calidad a los mismos.<\/p>\n<h3><b>\u00bfQu\u00e9 es un Framework?<\/b><\/h3>\n<p>Seg\u00fan la Wikipedia es una estructura conceptual y tecnol\u00f3gica de soporte definido, normalmente con artefactos o m\u00f3dulos de software concretos, que puede servir de base para la organizaci\u00f3n y desarrollo de software. T\u00edpicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para as\u00ed ayudar a desarrollar y unir los diferentes componentes de un proyecto. Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodolog\u00eda de trabajo que extiende o utiliza las aplicaciones del dominio.<\/p>\n<h3><b>\u00bfPor qu\u00e9 utilizar un Framework JavaScript? <\/b><\/h3>\n<p>Si analizamos el uso que anteriormente hac\u00edamos de JavaScript en nuestros desarrollos casi siempre se basaban en utilizar alguna librer\u00eda, bien para dotarnos de un efecto que nos gustaba (ejemplo del t\u00edpico banner slider que est\u00e1 en much\u00edsimas webs), bien hacer uso del patr\u00f3n MVVM mediante la librer\u00eda KnockoutJS como introdujo Edin Kapic en n\u00fameros anteriores de la revista. O bien, hacer uso de JQuery para a\u00f1adir una funcionalidad especifica (validar campos, ocultar los mismos, refrescar datos, etc&#8230;).<\/p>\n<p>El utilizar JavaScript sin entender realmente lo que estamos desarrollando hace que nuestros desarrollos tengan falta de calidad y bugs relativos a este uso. Es decir, vamos concatenando funcionalidades JavaScript a nuestros desarrollos sin saber bien qu\u00e9 acciones estamos realizando dentro de nuestro desarrollo. Esto hace que mezclemos diferentes versiones de las librer\u00edas que estamos utilizando y proporciona que se produzcan muchos fallos en nuestros desarrollos. Estos fallos son debidos al desconocimiento sobre JavaScript como lenguaje de programaci\u00f3n. Y lo que dentro de un desarrollo en .NET ni siquiera nos lo planteamos, en JavaScript dado que es un lenguaje muy vivo y permisivo (en tiempo de desarrollo) no dudamos \u00a0en realizarlo.<\/p>\n<p>El uso de un Framework JavaScript proporciona que nos olvidemos de estos problemas a la vez que introduce una serie de patrones para otorgarle m\u00e1s calidad a nuestro software. Eso s\u00ed, \u00a0esto no implica\u00a0 que no tengamos que conocer JavaScript como lenguaje de programaci\u00f3n. \u00a0Nos proporciona una abstracci\u00f3n de c\u00f3digo com\u00fan que provee funcionalidades gen\u00e9ricas que pueden ser utilizadas para desarrollar aplicaciones de manera r\u00e1pida, f\u00e1cil, modular y sencilla, ahorrando tiempo y esfuerzo. Estas funcionalidades se traducen en la forma de diversos tipos de Grid, Combos, Formularios, efectos en las im\u00e1genes y distintos gr\u00e1ficos de barras. Aunque este tipo de componentes tambi\u00e9n los tenemos disponibles en desarrollos en .NET, la gran ventaja del uso de estos Frameworks es que est\u00e1n basadas en los est\u00e1ndares web y que son compatibles con todos los dispositivos m\u00f3viles\/tabletas (IOS, Android, Windows Phone, Surface) y\u00a0 todos los navegadores modernos (IE8 o superior, Chrome, Mozilla). Adem\u00e1s aportan unos patrones para realizar nuestros desarrollos lo que repercute directamente en la calidad del software.<\/p>\n<p>Otra gran ventaja es que generan una interfaz de usuario muy intuitiva y con gran variedad de gr\u00e1ficos de barras, gauges, y diversos indicadores muy interesantes para incluir en nuestros desarrollos<\/p>\n<h3><b>Manos a la obra <\/b><\/h3>\n<p>A continuaci\u00f3n, nos centraremos en introducir estos Frameworks dentro de nuestros desarrollos utiliz\u00e1ndolos en una aplicaci\u00f3n de SharePoint. A modo de ejemplo, crearemos un t\u00edpico mantenimiento de datos maestros que permite mostrar aspectos muy \u00fatiles de estas herramientas. El resultado ser\u00eda el siguiente wireframe:<\/p>\n<p><div id=\"attachment_533\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-533\" class=\" wp-image-533  \" title=\"Wireframe CompartiMOSS\" alt=\"Wireframe CompartiMOSS\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg\" width=\"500\" height=\"200\" \/><\/a><p id=\"caption-attachment-533\" class=\"wp-caption-text\">Imagen 1.- Wireframedel desarrollo a implementar<\/p><\/div><\/p>\n<p>En concreto, la aplicaci\u00f3n permite mostrar en un Grid el contenido de una lista de SharePoint que contiene los m\u00e1ximos anotadores de la NBA, y con la posibilidad de a\u00f1adir, editar y eliminar cualquiera de estos registros y a la vez visualizamos una gr\u00e1fica en la que se realiza una comparaci\u00f3n de los mismos.<\/p>\n<h3><b>Utilizando el Framework Kendo UI Telerik<\/b><\/h3>\n<p>Kendo es un framework JavaScript creado por Telerik (cuyos componentes dentro del mundo .NET son muy populares)\u00a0 con menos de un a\u00f1o de vida. Su funcionamiento consiste extender de forma sencilla las capacidades que disponibles en jQuery. Desde Kendo se puede bien consumir el modelo de objetos de cliente (CSOM) JavaScript o bien consumir directamente la API REST. En este ejemplo vamos a utilizar la API REST por dos motivos:<\/p>\n<ul>\n<li>En primer lugar, poner en pr\u00e1ctica el <strong>uso de est\u00e1ndares web<\/strong> en aplicaciones.<\/li>\n<li>En segundo lugar, demostrar que <strong>la API REST de SharePoint tiene la misma potencia que el modelo de objetos de Cliente<\/strong> con la gran ventaja de qu\u00e9 se pude usar desde plataformas Microsoft (W8, WP8) y no Microsoft (IOS, Android).<\/li>\n<\/ul>\n<h3><b>Empezar el desarrollo<\/b><\/h3>\n<p>Este desarrollo se va a implementar por medio de una APP de tipo SharePoint-Hosted, (aunque se podr\u00eda portar sin ning\u00fan problema en WebParts cl\u00e1sicos):<\/p>\n<p>Abrimos Visual Studio 2012, y seleccionamos un proyecto de este tipo:<\/p>\n<p><div id=\"attachment_534\" style=\"width: 410px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/AppVisualStudio.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-534\" class=\" wp-image-534  \" alt=\"Imagen 2.- Asistente para crear la aplicaci\u00f3n SharePoint-Hosted.\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/AppVisualStudio.jpg\" width=\"400\" height=\"200\" \/><\/a><p id=\"caption-attachment-534\" class=\"wp-caption-text\">Imagen 2.- Asistente para crear la aplicaci\u00f3n SharePoint-Hosted.<\/p><\/div><\/p>\n<p>En primer lugar, agregamos al proyecto una lista llamada Players en la que a\u00f1adiremos los datos que queremos mostrar en el grid. Esta lista contendr\u00e1 los siguientes campos:<\/p>\n<p><div id=\"attachment_535\" style=\"width: 629px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/CrearListas.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-535\" class=\"size-full wp-image-535\" alt=\"Definici\u00f3n de la Lista Players\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/CrearListas.jpg\" width=\"619\" height=\"149\" srcset=\"https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/CrearListas.jpg 619w, https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/CrearListas-300x72.jpg 300w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><\/a><p id=\"caption-attachment-535\" class=\"wp-caption-text\">Imagen 3.- Definici\u00f3n de la Lista Players<\/p><\/div><\/p>\n<p>Dentro de la lista le a\u00f1adiremos unos datos por defecto para que una vez que carguemos el grid podamos ver algunos resultados. Para a\u00f1adir los datos basta con editar el archivo \u201celements.xml\u201d que se encuentra ubicado dentro de la Instancia de la lista y a\u00f1adir los datos.<\/p>\n<p>La siguiente acci\u00f3n a realizar consiste en importar las librer\u00edas JavaScript y los CSS de Kendo (vamos a aprovechar el estilo que viene de serie y dejamos para los dise\u00f1adores la edici\u00f3n de estos CSS) por lo que a\u00f1adimos los siguientes ficheros al proyecto: \u201ckendo.all.min.js\u201d, \u201ckendo.common.min.css\u201d y \u201ckendo.default.min.css\u201d (estos ficheros se encuentran disponibles dentro de la descarga del propio framework).<\/p>\n<p>En la p\u00e1gina default.aspx a\u00f1adimos referencias a las librer\u00edas JavaScript y archivos .CSS de la siguiente forma:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    \t\t\t&lt;link href=&quot;..\/Content\/App.css&quot; rel=&quot;Stylesheet&quot; type=&quot;text\/css&quot; \/&gt;\r\n    \t\t\t&lt;link href=&quot;..\/Content\/kendo.common.min.css&quot; rel=&quot;stylesheet&quot; \/&gt;\r\n    \t\t\t&lt;link href=&quot;..\/Content\/kendo.default.min.css&quot; rel=&quot;stylesheet&quot; \/&gt;&lt;script type=&quot;mce-text\/javascript&quot; src=&quot;..\/Scripts\/kendo.all.min.js&quot;&gt;&lt;\/script&gt;&lt;script type=&quot;mce-text\/javascript&quot; src=&quot;..\/Scripts\/App.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Una vez ya tenemos las referencias a las librer\u00edas que vamos a utilizar, comenzamos con el desarrollo. Para ello todo el c\u00f3digo que vamos a necesitar lo incluiremos dentro de la p\u00e1gina default.aspx y dentro del archivo App.js. En primer lugar haremos uso de un componente Datasource, que es una abstracci\u00f3n para el uso de datos locales (arrays de objetos) o remotos (XML, JSON, JSONP). \u00a0Este componente es totalmente compatible con operaciones de tipo CRUD (Create, Read, Update, Destroy) y proporciona apoyo tanto en el lado cliente como del lado del servidor para la ordenaci\u00f3n, la paginaci\u00f3n, el filtrado, agrupaci\u00f3n y agregados.<\/p>\n<p>Abriremos el fichero app.js y definimos este componente de forma que apunte a la lista de SharePoint creada. \u00a0En la definici\u00f3n, configuraremos el modelo que vamos a usar y personalizaremos algunas caracter\u00edsticas. A continuaci\u00f3n, se muestra la definici\u00f3n, configuraci\u00f3n y uso del componente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ndataSource = new kendo.data.DataSource({\r\n        type: &quot;odata&quot;,\r\n        transport: {\r\n            read: {\r\n                url: listUrl,\r\n                type: &quot;GET&quot;,\r\n                dataType: &quot;json&quot;,\r\n                contentType: &quot;application\/json;odata=verbose&quot;,\r\n                headers: {\r\n                    &quot;accept&quot;: &quot;application\/json;odata=verbose&quot;\r\n                }\r\n            }\r\n        },\r\n        pageSize: 5,\r\n        schema: {\r\n            data: &quot;d.results&quot;,\r\n            model: {\r\n                id: &quot;ID&quot;,\r\n                fields: {\r\n                    ID: { editable: false, nullable: false },\r\n                    Title: { validation: { required: true } },\r\n                    Scores: { type: &quot;number&quot; },\r\n                    Team: { type: &quot;string&quot; }\r\n                }\r\n            }\r\n        }\r\n    });\r\n<\/pre>\n<p>Como se pude apreciar, \u00fanicamente hemos realizado la configuraci\u00f3n \u201cread\u201d para el origen de datos. Conforme definamos el resto de operaciones CRUD, iremos a\u00f1adiendo m\u00e1s configuraci\u00f3n. Del resto de configuraciones, lo que resulta m\u00e1s interesante es que por un lado, el n\u00famero de elementos que estamos paginando en nuestro caso es 5 y por otro lado estamos realizando la definici\u00f3n de un esquema con un modelo de datos, en los que podemos ir a\u00f1adiendo diversas caracter\u00edsticas interesantes como son los campos requeridos, si permitimos editarlos, etc.<\/p>\n<p>A continuaci\u00f3n vamos a crearnos un Grid, para ello en primer lugar nos vamos a la p\u00e1gina \u201cDefault.aspx\u201d y a\u00f1adimos el div donde lo posicionaremos de la siguiente forma:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;\/pre&gt;\r\n&lt;div id=&quot;grid&quot;&gt;&lt;\/div&gt;\r\n&lt;pre&gt;<\/pre>\n<p>Dentro del fichero App.js, a continuaci\u00f3n de la definici\u00f3n del DataSource, introduciremos el siguiente c\u00f3digo:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(&quot;#grid&quot;).kendoGrid({\r\n\r\n        dataSource: dataSource,\r\n        pageable: true,\r\n        height: 430,\r\n        columns: &#x5B;\r\n            { field: &quot;ID&quot;, title: &quot;ID&quot; },\r\n            { field: &quot;Title&quot;, title: &quot;Player&quot; },\r\n            { field: &quot;Scores&quot;, title: &quot;Scores&quot; },\r\n            { field: &quot;Team&quot;, title: &quot;Team&quot; }]\r\n\r\n    });\r\n<\/pre>\n<p>A este tipo de grid se les puede otorgar mucho m\u00e1s complejidad, como agrupar por equipos, mostrar totales, etc, y solo a\u00f1adiendo unas pocas de opciones, para ello consultar la propia documentaci\u00f3n de Kendo y pod\u00e9is obtener todas las posibilidades que nos blinda la herramienta. Si ejecutamos y desplegamos la APP, obtendremos el siguiente resultado:<\/p>\n<p><div id=\"attachment_539\" style=\"width: 410px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/ResultadoObtenido.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-539\" class=\" wp-image-539 \" alt=\"Resultado obtenido al desplegar la APP.\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/ResultadoObtenido.png\" width=\"400\" height=\"400\" \/><\/a><p id=\"caption-attachment-539\" class=\"wp-caption-text\">Imagen 4.- Resultado obtenido al desplegar la APP.<\/p><\/div><\/p>\n<p>Una vez tenemos este primer resultado, el siguiente paso es introducir a ambos componentes la posibilidad de poder a\u00f1adir, editar y eliminar elementos. En primer lugar iremos al fichero App.js y reemplazaremos la definici\u00f3n del DataSource, por la siguiente definici\u00f3n:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ndataSource = new kendo.data.DataSource({\r\n        type: &quot;odata&quot;,\r\n        transport: {\r\n            read: {\r\n                url: listUrl,\r\n                type: &quot;GET&quot;,\r\n               dataType: &quot;json&quot;,\r\n                contentType: &quot;application\/json;odata=verbose&quot;,\r\n                headers: {\r\n                    &quot;accept&quot;: &quot;application\/json;odata=verbose&quot;\r\n                }\r\n            },\r\n           create: {\r\n                    url: listUrl,\r\n                    type: &quot;POST&quot;,\r\n                    dataType: &quot;json&quot;,\r\n                    contentType: &quot;application\/json;odata=verbose&quot;,\r\n                   headers: {\r\n                        &quot;accept&quot;: &quot;application\/json;odata=verbose&quot;,\r\n                        &quot;X-RequestDigest&quot;: $(&quot;#__REQUESTDIGEST&quot;).val(),\r\n                    }\r\n            },\r\n            update: {\r\n                    url: function (data) {\r\n                        return listUrl + &quot;(&quot; + data.ID + &quot;)&quot;;\r\n                    },\r\n                    beforeSend: function (jqXhr, options) {\r\n                        var data = JSON.parse(options.data);\r\n                        jqXhr.setRequestHeader(&quot;If-Match&quot;, data.__metadata.etag);\r\n\r\n                    },\r\n                    type: &quot;POST&quot;,\r\n                    dataType: &quot;json&quot;,\r\n                   contentType: &quot;application\/json;odata=verbose&quot;,\r\n                    headers: {\r\n                        &quot;accept&quot;: &quot;application\/json;odata=verbose&quot;,\r\n                        &quot;X-RequestDigest&quot;: $(&quot;#__REQUESTDIGEST&quot;).val(),\r\n                        &quot;X-HTTP-Method&quot;: &quot;MERGE&quot;\r\n                   },\r\n                },\r\n            destroy: {\r\n                    url: function (data) {\r\n                        return listUrl + &quot;(&quot; + data.ID + &quot;)&quot;;\r\n                    },\r\n                    type: &quot;DELETE&quot;,\r\n                    dataType: &quot;json&quot;,\r\n                    contentType: &quot;application\/json;odata=verbose&quot;,\r\n                    headers: {\r\n                        &quot;accept&quot;: &quot;application\/json;odata=verbose&quot;,\r\n                        &quot;X-RequestDigest&quot;: $(&quot;#__REQUESTDIGEST&quot;).val(),\r\n                        &quot;X-HTTP-Method&quot;: &quot;MERGE&quot;,\r\n                        &quot;If-Match&quot;: &quot;*&quot;\r\n                    }\r\n            },\r\n\r\n            parameterMap: function (data, type) {\r\n         if (type === &quot;update&quot; &amp;&amp; data&#x5B;&quot;__deferred&quot;]){\r\n            delete data&#x5B;&quot;__deferred&quot;];\r\n\r\n        }\r\n\r\n        return kendo.stringify(data);\r\n    }\r\n        },\r\n        pageSize: 100,\r\n        schema: {\r\n            data: &quot;d.results&quot;,\r\n            model: {\r\n                Id:&quot;ID&quot;,\r\n                fields: {\r\n                    Title: { type: &quot;string&quot;  },\r\n                    Scores: { type: &quot;number&quot; },\r\n                    Team: { type: &quot;string&quot; }\r\n                }\r\n            }\r\n        }\r\n    });    });\r\n<\/pre>\n<p>De esta forma, estamos consiguiendo a\u00f1adirle a nuestro origen de datos que permita realizar operaciones de CRUD. Para ellos hemos a\u00f1adido la opci\u00f3n \u201ccr\u00e9ate\u201d,\u201dupdate\u201d, \u201cdestroy\u201d y \u201cparameterMap\u201d. Esta \u00faltima sirve para indicar que par\u00e1metros queremos enviar o no a SharePoint utilizando la API REST. Debido a que si enviamos los datos tal y como lo genera\u00a0 Kendo da un error indicando que aun un valor \u00ab__deferred\u201d que no es admitido. Por este motivo lo que hacemos antes de enviar los datos es eliminar este valor para evitar cualquier fallo al enviar los datos.<\/p>\n<p>Una vez tenemos preparado el datasource, con a\u00f1adir una serie de opciones en el grid dispondremos de un formulario para dar de alta los jugadores, la posibilidad de editar y eliminar los mismos datos. Para ello realizamos las siguientes modificaciones en el componente Grid que hab\u00edamos implementado anteriormente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(&quot;#grid&quot;).kendoGrid({\r\n        dataSource: dataSource,\r\n        pageable: {\r\n            refresh: true,\r\n            pageSizes: true\r\n        },\r\n        height: 430,\r\n        toolbar: &#x5B;&quot;create&quot;],\r\n        columns: &#x5B;\r\n               { field: &quot;Title&quot;},\r\n               { field: &quot;Scores&quot; },\r\n               { field: &quot;Team&quot; },\r\n            { command: &#x5B;&quot;edit&quot;,&quot;destroy&quot;], title: &quot;\u00a0&quot;, width: &quot;45px&quot; }],\r\n         editable: &quot;popup&quot;\r\n\r\n    });\r\n<\/pre>\n<p>Como se deduce, hemos modificado las columnas del grid para a\u00f1adir una nueva columna command en la que podremos editar y eliminar el registro autom\u00e1ticamente. Adicionalmente, en la parte superior hemos creado un bot\u00f3n para a\u00f1adir nuevos registros. Este bot\u00f3n puede tener dos funcionalidades bien a\u00f1adir el registro directamente en el grid, o bien mostrar una ventana modal en la que en la que introducir el nuevo registros. En este caso se ha optado por la segunda opci\u00f3n. \u00a0Una de las grandes ventajas que tiene es que cuando realizamos cualquier opci\u00f3n de edici\u00f3n de los registros estos formularios son inteligentes, en el sentido que ya incorporan la propia validaci\u00f3n de los campos obligatorios y del formato de los mismos.<\/p>\n<p>El resultado se muestra a continuaci\u00f3n:<\/p>\n<p><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/ResultadoFinal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-541\" alt=\"Imagen 5.- Grid resultante con operaciones CRUD.\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/ResultadoFinal.png\" width=\"402\" height=\"100\" \/><\/a><\/p>\n<p>Cuando pulsamos sobre el bot\u00f3n de \u201cAdd new record\u201d vemos como se muestra la pantalla modal:<\/p>\n<p><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/AddResultadoFinal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-542\" alt=\"Imagen 7.- Ventana modal para a\u00f1adir registros.\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/AddResultadoFinal.png\" width=\"500\" height=\"300\" \/><\/a><\/p>\n<p>Una vez realizado las operaciones b\u00e1sicas vamos a mostrar como con el mismo datasource se pude visualizar una gr\u00e1fica relativamente simple y muy sencilla de implementar. Para ello tenemos que hacer uso del Widget \u201cBar Char\u201d. Antes de ponernos con el JavaScript retocamos un poco el HTML para ello a\u00f1adimos las siguientes l\u00edneas de c\u00f3digo dentro de la p\u00e1gina default.aspx:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;chart-wrapper&quot; style=&quot;margin: auto;&quot;&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>A continuaci\u00f3n, modificamos el archive App.js de la siguiente forma:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(&quot;#chart&quot;).kendoChart({\r\n        dataSource: dataSource,\r\n        title: {\r\n            text: &quot;Promedio Puntos Jugadores&quot;\r\n        },\r\n        legend: {\r\n            position: &quot;top&quot;\r\n        },\r\n        seriesDefaults: {\r\n            type: &quot;column&quot;\r\n        },\r\n        series:\r\n        &#x5B;{\r\n            field: &quot;Scores&quot;,\r\n            name: &quot;Scores&quot;\r\n\r\n        }],\r\n        categoryAxis: {\r\n            field: &quot;Title&quot;,\r\n            labels: {\r\n                rotation: -90\r\n            },\r\n            majorGridLines: {\r\n                visible: false\r\n            }\r\n        },\r\n        valueAxis: {\r\n            labels: {\r\n                format: &quot;N0&quot;\r\n            },\r\n            majorUnit: 10000,\r\n            line: {\r\n                visible: false\r\n            }\r\n        },\r\n        tooltip: {\r\n            visible: true,\r\n            format: &quot;N0&quot;\r\n        }\r\n    });\r\n<\/pre>\n<p>Una vez a\u00f1adido estas modificaciones ya tenemos el grafico listo en nuestra aplicaci\u00f3n como mostramos en la siguiente pantalla:<\/p>\n<p><div id=\"attachment_544\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/Grafico.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-544\" class=\" wp-image-544 \" alt=\"Imagen 9.- Gr\u00e1fico Comparaci\u00f3n de Puntos.\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/Grafico.png\" width=\"500\" height=\"236\" \/><\/a><p id=\"caption-attachment-544\" class=\"wp-caption-text\">Imagen 9.- Gr\u00e1fico Comparaci\u00f3n de Puntos.<\/p><\/div><\/p>\n<h2><b>Conclusiones<\/b><\/h2>\n<p>Todo esto es solo una peque\u00f1a parte de este Framework,\u00a0 que es muy completo y merece la pena cuanto menos probar su utilidad. Adem\u00e1s, incluye la funcionalidad KnockoutJS para incluir patrones Model View View Model, as\u00ed como otras utilidades muy sencillas de utilizar y que dan un salto de calidad a nuestros desarrollos con menor esfuerzo.<\/p>\n<p>Existen multitud de frameworks JavaScript, cada desarrollador puede tener preferencia por uno u por otro. Mi opini\u00f3n personal es que no podr\u00eda indicar cu\u00e1l es el mejor framework JavaScript que hay en el mercado, cada desarrollador tiene su preferido. Pero al final lo que tenemos que tener claro es que tenemos que realizar el software con la mayor calidad posible y para ello el uso de cualquiera de estos frameworks es pr\u00e1cticamente una obligaci\u00f3n.<\/p>\n<p><b>Referencias:<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/demos.kendoui.com\/\">http:\/\/demos.kendoui.com\/<\/a><\/li>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/16439721\/specifying-the-fields-to-send-on-an-update-command-using-the-kendo-ui-framewor\">http:\/\/stackoverflow.com\/questions\/16439721\/specifying-the-fields-to-send-on-an-update-command-using-the-kendo-ui-framewor<\/a><\/li>\n<li><a href=\"http:\/\/code.msdn.microsoft.com\/officeapps\/SharePoint-2013-Perform-335d925b\">SharePoint 2013: Perform basic data access operations by using REST in apps<\/a><\/li>\n<li>SharePoint 2013: de principio a fin<\/li>\n<\/ul>\n<p><a title=\"CompartiMOSS\" href=\"http:\/\/sdrv.ms\/11geygH\" target=\"_blank\">Descargar el ejemplo mostrado en el art\u00edculo<\/a><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>La semana pasada salio a la luz el n\u00famero 16 de la revista digital CompartiMOSS\u00a0en la que por cuarto n\u00famero consecutivo he tenido el placer de escribir un art\u00edculo. Este n\u00famero tiene muchos art\u00edculos interesantes sobre nuestro servidor favorito tanto &hellip; <a href=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[60,59,19,151],"class_list":["post-532","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2013","tag-compartimoss","tag-framework","tag-javascript","tag-sharepoint-2013"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint\" \/>\n<meta name=\"twitter:description\" content=\"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adri\u00e1n D\u00edaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/\"},\"author\":{\"name\":\"Adri\u00e1n D\u00edaz\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"headline\":\"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I)\",\"datePublished\":\"2013-06-18T10:00:35+00:00\",\"dateModified\":\"2013-07-16T09:06:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/\"},\"wordCount\":2983,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2013\\\/06\\\/MockupCompartiMOSS.jpg\",\"keywords\":[\"compartimoss\",\"framework\",\"JavaScript\",\"sharepoint 2013\"],\"articleSection\":[\"sharepoint 2013\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/\",\"name\":\"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2013\\\/06\\\/MockupCompartiMOSS.jpg\",\"datePublished\":\"2013-06-18T10:00:35+00:00\",\"dateModified\":\"2013-07-16T09:06:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"description\":\"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2013\\\/06\\\/MockupCompartiMOSS.jpg\",\"contentUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2013\\\/06\\\/MockupCompartiMOSS.jpg\",\"width\":960,\"height\":439},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/\",\"name\":\"Desarrollando sobre SharePoint\",\"description\":\"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\",\"name\":\"Adri\u00e1n D\u00edaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"caption\":\"Adri\u00e1n D\u00edaz\"},\"description\":\"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/author\\\/desarrollandosobresharepoint\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint","description":"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/","twitter_card":"summary_large_image","twitter_title":"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint","twitter_description":"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.","twitter_image":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg","twitter_misc":{"Escrito por":"Adri\u00e1n D\u00edaz","Tiempo de lectura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#article","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/"},"author":{"name":"Adri\u00e1n D\u00edaz","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"headline":"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I)","datePublished":"2013-06-18T10:00:35+00:00","dateModified":"2013-07-16T09:06:00+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/"},"wordCount":2983,"commentCount":0,"image":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#primaryimage"},"thumbnailUrl":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg","keywords":["compartimoss","framework","JavaScript","sharepoint 2013"],"articleSection":["sharepoint 2013"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/","name":"[CompartiMOSS n16] Uso de Frameworks JavaScript en nuestros desarrollos SharePoint (I) - Desarrollando sobre SharePoint","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#primaryimage"},"image":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#primaryimage"},"thumbnailUrl":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg","datePublished":"2013-06-18T10:00:35+00:00","dateModified":"2013-07-16T09:06:00+00:00","author":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"description":"En este art\u00edculo vamos a introducir uno de los frameworks javascript Kendo UI que hay en el mercado. Veremos la sencillez del mismo a nivel de desarrollo, para de esta forma quitarnos el miedo que tenemos los desarrolladores de SharePoint con respecto al uso JavaScript. Como desarrolladores de SharePoint, tenemos la ventaja del conocimiento qu\u00e9 tenemos sobre la plataforma de manera que si le sumamos conocimientos de JavaScript obtendremos unos resultados espectaculares. Adicionalmente, el uso de este tipo de frameworks nos permite hablar crear desarrollos HTML5 de tipo \u201cresponsive design\u201d ofreciendo soluciones que sirvan para todo tipo de plataformas.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/compartimoss-n16-uso-de-frameworks-javascript-en-nuestros-desarrollos-sharepoint-i\/#primaryimage","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg","contentUrl":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2013\/06\/MockupCompartiMOSS.jpg","width":960,"height":439},{"@type":"WebSite","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/","name":"Desarrollando sobre SharePoint","description":"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb","name":"Adri\u00e1n D\u00edaz","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","caption":"Adri\u00e1n D\u00edaz"},"description":"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/author\/desarrollandosobresharepoint\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":0,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}