Extender un control UI estándar

Introducción

Buenas, perdonad la tardanza en realizar mi segundo post en el blog pero los proyectos y un enano de 15 días apenas me dejan tiempo (😉)

Hoy voy a mostraros cómo ampliar la funcionalidad de un control UI de una biblioteca estándar (sin destruir cosas 😏).

En nuestro caso vamos a cambiar la funcionalidad del control ViewSettingsDialog, que se encuentra en la librería sap.m.  Este control se trata de un popover y varias listas internas en pestañas diferentes para realizar operaciones de ordenar, agrupar o filtrar. Dentro de esas listas internas puede existir una barra de búsqueda para encontrar cualquier elemento de esas listas.

Por defecto esa búsqueda se realiza con coincidencia desde el principio (realmente se puede cambiar con parametrización del control, pero para nuestro ejemplo vamos a hacerlo como una extensión), y vamos a tratar de que la búsqueda no sea únicamente desde el principio ampliando la funcionalidad del control a coincidencia en cualquier parte de la cadena. En la siguiente imagen vemos como al buscar “Mouse”, únicamente hay una coincidencia de entre los 5 elementos de filtro:

Para cambiar esta funcionalidad vamos a realizar una serie de pasos:

Fichero de Extensión

Lo primero que vamos a hacer es crear un nuevo fichero .js para extender el control ViewSettingsDialog:

En este nuevo fichero definimos las clases estándar a utilizar y a extender de la siguiente manera (en este caso las dos pertenecen a la librería sap.m:

Añadir nuevo control extendido a la vista

Ahora vamos a meter este nuevo control, que extiende a uno estándar, en la vista aunque aún no hemos modificado su funcionalidad. Para ello vamos a la vista y creamos un nuevo espacio de nombres que haga referencia a la carpeta donde hemos creado el fichero .js e introducimos el control UI extendido dentro de la vista:

Ahora mismo tenemos el control UI extendido dentro de nuestra vista pero con la misma funcionalidad que el estándar por lo que tenemos que implementar la funcionalidad nueva.

Extensión de funcionalidad

En nuestro caso únicamente vamos a modificar funcionalidad, pero podríamos también añadir nuevas propiedades y eventos creando un objeto de metadatos:

Vamos a redefinir en nuestra extensión el método _getFilterSearchField del control estándar para generar una nueva barra de búsqueda donde la búsqueda se haga de la forma que nosotros deseemos, definiendo sus eventos search  y liveChange, tal y como se muestra en la siguiente imagen:

Por lo tanto ya tenemos nuestro control extendido y si ahora realizamos la búsqueda con el patrón “Mouse”, el resultado son dos coincidencias:

Espero que os haya parecido interesante este post y si tenéis cualquier comentario o duda, ya sabéis.