Rediseño de los xmlview de listados (ListView):
- El fieldname (nombre de la columna del modelo) se establece en la columna.
- Por defecto todas las columnas se añaden como opciones de ordenación, salvo que tenga sort='false'.
- Por defecto todas las columnas se añaden como filtros, salvo que tenga filter='false'.
- Por defecto todas las columnas se usan cuando escribimos un texto en el buscador de la pestaña, salvo que la columna tenga search='false'.
- Se pueden añadir botones en columnas.
- A las funciones javascript se le puede indicar la columna del modelo (o columnas) a pasar como parámetros. Ejemplo: myJsFunction($this->id)
- Se pueden añadir totales, filtros y opciones de ordenación desde el xml.
- Se pueden añadir assets javascript y css desde el xml.
- Todas las etiquetas principales tienen que tener un name, para poder modificar el contenido desde extensiones.
- Si hay un modal new, se abre cuando pulsamos el botón nuevo de la pestaña.
- Si hay un modal delete, se abre cuando pulsamos el botón eliminar de la pestaña.
<?xml version='1.0' encoding='UTF-8'?>
<list>
<columns>
<column name='code' fieldname='codigo' order='100'>
<widget type='text'/>
</column>
<column name='description' fieldname='descripcion' order='105'>
<widget type='text'/>
</column>
<column name='state' fieldname='estado' display='center' filter='false' search='false' sort='false' order='110'>
<widget type='text'>
<option color='success'>ABIERTO</option>
<option color='warning'>CERRADO</option>
</widget>
</column>
<column name='info' display='right' order='120'>
<widget type='buttonJs' label='info' icon='fas fa-info-sign' function='myJsFunction($this->id)'/>
</column>
</columns>
<colors>
<option name='pending' color='info' fieldname='estado'>Pendiente</option>
<option name='parcial' color='warning' fieldname='estado'>Parcial</option>
</colors>
<totals>
<total name='invoiced' sql='SUM(total_facturas)'/>
<total name='pending' sql='SUM(total_pending)'/>
</totals>
<search>
<option name='observaciones'/>
<option name='codbarras'/>
</search>
<filters>
<filter type='select' name='status' fieldname='estado'/>
</filter>
<sort>
<option name='creationdate' fieldname='creationdate,id'/>
</sort>
<buttons>
<button name='change' icon='fas fa-edit' modal='my-modal'/>
</buttons>
<modals>
<modal name='new'>
<column name='code' fieldname='codigo' order='100'>
<widget type='text' required='true'/>
</column>
<column name='description' fieldname='descripcion' order='105'>
<widget type='text' required='true'/>
</column>
<buttons>
<button name='new' type='submit'/>
</buttons>
</modal>
<modal name='my-modal' btnlabel='change'>
<column name='state' order='100'>
<widget type='text'>
<value>ABIERTO</option>
<value>CERRADO</option>
</widget>
</column>
<buttons>
<button name='change' type='submit'/>
</buttons>
</modal>
</modals>
<assets>
<asset name='my-js' type='js' src='Dinamic/Assets/JS/xxx.js'/>
</assets>
</list>columns
Dentro de la etiqueta columns tendríamos una etiqueta column para cada columna. El fieldname iría en la columna. Todas las columnas se añadirían como opciones de búsqueda, filtros y ordenación, salvo que se incluya search='false' o filter='false' o sort='false'.
onhover
También es interesante añadir la opción de onhover, para poder definir una función javascript que se ejecutará cuando se ponga el ratón encima del widget, de esta forma podríamos mostrar el típico tooltip con más detalles.
onclick
Al hacer clic en la fila o la columna, ejecutar una determinada función javascript.
colors
Podemos definir la configuración de colores dentro de la etiqueta colors, en lugar de usar un row status como ahora. Así es más intuitivo.
totals
Dentro de la etiqueta totals definimos los totales que vamos a mostrar y cómo se calculan. La idea es que podamos hacer cálculos más complejos como la media de valores o multiplicar los valores de columnas.
search
Dentro de la etiqueta search añadimos las columnas adicionales que queremos usar para el buscador del listado. Por defecto ya se usarán todas las columnas definidas dentro de la etiqueta columns, salvo que tengan search='false'.
filters
Colocamos una etiqueta filter por cada filtro que queramos añadir. Estos serán filtros adicionales a los generados automáticamente, es decir, para cada columna dentro de la etiqueta columns se añadirá el correspondiente filtro, salvo que la columna tenga filter='false'.
También es interesante el mostrar botones de filtrar en las columnas, como se hacía en la versión 2017, donde al ver el listado de facturas aparecía un + al lado del nombre del clente para poder filtrar por cliente en ese mismo listado.
Quizás podríamos conseguir esto poniendo la propiedad linkfilter='nombre-filtro' en la etiqueta column o widget. Así podemos indicar cual es el filtro relacionado y también nos sirve para ponerlo solamente en las columnas que queramos.
sort
Dentro de la etiqueta sort añadimos una etiqueta options por cada columna que queramos añadir como opción de ordenación. Por defecto ya se añaden todas las que hay que columns, salvo que tengan sort='false'.
buttons
Aquí podemos añadir botones que aparecerán arriba a la izquierda, al lado del botón nuevo.
modals
Aquí definimos los modals que vayamos a usar, pero con la etiqueta modal en lugar de group como ahora. Además de que podemos definir los botones a mostrar.
Es importante tener alguna propiedad en el modal para indicar cuando queremos que sea un formulario independiente y cuando no. En ocasiones querremos que al pulsar el botón del modal se envíen solamente los datos del modal y no el resto de campos de los filtros del listado o de otros modals. Pero en otras ocasiones podemos querer que al enviar el modal se envíe también el resto de información de filtros del listado. Por eso podríamos poner una propiedad form='new' o form='same', por ejemplo.
assets
Aquí podemos definir archivos javascript o css que haya que cargar cuando se está mostrando este listado.
Sugerencia
Esto es una sugerencia a debatir. Está abierta a comentarios, votación y debate en la reunión semanal. Si se aprueba pasará a estado pendiente.