martes, 21 de mayo de 2019

Utilizar librerías externas en nuestros proyectos SAPUI5


Hola a todos y perdonad el tiempo que llevo sin escribir, no voy a poner ninguna excusa porque aunque estemos hasta arriba siempre se puede sacar un rato.

Hoy os voy a hablar de cómo poder utilizar librerías externas en nuestros proyectos SAPUI5, ya que en JavaScript existen muchas bibliotecas con funcionalidades complejas listas para poder ser usadas en nuestros desarrollos y así facilitarnos mucho la vida.

Dos bibliotecas que utilizo a menudo:

Lodash: Contiene funciones que facilitan el trabajo con arrays. ( https://lodash.com/ )

MomentJS: Una biblioteca con funcionalidades adicionales de fecha y hora. ( https://momentjs.com )

Se pueden agregar de varias maneras, en este post os voy a indicar la forma más sencilla que va consistir en crear desde SAP WebIDE una carpeta (la llamaremos “libs”), donde vamos a disponer de todas las librerías externas que vamos a utilizar.



1. Creamos la carpeta.



2. En la carpeta "libs" creamos los archivos, en este caso "moment.js" y “lodash.js”.





Y en estos ficheros es donde vamos a pegar el código con las funcionalidades de estas librerías.


3. Para ello vamos a las urls que antes os he indicado para cada librería. En caso de moment copiamos el código del archivo “moment-with-locales.js” y lo pegamos en el fichero moment.js que hemos creado en nuestro proyecto. Y para lodash hacemos lo mismo con el fichero “lodash.min.js”.


La estructura del proyecto quedará así:




Una de las formas de incluir esta biblioteca en su proyecto podría ser incluir la biblioteca en la página index.html. Pero esto no funcionará cuando tu aplicación SAPUI5 se use en el Launchpad, ya que el Fiori Launchpad iniciará su aplicación desde Component.js y no desde Index.html.



4. El siguiente paso será incluir la biblioteca en los archivos JavaScript donde queremos usarla, en este ejemplo la usaremos en el controlador. Se incluye la biblioteca usando la funcionalidad de definir. En la función de definición, agregue la ruta al archivo que contiene el código de la biblioteca, en este caso serán "com/so/libs/moment", "com/so/libs/lodash" (“<Espacio de nombres del proyecto> / <Ruta a la carpeta donde se encuentra> / <Nombre del archivo>).


El valor en la función de definición debe ser diferente del nombre global de la biblioteca. Por eso usamos el nombre de "momentjs".



Al usar la biblioteca en SAP WebIDE aún da algunos errores aunque la hayamos incluido correctamente.



Para corregirlo tenemos agregar las siguientes líneas en la parte superior del controlador:


Después de eso, podemos usar moment y lodash en nuestro controlador utilizando el nombre global de la biblioteca. En este ejemplo, uso moment para restar 7 días a hoy y obtener la fecha en string en formato SAP.



O por ejemplo con Lodash para buscar elementos dentro del array:




Espero que os sirva, ya que estas dos bibliotecas son muy útiles. Cualquier duda o pregunta, nos escribís, muchas gracias y hasta la próxima.

5 comentarios:

  1. Respuestas
    1. Pues eso, me uno al agradecimiento a Carlos por su post y, a ti, muchas por tu feedback!

      Eliminar
  2. Excelente toca probarlo, ahora una consultilla, podria usar algun otro framework de esta misma forma como por ejemplo node.js ?

    ResponderEliminar
    Respuestas
    1. ¡Hola Naoto!

      En el caso de node.js, si te creas una aplicación en Cloud Foundry en lugar de Neo, tienes la opción de añadir módulos de node.js, pero no sabría decirte mucho más :( .

      Eliminar
  3. Parsing error: Unexpected token "com/a/libs/lodash" [ESLINT: ()]

    Sabe porque pasa esto

    /*global moment:true*/
    /*global _:true*/

    sap.ui.define([
    "sap/ui/core/mvc/Controller"
    "com/a/libs/lodash"
    "com/a/libs/moment"
    ], function (Controller,JSONmodel, Filter, FilterOperator,GroupHeaderListItem,Device,formatter,grouper,GroupSortState,DateRange,History,MessageToast,momentjs,lodash) {
    "use strict";

    return Controller.extend("a.a.controller.View1", {
    onInit: function () {
    var sTimestamp=moment().substract(7,'days');
    var str=moment().format("YYYYMMDD");

    }
    });

    la ruta del proyecto esta la workspace, la ruta a->libs->moment, donde a es un proyecto sap ui5 from template SAPUI5 aplicattion, el archivo de arriba es el controler.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.