Poner un panel en una pantalla dibujada
Objetivo
Construir la página que antes era un panel —cifras, gráficos, una cuadrícula de registros y un formulario para agregar uno— como una pantalla que usted ha dibujado.
Por qué existe esto
Un panel son mosaicos, cifras, gráficos y un par de superficies de registros integradas. Una pantalla dibujada tenía lo primero y lo segundo, pero no lo tercero ni lo cuarto, así que ahora tiene ambas cosas: un control Gráfico y un control Vista o formulario de tabla.
Lo que gana frente al artefacto de panel es que la maquetación es suya. Los mosaicos son cuadros normales, así que pueden tener cualquier tamaño, cualquier color y cualquier estado dibujado; y la página puede navegar, abrir superposiciones y ejecutar controladores, porque es una pantalla.
Lo que pierde es el generador de consultas por widget del diseñador de mosaicos. Una cifra aquí es un
loadRecords, que es la misma línea que escribe cualquier otra pantalla de Studio.
Una cifra es una consulta con recuento
loadRecords("par_ticket", "probe", {
top: 1,
where: { par_status: 100000002 },
countInto: "statusActive"
});
countInto es donde va cuántas filas coinciden, no cuántas se devolvieron. top: 1 es lo que
lo mantiene honesto: el recuento abarca todo, y la página que nadie lee es tan pequeña como puede
serlo una página. probe es un campo de estado que se declara una vez y no se vuelve a mirar.
Después dibuje un texto grande y enlace su Texto a text(state.statusActive).
Contar lo que falta. where solo compara por igualdad, así que «los que no tienen nada en un
campo» es una opción propia, empty: una lista de campos que no deben tener valor.
loadRecords("pbo_position", "probe", {
top: 1,
where: { state: 0 },
empty: ["pbo_currentoccupant"],
countInto: "vacant"
});
Eso cuenta los puestos abiertos que nadie ocupa. Es la misma condición que el filtro está vacío de una vista, así que un mosaico y la lista de al lado coinciden.
Un gráfico
Suelte Componentes → Gráfico. En la pestaña Aplicación:
-
Gráfico: barras, barras apiladas, líneas, áreas, circular o anillo.
-
Valor: una lista de
{ label, value }:[{ label: "New", value: state.statusNew },{ label: "Active", value: state.statusActive },{ label: "Resolved", value: state.statusResolved }]
El gráfico es el propio de la plataforma, no un dibujo. Eso importa más de lo que parece: lo difícil de un gráfico es la elección de las marcas del eje, las etiquetas que se solapan y los datos contra los que nadie diseñó: un resultado sin filas, un valor atípico cuatrocientas veces mayor que el resto, una categoría de noventa caracteres. Eso se decide cada vez que se representa. Un gráfico que usted dibujara lo tendría decidido una sola vez, por usted, contra los datos de ejemplo que tiene delante: bien en el diseñador y mal en producción.
Ponga las palabras dentro del control. El texto que dibuje dentro de un gráfico se convierte en su nombre accesible: sin él, un lector de pantalla anuncia «gráfico» y nada más. No se dibuja encima del gráfico; un título visible va en el recuadro de arriba.
No hay doble eje y no lo habrá. Dos medidas en dos escalas dentro de un mismo marco invitan a una comparación que la geometría no respalda. Dos medidas de tamaños distintos son dos gráficos.
Una cuadrícula, o un formulario, a partir de una tabla
Suelte Componentes → Vista o formulario de tabla. En la pestaña Aplicación:
| Campo | Es |
|---|---|
| Muestra | Las filas de una vista, Un formulario para un registro nuevo o Un formulario para un registro |
| Tabla | elegida entre las tablas del entorno; escriba para filtrar por nombre o nombre lógico |
| Vista / Formulario | elegido entre las vistas o formularios de esa tabla, o El predeterminado de la tabla |
Lo que aparece es lo auténtico: la cuadrícula basada en modelo con su propia ordenación, su propia paginación, su propio selector de columnas y sus propios permisos por registro; o el propio formulario de creación rápida de la tabla, con sus reglas de obligatoriedad y sus pasos de complemento. Nada de ninguno de los dos se vuelve a dibujar, por eso un campo que es obligatorio en la tabla también lo es aquí.
Un formulario para un registro toma el registro de su enlace Valor: un identificador, normalmente de algo que alguien eligió en la misma pantalla.
Pasos
- Dibuje la página: un encabezado, una fila de mosaicos, recuadros para los gráficos y recuadros para las superficies.
- Declare el estado: un campo por cifra, más
probe. - Ponga cada consulta de recuento en el controlador Cargado de la pantalla, y las mismas líneas detrás de un botón Actualizar.
- Suelte los gráficos y las superficies, y rellene sus campos.
- Dé a cada objeto restricciones para que la página llene la ventana: los mosaicos se reparten, y los gráficos y las superficies mantienen sus bordes.
Importe primero el ejemplo
Studio — Dashboard es esta página, ya construida. Impórtela, pulse Add 24 tickets y mire cada control en el diseñador junto a su resultado en el Shell.
Solución de problemas
- La superficie dice que no sabe qué tabla. — el campo Tabla está vacío. Guardar lo advierte en lugar de rechazarlo, para que pueda terminarlo más tarde.
- La superficie dice que no existe esa tabla. — la tabla se ha eliminado desde que se eligió, o la aplicación se importó en un entorno que no la tiene. El campo Tabla sigue mostrando el nombre antiguo; elija una que el entorno tenga.
- La superficie dice que este host no puede mostrar una superficie basada en modelo. — está viendo la Vista previa del diseñador, que no tiene ningún entorno detrás. Abra la aplicación en el Shell.
- El gráfico está vacío. — su Valor no es una lista de
{ label, value }. Una fila que no tiene esa forma se descarta en lugar de representarse como cero, así que una forma incorrecta se ve como una barra que falta. - Las cifras no se mueven después de agregar un registro. — nada volvió a ejecutar las consultas. Póngalas detrás de un botón Actualizar, o vuelva a ejecutarlas en el controlador que escribió el registro.
- Las cifras se movieron pero la cuadrícula integrada no. — una superficie integrada es la
cuadrícula o el formulario propios de la plataforma, y es dueña de su consulta, así que volver a
ejecutar sus consultas no la toca. Termine el controlador con
reloadSurfaces(), que vuelve a mostrar todas las tablas y formularios integrados de la pantalla. Hágalo tanto en el controlador que creó los registros como en Actualizar: veinticuatro filas nuevas con una tabla vacía al lado es lo más desconcertante que puede hacer un panel.