SAPUI5, oData y filtros: Consultar sólo los datos que nos interesan (y II)

En el post anterior habíamos creado una aplicación para aprender a usar tanto filtros como selección por propiedades clave. Lo habíamos hecho todo a manubrio, como unos campeones. ¿Pero cómo lo hace el Web IDE?

Vamos a ver cómo se genera automáticamente una búsqueda usando filtros mediante las plantillas del Web IDE y así aprendemos a hacerlo más bonito. Podemos utilizar una aplicación como la que creamos en este post, de tipo Worklist.

Usar filtros

Cuando creamos una aplicación mediante una plantilla de tipo Master-Detail o Worklist, en la parte superior se nos crea un campito muy chulo de búsqueda, enlazado con una propiedad. Al poner algo en ese campo y pulsar Intro, vemos como se hace la magia y la tabla pasa a mostrarnos sólo las entradas que contienen ese valor en la propiedad elegida.

Vamos a ponérselo complicado: Buscar id con el texto 1.

Ese campo lo podemos encontrar fácilmente en la vista maestro (Master.view.xml). Es un elemento de tipo SearchField que tiene una función enlazada al evento search.

La función onSearchPressed es la que nos realizará la búsqueda

Rápidamente, buscamos la función en el Master.controller.js. Ahí tenemos toda la chicha, en tan solo cinco líneas de código.

Básicamente, recupera el valor que se ha guardado en el elemento xml searchField y crea un filtro para la propiedad que elijamos (en este caso es el Id) con el operador Contains (que es como si buscásemos *texto*).

Después, recupera la tabla donde cargamos los datos para poder así recuperar la colección que habíamos enlazado en la agregación items (con getBinding).

Ya sólo nos queda asignar el filtro mediante el método filter para tenerlo todo hecho. En cuanto se ejecute esta función, se volverá a consumir la colección, aplicando el nuevo filtro.

Y si no te lo crees, siempre puedes poner un breakpoint en el método _GET_ENTITYSET correspondiente para comprobarlo ;).

Cargar una entidad individual

Respecto a la búsqueda de una entidad única. eso lo hace en el Details.controller.js, pero previamente le tiene que pasar la entidad seleccionada mediante navegación. No entraremos en detalles de navegación, eso ya es nivel avanzado. Ahora mismo nos vale con creernos que eso funciona así.

En la tabla tiene que existir una función que se ejecutará cuando se pulse en una fila. Su nombre lo podemos encontrar en el elemento ColumnListItem , evento press.

Lo que estamos haciendo en esa función es realizar una navegación, pasando como parámetro la entidad seleccionada.

Con un debug podemos ver qué dato le estamos pasando al pulsar sobre una fila de la tabla

En el Detail.controller.js simplemente tenemos que asignar una función (el manejador) al evento que se disparará cada vez que se haga una navegación. En este ejemplo, la función es _onRoutePatternMatched. Vamos, que esto quiere decir que cada vez que se navegue, se llamará a dicha función.

¿Qué recibimos en la función? Un parámetro oEvent gracias al cual podemos recuperar los argumentos de la navegación y, entre ellos, la entidad que queremos cargar. ¡Pues la enlazamos con bindElement a la página y ya lo tenemos!