Este tutorial de botones del panel de OneStream muestra cómo crear estados visuales claros después de cada clic. Caso de uso: desea que un botón u otro componente del dashboard cambie su formato cuando ocurra otra acción, como hacer clic en un botón.

Por ejemplo, quiere cambiar el color de fondo de un botón cuando se hace clic en otro botón. Un cliente me pidió cambiar el color de fondo de un botón para indicar que ya había sido pulsado.

En otro caso, un cliente tenía un dashboard con varias combo boxes actuando como filtros que solo cambiaban el contenido de una Table View después de hacer clic en un botón adicional de “Search”. Como los usuarios debían hacer clic en ese botón Search después de seleccionar todos los filtros, el cliente pidió que, en el momento en que una combo box cambiara, el color de fondo del botón Search también cambiara para indicar que debía pulsarse, y que luego, una vez pulsado y refrescada la Table View, el color volviera a su estado inicial.

Logré todo esto usando una regla Dashboard Extender. La captura de pantalla a continuación muestra el ejemplo de dashboard que configuré para demostrar cómo hacerlo.

Es un dashboard con 4 botones, 3 de ellos representan distintos colores que, al hacer clic, cambian el color de fondo del botón etiquetado como “Reset”. Cuando se hace clic en Reset, el color de fondo de ese botón vuelve a blanco.

Paso 1. Creé 3 dashboards, 4 botones, 1 parámetro y 1 parámetro suministrado.

Paso 2. Incrusté 2 de los dashboards en el dashboard principal.

Observe que también agregué un parámetro suministrado a este dashboard. Este es un paso importante, todos lo son, porque garantiza que el valor del parámetro que contendrá el color de fondo “fluya” a todos los dashboards.

Paso 3. En el dashboard principal agregué una tarea de servidor que ejecuta una función Dashboard Extender.

Esta función se ejecuta cuando el dashboard carga y restablece el color del botón Reset a blanco. En un paso posterior describiré la función que hace esto.

Paso 4. En uno de los dashboards incrustados agregué los 3 botones creados anteriormente, que representan colores.

Paso 5. En el otro dashboard agregué el botón “Reset”.

Paso 6. Luego creé un parámetro de valor de entrada.

Este parámetro contendrá el color de fondo del botón “Reset”.

Paso 7. Fue necesario crear un parámetro suministrado enlazado al parámetro creado en el paso 6.

Paso 8. En el botón “Reset” configuré la propiedad de formato de color de fondo igual al parámetro creado en el paso 6.

Esto controlará el color de fondo del botón a medida que se haga clic en los otros botones.

Paso 9. Para restablecer el color de fondo del botón “Reset” a blanco, agregué una tarea de servidor en Selection Changed que ejecuta una función Dashboard Extender y cambia el valor del parámetro usado por la propiedad de formato de fondo.

Describiré esa función en un paso posterior. Además, configuré la acción de interfaz de usuario Selection Changed de este botón para refrescar el dashboard en el que se encuentra, de modo que el usuario vea el color restablecido.

Paso 10. Cada uno de los botones de color, Blue, Red y Yellow, necesita una tarea de servidor Selection Changed que ejecute una función Dashboard Extender y cambie el valor del parámetro que usa el botón “Reset” para definir su color de fondo.

Además, estos botones deben refrescar el dashboard que contiene el botón “Reset”. Observe cómo en la llamada a la función Dashboard Extender paso el color como parámetro para que la función lo use.

Paso 11. Cree la función Dashboard Extender “On Load” que restablecerá el color de fondo del botón “Reset” a su color predeterminado.

Si no hace esto cuando el dashboard carga, el color de fondo del botón “Reset” será el del último botón de color pulsado. Esta función se coloca en la sección Load Dashboard del Dashboard Extender y establece el valor del parámetro usado en la propiedad de formato de fondo del botón “Reset” utilizando un objeto XFLoadDashboardTaskResult.

Paso 12. En la sección Component Selection Changed del Dashboard Extender creé la función llamada por los botones de color.

Esta obtiene el valor del parámetro “BackgroundColor” pasado en la llamada desde el botón. Ese parámetro contiene el color que debe asignarse al botón “Reset”.

Usando un objeto XFSelectionChangedTaskResult, la función devuelve y actualiza el parámetro utilizado.

Ahora, cuando un usuario hace clic en uno de los botones de color, el color de fondo del botón “Reset” cambia al color del botón pulsado.

Si se hace clic en el botón “Reset”, el color de fondo del botón “Reset” vuelve a blanco.

Aunque este ejemplo cambió el color de fondo de un botón, el mismo principio aplica si quiere cambiar el color de cualquier otro componente que tenga una opción de formato al hacer clic en un botón. Este patrón de botones del panel de OneStream también permite dar formato a otros componentes interactivos.