Puede utilizar las expresiones de Arcade para obtener un formato avanzado de los elementos de lista, indicador y tabla para personalizar la forma en que se representan sus puntos de datos. Un punto de datos puede representar una entidad o estadística de resumen en función de cómo se configure el elemento. Al utilizar entidades, un solo punto de datos representa una sola entidad. Cuando se utiliza una estadística, cada punto de datos representa el resultado de esa estadística. El elemento de lista representa los puntos de datos de la entidad como elementos de línea, donde cada línea representa un punto de datos. El elemento indicador representa un punto de datos a la vez. El elemento de tabla representa los puntos de datos de entidad como filas, con la capacidad de controlar el contenido y formatear cada celda en la fila.
A diferencia de las expresiones de atributos (utilizadas en el elemento emergente, los estilos y las etiquetas de una capa), se crea una sola expresión para cada elemento. La expresión se ejecuta para cada punto de datos y devuelve propiedades definidas por el sistema y definidas por el usuario para ese elemento. Las propiedades definidas por el sistema son los ajustes que se configurarían en un elemento, como el color de texto y de fondo. Las propiedades definidas por el usuario las define el usuario en la expresión y se puede hacer referencia a ellas al configurar el elemento.
Nota:
Las expresiones de atributos creadas en mapas web no se trasladan para su uso en elementos de cuadro de mando.
La siguiente tabla resume los datos de su capa que se transferirán a la expresión:
| Nombre de la variable | Tipo | Descripción |
|---|---|---|
$datapoint | Entidad o diccionario | Se aplica al indicador, la tabla y la lista |
$reference | Diccionario | Se aplica al indicador |
Nota:
Tenga en cuenta lo siguiente al escribir expresiones de Arcade:- Incluya una coma después de cada propiedad en un diccionario, excepto la última propiedad.
- Los nombres de atributos no pueden contener espacios ni caracteres especiales.
Formatear listas
Para el elemento de lista, puede utilizar expresiones de Arcade habilitando la opción Formato avanzado. Una vez que elige utilizar el formato avanzado, las entradas de color dejan de estar disponibles, junto con cualquier otra propiedad definida por el sistema.
La expresión, que se ejecuta para cada elemento de línea, se utiliza para definir cómo se representa cada línea de la lista. Además, se puede usar una expresión para crear atributos a los que se puede hacer referencia en la Plantilla.
Se puede hacer referencia a los atributos del punto de datos mediante la variable global $datapoint en el editor de Arcade. En la siguiente tabla se proporciona la lista de propiedades que se pueden devolver de la expresión en forma de diccionario:
| Propiedad | Tipo de valor | Descripción |
|---|---|---|
textColor | Cadena de caracteres | Color de texto base del elemento de línea |
backgroundColor | Cadena de caracteres | Color de fondo del elemento de línea |
separatorColor | Cadena de caracteres | Color de borde inferior del elemento de línea |
selectionTextColor | Cadena de caracteres | Color utilizado para el texto del elemento de línea cuando se selecciona el elemento |
selectionColor | Cadena de caracteres | Color de texto base utilizado cuando se selecciona el elemento |
atributos | Diccionario | Un diccionario de pares de atributo-valor |
yourAttributeName | Cadena de caracteres | Atributo al que se puede hacer referencia en la Plantilla utilizando la sintaxis {expression/yourAttributeName} |
Nota:
Las funciones de geometría no son compatibles.
Por ejemplo, si desea que el color de fondo de la lista cambie al rojo cuando el valor esté por encima de un determinado umbral, puede crear una variable que se parezca a la siguiente:
var color = IIF($datapoint.fieldName>[threshold], '#F3DED7','')
En esta variable, fieldName es el campo para sus valores y [threshold] es el valor al que desea cambiar el color de fondo. La variable se puede utilizar como un valor de propiedad, como en el siguiente ejemplo:
backgroundColor: color,
Utilizar esta variable en la propiedad de color de fondo le da una expresión que tiene una apariencia similar a la siguiente, donde el color de fondo del elemento de lista cambiará a rojo cuando el valor de la velocidad sea superior a 40:
var color = IIF($datapoint.Speed > 40, '#F3DED7', '');
return {
backgroundColor: color
}Habilitar el formato avanzado en una lista
Para habilitar el formato en un elemento de lista, haga lo siguiente:
- En la ventana de configuración de la lista, haga clic en la pestaña Lista.
- En la sección Formato avanzado, haga clic en Habilitar.
Nota:
Una vez que se habilita el formato avanzado, los ajustes definidos por el usuario, como por ejemplo las entradas de color, dejan de estar disponibles. Estas configuraciones se realizan en su expresión. Si introdujo valores antes de habilitar el formato avanzado, se agregan automáticamente a la expresión. - Cree su expresión de formato en el editor.
Sugerencia:
Para los campos de fecha, utilice la función Texto para convertirlos en cadenas de caracteres, y se mostrarán en la zona horaria del cuadro de mando. La función Texto también le permite formatear los valores según sus preferencias. Si necesita ayuda con alguna de las funciones de Arcade, haga clic en el botón Información que hay junto a la función para ver más detalles. - Si desea que su expresión se ejecute a un intervalo específico, por ejemplo, si su expresión utiliza la función Now(), habilite el botón de alternancia de Refrescar script y establezca un intervalo de actualización.
- Introduzca los atributos nuevos en el campo Plantilla con la sintaxis {expression/yourAttributeName}.
Formatear indicadores
Para el elemento de indicador, puede utilizar expresiones de Arcade habilitando la opción Formato avanzado. Una vez que elige habilitar el formato avanzado, dejan de estar disponibles las propiedades definidas por el sistema, como las opciones de color y el formato de valores, y el formato condicional se desactiva. La expresión se utiliza para definir estas propiedades de representación en pantalla y la lógica condicional. Además, una expresión puede suministrar los atributos definidos por el usuario a los que se hará referencia en los campos Título y Descripción en la pestaña General.
Cuando se incluye un valor de referencia en el indicador, en la pestaña Datos solo hay disponible un tipo de referencia basado en estadísticas una vez que se ha habilitado el formato avanzado. Si definió previamente un tipo de referencia de valor fijo, se agrega automáticamente a la expresión, junto con cualquier factor de conversión, texto y formato de color. El formato de valor realizado antes de habilitar el formato avanzado se elimina y se debe definir en la expresión utilizando patrones de valor.
Nota:
El valor anterior no se admite en Arcade. Si definió un tipo de referencia de valor anterior antes de habilitar el formato avanzado, se convertirá al valor actual.
Se puede hacer referencia a los atributos del punto de datos mediante la variable global $datapoint en el editor de Arcade. Dependiendo de si el tipo de valor es Entidad o Estadística, $datapoint es del tipo entidad o diccionario, respectivamente. Si se ha configurado una estadística de referencia en la pestaña Datos, la variable global $reference también estará disponible en el editor.
En la siguiente tabla se proporciona la lista de propiedades que se pueden devolver de la expresión en forma de diccionario:
| Propiedad | Tipo de valor | Descripción |
|---|---|---|
textColor | Cadena de caracteres | Color de texto base del elemento de indicador |
backgroundColor | Cadena de caracteres | Color de fondo del elemento de indicador |
topText | Cadena de caracteres | Se muestra como el texto superior |
topTextColor | Cadena de caracteres | Color del texto superior |
topTextOutlineColor | Cadena de caracteres | Color del contorno del texto superior |
topTextMaxSize | Cadena de caracteres | Tamaño máximo del texto superior (XXS | XS | S | M | L | XL | XXL) |
middleText | Cadena de caracteres | Se muestra como el texto central |
middleTextColor | Cadena de caracteres | Color del texto central |
middleTextOutlineColor | Cadena de caracteres | Color del contorno del texto central |
middleTextMaxSize | Cadena de caracteres | Tamaño máximo del texto central (XXS | XS | S | M | L | XL | XXL) |
bottomText | Cadena de caracteres | Se muestra como el texto inferior |
bottomTextColor | Cadena de caracteres | Color del texto inferior |
bottomTextOutlineColor | Cadena de caracteres | Color del contorno del texto inferior |
bottomTextMaxSize | Cadena de caracteres | Tamaño máximo del texto inferior (XXS | XS | S | M | L | XL | XXL) |
iconName | Cadena de caracteres | Nombre del icono definido para el indicador Nota:Los nombres de los iconos se definen fuera de la expresión. |
iconAlign | Cadena de caracteres | Ubicación del icono adyacente al texto central (izquierda | derecha) |
iconColor | Cadena de caracteres | Color de relleno del icono |
iconOutlineColor | Cadena de caracteres | Color de contorno del icono |
noValue | Booleano | Marque para mostrar el texto Sin valor en lugar del indicador (true | false) |
atributos | Diccionario | Un diccionario de pares de atributo-valor |
yourAttributeName | Cadena de caracteres | Atributo al que se puede hacer referencia en los campos Título y Descripción utilizando la sintaxis {expression/yourAttributeName} |
Por ejemplo, si tiene un indicador que muestra un valor en una unidad de medida, pero también desea mostrar el mismo valor en otra unidad a continuación, puede crear una variable para convertir sus valores existentes. Con un indicador que muestra la temperatura media en Celsius, puede crear una variable Fahrenheit para utilizarla en la expresión y mostrar también los valores en Fahrenheit.
var fahrenheit = Floor(($datapoint.avg_Temperature/5*9)+32)
A continuación, puede incluir la variable como un valor de propiedad, como el siguiente:
bottomText: fahrenheit,
Utilizar esta variable en la propiedad de texto inferior le proporciona una expresión similar a la siguiente, donde la temperatura media (en Celsius) se muestra en el texto central del indicador y el valor Fahrenheit se muestra en el texto inferior:
var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)
return {
topText: 'Average Temperature',
middleText: Floor($datapoint.avg_Temperature),
bottomText: farenheit,
}Habilitar el formato avanzado en un indicador
Para habilitar el formato en un elemento de indicador, haga lo siguiente:
- En la ventana de configuración del indicador, haga clic en la pestaña Indicador.
- En la sección Formato avanzado, haga clic en Habilitar.
Nota:
Una vez que se habilita el formato avanzado, los ajustes definidos por el usuario, como por ejemplo las entradas de color, dejan de estar disponibles. Estas configuraciones se realizan en su expresión. Si introdujo valores antes de habilitar el formato avanzado, se agregan automáticamente a la expresión. - Cree su expresión de formato en el editor.
Sugerencia:
Si necesita ayuda con alguna de las funciones de Arcade, haga clic en el botón Información que hay junto a la función para ver más detalles. - Si desea que su expresión se ejecute a un intervalo específico, por ejemplo, si su expresión utiliza la función Now(), habilite el botón de alternancia de Refrescar script y establezca un intervalo de actualización.
- De manera opcional, haga referencia a cualquier atributo nuevo en los campos Título y Descripción con la sintaxis {expression/yourAttributeName}.
Formatear tablas
Para el elemento de tabla, puede utilizar una expresión de Arcade habilitando la opción Formato avanzado. Una vez que elige utilizar el formato avanzado, las entradas de color, las opciones de alineación de texto y otras propiedades definidas por el sistema dejan de estar disponibles y, en su lugar, se definen en la expresión.
La expresión, que se ejecuta para cada fila de la tabla, se utiliza para definir el contenido y el formato de cada celda de la columna. Se puede hacer referencia a los atributos del punto de datos mediante la variable global $datapoint en el editor de Arcade.
El diccionario cells debe tener una propiedad para cada campo definido en la pestaña Datos de la configuración de la tabla. Por ejemplo, en una tabla de valores agrupados que tiene un campo de categoría para Zona y un campo de valor de Cantidades de transacción, el diccionario cells contiene dos propiedades: zone y sum_transaction_amounts.
En la siguiente tabla se enumeran las propiedades que se pueden devolver de la expresión en forma de diccionario:
| Propiedad | Tipo de valor | Descripción |
|---|---|---|
celdas | Diccionario | Un diccionario de nombres de columnas basado en campos definidos en la pestaña Datos |
displayText | Cadena de caracteres | Texto visualizado en la celda Nota:La propiedad displayText es obligatoria. |
hoverText | Cadena de caracteres | El texto que aparece al desplazar el puntero por encima de los valores. Nota:La activación de texto se debe habilitar primero en la pestaña Tabla. |
textColor | Cadena de caracteres | Color del texto de la celda |
backgroundColor | Cadena de caracteres | Color de fondo de la celda |
textAlign | Cadena de caracteres | Alineación (izquierda | centro | derecha) |
iconName | Cadena de caracteres | Nombre del icono definido para la tabla Nota:Los nombres de los iconos se definen fuera de la expresión. |
iconAlign | Cadena de caracteres | Ubicación del icono adyacente al texto de la celda (izquierda | derecha) |
iconColor | Cadena de caracteres | Color de relleno del icono |
iconOutlineColor | Cadena de caracteres | Color de contorno del icono |
También puede utilizar el formato avanzado para crear formato condicional para la tabla. Por ejemplo, si tiene una tabla que muestra solicitudes de reparación recientes, es posible que desee aplicar formato condicional para distinguir el estado de las solicitudes. Puede crear una variable que cambie el color de la celda en función del estado utilizando una variable que tenga el aspecto siguiente:
var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')
A continuación, puede asignar la variable a la propiedad backgroundColor para que las celdas se resalten para los nuevos incidentes y dejen de mostrarse resaltadas para los incidentes cerrados.
var statusColor = When(
$datapoint.status == 'new', 'yellow',
$datapoint.status == 'closed', lightgray', 'white')
return {
cells:{
requests:{
displayText: <span>${$datapoint.requests}</span>,
backgroundColor: statusColor,
}
}
}Nota:
Las expresiones no se aplican a la fila de resumen de una tabla.
Habilitar el formato avanzado en una tabla
Para habilitar el formato en un elemento de tabla, haga lo siguiente:
- En la ventana de configuración de la tabla, haga clic en la pestaña Valores.
- En la sección Formato avanzado, haga clic en Habilitar.
Nota:
Una vez que se habilita el formato avanzado, los ajustes definidos por el usuario, como por ejemplo las entradas de color, dejan de estar disponibles. Estas configuraciones se realizan en su expresión. Si introdujo valores antes de habilitar el formato avanzado, se agregan automáticamente a la expresión. - Cree su expresión de formato en el editor.
Sugerencia:
Si necesita ayuda con alguna de las funciones de Arcade, haga clic en el botón Información que hay junto a la función para ver más detalles. - Si desea que su expresión se ejecute a un intervalo específico, por ejemplo, si su expresión utiliza la función Now(), habilite el botón de alternancia de Refrescar script y establezca un intervalo de actualización.
Definir nombres de iconos
Los elementos de indicador y tabla le permiten incluir iconos SVG en la configuración de su elemento. Cuando se utiliza el formato avanzado, se agregan iconos en la expresión de Arcade.
Para agregar un icono a su expresión de Arcade, haga lo siguiente:
- En la sección Iconos debajo del editor de Arcade, haga clic en Agregar.
- Elija un icono o cree un icono personalizado.
- Introduzca un nombre para su icono.
- En la expresión de Arcade, devuelva el nombre del icono como el valor de la propiedad iconName.
Valores de color
Al incluir valores de color en una expresión, se deben devolver como cadenas de caracteres (entre comillas). Los valores de color que se dejan sin definir o que no son válidos utilizarán automáticamente los valores predeterminados. Entre los tipos de valor de color admitidos están los valores hexadecimales, RGB, RGBA, HSL y HSLA. A continuación, se muestran algunos ejemplos junto con las sintaxis admitidas:
- Hex
- #090
- #009900
- #090a
- #009900aa
- RGB y RGBA
- rgb(34, 12, 64)
- rgba(34, 12, 64, 0,6)
- HSL y HSLA
- hsl(50, 33%, 25%)
- hsla(50, 33%, 25%, 0,75)