Nos contó Nieves Navarro hace algún tiempo cómo arreglar una demo app de SAPUI5 y precisamente me ha venido muy bien este estudio.
Estaba yo pegándome con el objeto Smart Filter Bar de SAPUI5 y quería tenerlo aislado en un caso básico, por lo que fui al SDK a descargarme los ejemplos que nos proporciona SAP.
Está muy bien poder disponer de los ejemplos y ver su código on-line, pero a veces queremos tenerlo en el WebIDE para juguetear un poco, debuggear, etc. Si te descargas estos ejemplos verás que no son aplicaciones completas sino que solo vienen los ficheros clave.
Siguiendo el estudio que nos aportaba Nieves he reconstruido la aplicación para poder tenerla de forma completa funcionando. El primer paso (siempre) es crear una aplicación con plantilla de tipo SAPUI5. Esto nos crea ya una aplicación «vacía» pero con la estructura SAPUI5.
A continuación ponemos la vista y el controlador en sus carpetas correspondientes
Si abrimos la aplicación de ejemplo en el SDK y ejecutamos el debugger podemos ver el Componente que necesitamos con todo su código.
Ahora nos tenemos que llevar el código a nuestro controlador, pero ajustando las rutas.
A continuación creamos el mockserver. Primero la carpeta contenedora y después los ficheros. Estos ficheros los podemos encontrar en el apartado del código del ejemplo.
Así es como quedaría nuestro proyecto:
¿Y ya está? Pues no. Ya tenemos la estructura pero nos quedan tres ajustes que hacer.
Primero, como en el wizard dejé el nombre de la vista por defecto, hay que ajustar el nombre de la vista inicial en el manifest.
Que digo yo, que no les costaría tanto a nuestros amigos de SAP mantener adecuadamente estos ejemplos, no? O quizás es que quieren enseñarnos a pescar en lugar de darnos peces…
Por último, algunos enlaces de interés respecto al SmartFilterBar:
- Aquí tienes la explicación detallada del SmartFilterBar en el SDK junto con una versión muy básica que sí está lista para descargar y ejecutar en el WebIDE.
- Guidelines.
- Ejemplo on-line funcionando en Plunker.
- Blog de SAP: Configuring Smart filter bar of an Overview page (OVP)