Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

Fiori extensions (i): EXTENDIENDO COLUMNA CON IMAGEN EN fiori LIST REPORT

F

Cuando desarrollamos una aplicación con una plantilla basada en Fiori Elements y anotaciones CDS, uno de los problemas principales que nos solemos encontrar es la rigidez en el diseño de la interfaz de usuario. 

Como comenté en el artículo donde se explicaba la creación de una aplicación List Report con Fiori Elements y Anotaciones CDS, es posible desarrollar aplicaciones Fiori sin necesidad de introducir ninguna linea de código SAPUI5, siempre y cuando no tengamos que salirnos del marco de diseño que nos imponen las plantillas autogeneradas de SAP Web IDE.

Pero tranquilos, todo tiene solución. Si nos encontramos en un proyecto donde la funcionalidad ofrecida por la plantilla basada en Fiori Elements nos sirve casi en su totalidad, lo que debemos de implementar son pequeñas extensiones Fiori que nos permitan ampliar el diseño en base a los requisitos del proyecto.

Por la utilidad e importancia que considero que tienen las Fiori Extensions en el nuevo marco de desarrollo propuesto por SAP, he decidido comenzar una serie de artículos donde iré explicando varios ejemplos de extensiones y ampliaciones de interfaz. Y para dar comienzo a esta serie, empezaremos viendo las Column Extensions, que como su nombre indica, se trata de una extensión que permite ampliar el List Report generado por la plantilla en SAP Web IDE.

Necesidad de extender nuestro List Report

El origen de este artículo nace de una problemática encontrada en uno de los proyectos que he desarrollado en la empresa donde trabajo. En dicha aplicación se recuperaba un listado de productos donde se quería mostrar por cada registro la imagen asociada a cada uno de ellos.

El problema principal es que no existe una anotación CDS (UI Annotation) que indique a nuestros Fiori Elements que a partir de una URL represente una imagen en el List Report. Por ello, para poder representar una columna con el formato que nosotros queramos, debemos implementar una Column Extension y una Cell Extensión.

Extendiendo nuestro List Report

Para el ejemplo que vamos a ver, partimos de un CDS básico donde recuperamos algunos datos sencillos de las tablas MARA y MAKT. Como podéis ver, para el ejemplo, he insertado un campo con valor fijo de una URL de una imagen de Internet con nombre “ImageTest”. Normalmente esta URL se generará dinámicamente en base a los requisitos de la aplicación. En el proyecto donde desarrollé esta extensión, generaba la URL en base al código de material de la forma: URL_base + Matnr, haciendo uso de la función “concat(arg1,arg2)” disponible en las vistas CDS.

La CDS ejemplo de la imagen está publicada como servicio en el sistema SAP S4/HANA. Si no sabes cómo realizar este proceso, te recomiendo que le eches un vistazo a este artículo donde se explica cómo generar la aplicación desde 0 a partir de una vista CDS.

Para generar nuestra extensión, accedemos a SAP Web IDE, pulsamos botón derecho en nuestro proyecto, New -> Extension.

Seleccionamos la opción de List Report Extension y pulsamos Next.

Seleccionamos la extensión de tipo Column. Indicamos cual es nuestra fuente de datos (nuestra entidad, en este caso, será nuestra CDS) y asignamos un nombre al fragment que creará automáticamente el asistente. Por último, pulsamos Finish y finalizamos el proceso.

Una vez creada la extensión, podemos observar que se ha creado un nuevo directorio en nuestro proyecto con el nombre “ext”. En este directorio, tendremos nuestras vistas XML asociadas a las diferentes extensiones que creemos para nuestro proyecto. En nuestro caso, inicialmente, solo tendremos una vista generada por el asistente. Más tarde crearemos otra manualmente.

Además del directorio para nuestras vistas XML, al crear las extensiones, se generará en nuestro manifest.json las referencias a cada una de estas. En el descriptor de cada una de las extensiones, se indicará el tipo de extensión, la entidad (fuente de datos) que seleccionamos en la creación de la misma y el fragment XML asociado.

Para el ejemplo que estamos implementando, necesitamos una extensión adicional. Actualmente, hemos creado una extensión de tipo columna ya que queremos ampliar la tabla del List Report con un nuevo dato. No obstante, como el dato que queremos representar es una imagen, debemos crear una extensión de tipo celda (Cell Extension) donde indicaremos que tipo de componente se representará en esta nueva columna.

Para crear esta nueva extensión, seguiremos los dos pasos siguientes:

  • Creamos un nuevo fragment donde añadiremos el código XML de nuestro componente. Para ello, pulsamos botón derecho en nuestro directorio view  y seleccionamos New -> File. Le damos un nombre de la forma siguiente: nombrevista.fragment.xml.

Insertamos el código siguiente en el nuevo fragment, donde indicamos que el componente que se representará en la columna será una imagen. En el path, indicamos el nombre del campo correspondiente de nuestra CDS.

  • Añadimos manualmente en nuestro manifest.json una nueva extensión de tipo celda (Cell Extension) y referenciamos el nuevo fragment a esta. Insertamos este código justo debajo de nuestra extensión de columna:

Una vez creada nuestra extensión de celda, solo faltará ajustar el código de nuestro fragment asociado a la extensión de columna, tal y como podemos ver a continuación:

Es importante que indiquemos nuestro campo de la CDS correspondiente a la URL de la imagen en la propiedad “leadingProperty”.

Y con esto, ya tenemos nuestra extensión de List Report que nos permite añadir una nueva columna de tipo imagen. Para ello, hemos creado dos extensiones: una de tipo columna ( Responsive Column Extension) y una de tipo celda (Responsive Cell Extension). La primera, indica a nuestro List Report que será necesario representar una nueva columna en el orden que indiquemos en la propiedad “columnIndex”. Por último, en nuestra extensión de celda indicamos que tipo de componente representará la información que nos llegue en nuestro campo de la CDS que hemos asociado a la propiedad “leadingProperty”.

Autor del artículo

Borja Garcia

Desarrollador Full Stack de aplicaciones móviles/web SAP desde allá por 2014. Compartir conocimiento es la mejor manera de aprender.

Agregar Comentario

Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

Categorías

Últimos artículos