En Experience Builder, puede utilizar atributos de datos, estadísticas y expresiones sencillas para mostrar contenido dinámico básico. Asimismo, puede aplicar estilos estáticos y basados en el estado en la configuración del widget.
Existen dos tipos de formato avanzado: contenido dinámico avanzado y estilo dinámico.
- El contenido dinámico avanzado implica ejecutar cálculos con datos y devolver valores dinámicos para mostrarlos como contenido del widget. Puede utilizar expresiones Arcade para crear contenido dinámico avanzado.
- El estilo dinámico consiste en actualizar los fondos, los bordes y otros elementos visuales de los widgets en función de los datos. Para crear estilos dinámicos puede utilizar tanto expresiones Arcade como estilos condicionales, una función sin código.
Arcade
Arcade es un lenguaje de expresión ligero y seguro que puede utilizar para manipular datos y crear contenido personalizado en aplicaciones de Experience Builder. Puede utilizar Arcade para crear contenido dinámico y estilos dinámicos.
Perfiles de formato
Un perfil de formato define el entorno y las reglas de evaluación e interpretación de las expresiones.
Experience Builder tiene dos perfiles de formato:
El perfil de formato de widget personaliza el contenido y el estilo de widgets individuales. Utiliza la variable de perfil $dataSource para hacer referencia a datos en el nivel de fuente de datos.
El perfil de formato de widgets de elementos de lista personaliza el contenido y el estilo de los elementos de lista individuales de un widget Lista y de los widgets Texto, Botón e Imagen, dentro de un elemento de lista. Utiliza la variable de perfil $feature para hacer referencia a datos en el nivel de entidad.
Nota:
Experience Builder también incluye el perfil de datos, que crea un FeatureSet como fuente de datos. Puede utilizar el perfil de datos para agregar datos con Arcade.
En todos los casos en Experience Builder, se introducen scripts en un editor Arcade. El editor proporciona acceso a variables y funciones compatibles, así como a previsualizaciones de datos en tiempo real que le ayudarán a probar los scripts.
El editor Arcade aparece en distintas partes de la interfaz del builder, en función de si se utiliza Arcade para crear contenido dinámico, crear estilos dinámicos o agregar datos.
Contenido dinámico avanzado con Arcade
El contenido dinámico es aquel que cambia en función de los datos o las interacciones del usuario. Arcade permite calcular y devolver valores dinámicos para mostrarlos como contenido del widget. En lugar de vincular el contenido directamente a un campo o estadística, puede escribir expresiones que calculen valores basados en lógica, condiciones y funciones.
El valor devuelto debe ser uno de los siguientes tipos de campo:
- Texto
- Número
- Fecha
- Solo fecha
- Solo hora
Experience Builder admite el uso de contenidos dinámicos de las siguientes maneras:
- Crear contenido de texto, incluido el texto de los botones
- Establecer fuentes de imágenes
- Establecer vínculos mediante URL, con la excepción de los vínculos de los widgets de Texto
Scripts de Arcade de muestra
Las subsecciones siguientes incluyen scripts Arcade que puede utilizar para crear contenidos dinámicos.
Mostrar un mensaje basado en una condición
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");Mostrar el número de días transcurridos desde la última actualización de un registro
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";Mostrar un recuento de valores únicos
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);Mostrar un mensaje tras aplicar un filtro
var ds = $dataSources["dataSource_1-18c66465e65-layer-2"].layer;
var queryStr = $dataSources["dataSource_1-18c66465e65-layer-2"].queryParams.where;
Console(queryStr);
if (!IsEmpty(queryStr)) {
var result = Filter(ds, queryStr);
return "Filtered view: " + Count(result) + " records are displayed.";
}
return "All records are displayed."Acortar textos largos en un widget Lista
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");Mostrar diferentes imágenes en un widget de imagen en una lista basada en la categoría
if ($feature.category === "park") {
return "https://example.com/images/park.png";
} else if ($feature.category === "school") {
return "https://example.com/ images /school.png";
} else {
return "https://example.com/ images /default.png";
}Aplicar estilo a contenido dinámico
Para el contenido de texto, puede devolver un diccionario que incluya tanto un valor como sus estilos de texto. A continuación se muestra un script de ejemplo:
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};También puede devolver un valor en formato HTML para crear estilos más avanzados. A continuación se muestra un script que utiliza HTML:
return "<p style=\"font-family: Arial; font-size: 16px; color: #333; margin-bottom: 12px;\">" +
"Welcome to Experience Builder! Visit our " +
"<a href=\"https://experience.arcgis.com\" style=\"color: #007BFF; text-decoration: none;\">" +
"homepage</a> for more details.</p>" +
"<p style=\"font-size: 15px; font-family: Verdana; color: #444; margin-bottom: 8px;\">" +
"Key features:</p>" +
"<ul style=\"font-size: 14px; font-family: Verdana; color: #444; margin-top: 0;\">" +
"<li style=\"margin-bottom: 6px;\">Interact with 2D and 3D content in one app.</li>" +
"<li style=\"margin-bottom: 6px;\">Deploy responsive apps to any device.</li>" +
"<li style=\"margin-bottom: 6px;\">Create, deploy, and manage apps in a single place.</li>" +
"</ul>"En la tabla siguiente se enumeran las etiquetas HTML que Experience Builder admite en scritps Arcade:
| Etiqueta | Atributos |
|---|---|
h1, h2, h3, h4, h5, h6 | estilo |
duración | estilo |
p | estilo |
s | estilo |
strong | estilo |
em | estilo |
u | estilo |
ol, ul | estilo |
li | estilo |
br | |
a | style, href, target |
img | style, src, alt, height, width |
Estilo dinámico con condiciones o Arcade
El estilo dinámico permite adaptar visualmente los widgets en función de los datos. Esto incluye el cambio de elementos visuales como el tamaño del texto, el color de fondo y el estilo del borde en función de los valores de los campos, las estadísticas o la lógica calculada.
La opción Estilo dinámico aparece en el panel de ajustes de un widget al conectar el widget a los datos.
Los siguientes widgets admiten el estilo dinámico:
- Widget Texto: la opción Estilo dinámico aparece en la parte inferior del panel de configuración.
- Widget Botón: la opción Estilo dinámico aparece debajo de Avanzado. Cada estado (Predeterminado y Pasar el cursor) tiene su propia configuración.
- Widget Lista: la opción Estilo dinámico aparece debajo de cada estado (Predeterminado, Pasar el ratón y Seleccionado).
Nota:
Con el widget Lista, los estilos dinámicos se aplican a los elementos individuales de la lista, no a todo el widget.
Active la opción Estilo dinámico y haga clic en el botón de configuración 
para abrir el panel Estilo dinámico. El panel incluye dos pestañas: Condición y Script.
Condición
El estilo condicional es una opción sin código que permite aplicar estilos basados en reglas sencillas. No requiere scripts. Es el método recomendado para resaltar visualmente las diferencias en los datos, como indicadores de estado, categorías y rangos de valores.
La pestaña Condición incluye las opciones siguientes:
- Seleccionar un indicador para condiciones: seleccione un método para crear declaraciones condicionales. Con los widgets Texto y Botón, puede utilizar atributos de datos, estadísticas o contenido dinámico configurado con anterioridad. Con el widget Lista, solo puede utilizar atributos de datos.
En la siguiente tabla se enumeran los tipos de campos de atributo que puede utilizar como indicadores y los operadores que admiten.
Tipo de campo indicador Operadores permitidos Cadena de caracteres
es, no es, contiene, está vacío, no está vacío
Número
es, no es, es mayor que, es menor que, está entre
- Condiciones de estilo: una vez establecido un indicador, puede hacer clic en Agregar condición de estilo para crear condiciones. Cada condición consta de los siguientes componentes:
- Operador: elija entre una lista de operadores admitidos por el indicador.
- Valor: valor objetivo que se comparará con el indicador. Haga clic en Seleccionar tipo de origen para elegir un método de entrada, incluyendo entrada de usuario, campo, único y, para indicadores numéricos, estadísticas.
- Estilo: estilo visual, como el color del texto, el fondo o el borde, que se aplica cuando se cumple la condición.
Puede seleccionar una condición en el panel de configuración para previsualizar su efecto en el lienzo aunque los datos actuales no cumplan la condición. Puede reordenar, duplicar y eliminar condiciones. Si los datos actuales cumplen con varias condiciones, tendrá prioridad la que esté más arriba en la lista de condiciones. Si los datos actuales no cumplen ninguna condición, el widget utiliza su estilo estático.
Secuencia de comandos
Puede utilizar scripts Arcade para crear lógica de estilo compleja y flexible. En la pestaña Script, puede hacer clic en Editor Arcade para abrir la ventana del editor.
Experience Builder guarda su script localmente, que sigue disponible la próxima vez que abra el editor. Para ejecutar un script, haga clic en Aplicar. Al hacerlo, el script aplicado aparece en el cuadro Script en uso.
Con el editor Arcade, en lugar de configurar reglas de estilo con una interfaz sin código, se escribe un script que devuelve un diccionario de propiedades de estilo y los valores correspondientes. Esto le permite aplicar estilos basados en lógica personalizada, cálculos y condiciones que no pueden lograrse con la función Condición de estilo.
Experience Builder utiliza los valores devueltos para mostrar el estilo de un widget. Si introduce alguna clave de estilo que no esté en el diccionario, el widget utilizará la configuración de estilo predeterminada para esas propiedades.
En las tablas siguientes se enumeran las propiedades de estilo admitidas para cada widget, incluidos los tipos de valores esperados y sus significados.
Nota:
Al establecer colores, asegúrese de que el valor sigue los formatos de color CSS, como colores con nombre ("rojo"), códigos hexadecimales ("#ff0000") o rgba().
Aplicación de estilo en el widget Texto
El widget Texto admite las siguientes propiedades de estilo:
| Propiedad | Tipo | Descripción |
|---|---|---|
texto | Diccionario | Se utiliza para definir el estilo del texto |
text.size | Número | Tamaño de la fuente en píxeles |
text.color | Cadena de caracteres | Color de texto |
text.bold | Booleano | Indica si se debe utilizar el estilo de negrita |
text.italic | Booleano | Indica si se debe utilizar el estilo de cursiva |
text.underline | Booleano | Indica si se debe utilizar el estilo de subrayado |
text.strike | Booleano | Indica si se debe utilizar el estilo de tachado |
fondo | Diccionario | Se utiliza para configurar el fondo |
background.color | Cadena de caracteres | Color de fondo |
background.fillType | Cadena de caracteres | "ajustar", "rellenar", "centrar", "tesela" o "extender" |
background.image | Cadena de caracteres | URL de la imagen |
A continuación se muestra un script de ejemplo que aplica estilo al nombre de una ciudad en el widget Texto con diferentes tamaños de texto y colores de fondo en función de la población de la ciudad seleccionada:
// Get the list of selected features from the data source
var sf = $dataSources["dataSource_id"].selectedFeatures;
// Get the population of the first selected feature
var pop = First(sf).Population;
// Initialize style variables
var bgColor = "";
var txtStyles = null;
// Apply style based on population threshold
if (pop > 500000) {
bgColor = "rgba(238, 246, 255, 1)";
txtStyles = {
size: 34,
bold: true
};
} else {
bgColor = "rgba(255, 216, 219, 1)";
txtStyles = {
size: 25,
italic: true
};
}
return {
background: {
color: bgColor
},
text: txtStyles
};Aplicación de estilo en el widget Botón
El widget Botón admite las siguientes propiedades de estilo:
| Propiedad | Tipo | Descripción |
|---|---|---|
texto | Diccionario | Se utiliza para definir el estilo del texto |
text.size | Número | Tamaño de la fuente en píxeles |
text.color | Cadena de caracteres | Color de texto |
text.bold | Booleano | Indica si se debe utilizar el estilo de negrita |
text.italic | Booleano | Indica si se debe utilizar el estilo de cursiva |
text.underline | Booleano | Indica si se debe utilizar el estilo de subrayado |
text.strike | Booleano | Indica si se debe utilizar el estilo de tachado |
icono | Diccionario | Se utiliza para definir el estilo de los iconos |
icon.name | Cadena de caracteres | Nombre del icono |
icon.position | Cadena de caracteres | "IZQUIERDA" o "DERECHA" |
icon.size | Número | Tamaño del icono en píxeles |
icon.color | Cadena de caracteres | Puede definir el color del icono si está en formato SVG |
fondo | Diccionario | Se utiliza para configurar el fondo |
background.color | Cadena de caracteres | Color de fondo |
background.fillType | Cadena de caracteres | "ajustar", "rellenar", "centrar", "tesela" o "extender" |
background.image | Cadena de caracteres | URL de la imagen |
borde | Diccionario | Se utiliza para configurar el estilo del borde |
border.border | Diccionario | Establece el mismo estilo para todos los bordes |
border.border.type | Cadena de caracteres | "sólido", "con guiones", "con puntos" o "doble" |
border.border.color | Cadena de caracteres | Color de borde |
border.border.width | Número | Ancho de borde |
border.borderLeft | Diccionario | Establece el estilo del borde izquierdo. El formato del diccionario es el mismo que el de border.border. |
border.borderRight | Diccionario | Establece el estilo del borde derecho. El formato del diccionario es el mismo que el de border.border. |
border.borderTop | Diccionario | Establece el estilo del borde superior. El formato del diccionario es el mismo que el de border.border. |
border.borderBottom | Diccionario | Establece el estilo del borde inferior. El formato del diccionario es el mismo que el de border.border. |
borderRadius | Diccionario | Se utiliza para configurar el radio del borde |
borderRadius.unit | Cadena de caracteres | "px", "rem", "em", "vw" o "%" |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Sugerencia:
Para los iconos de los botones, puede elegir entre el conjunto de iconos disponibles o cargar los suyos propios. Si carga un icono, puede hacer referencia al mismo por su nombre en su script Arcade.
A continuación se muestra un script de ejemplo que cambia el icono de un widget de botón en función del estado de entrega de un pedido:
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};Aplicación de estilo en el widget Lista
El widget Lista admite las siguientes propiedades de estilo para cada uno de los elementos de la lista:
| Propiedad | Tipo | Descripción |
|---|---|---|
fondo | Diccionario | Se utiliza para configurar el fondo |
background.color | Cadena de caracteres | Color de fondo |
background.fillType | Cadena de caracteres | "ajustar", "rellenar", "centrar", "tesela" o "extender" |
background.image | Cadena de caracteres | URL de la imagen |
borde | Diccionario | Se utiliza para configurar el estilo del borde |
border.border | Diccionario | Establece el mismo estilo para todos los bordes |
border.border.type | Cadena de caracteres | "sólido", "con guiones", "con puntos" o "doble" |
border.border.color | Cadena de caracteres | Color de borde |
border.border.width | Número | Ancho de borde |
border.borderLeft | Diccionario | Establece el estilo del borde izquierdo. El formato del diccionario es el mismo que el de border.border. |
border.borderRight | Diccionario | Establece el estilo del borde derecho. El formato del diccionario es el mismo que el de border.border. |
border.borderTop | Diccionario | Establece el estilo del borde superior. El formato del diccionario es el mismo que el de border.border. |
border.borderBottom | Diccionario | Establece el estilo del borde inferior. El formato del diccionario es el mismo que el de border.border. |
borderRadius | Diccionario | Se utiliza para configurar el radio del borde |
borderRadius.unit | Cadena de caracteres | "px", "rem", "em", "vw" o "%" |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
A continuación se muestra un script de ejemplo que aplica un color de fondo diferente a los elementos de la lista que tienen un nivel de prioridad alto:
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Prácticas recomendadas y uso de notas para Arcade
A continuación se ofrece una lista de prácticas recomendadas y notas sobre el uso de scripts Arcade para generar contenidos dinámicos y estilos dinámicos:
- Los scripts Arcade de Experience Builder solo admiten los tipos de capa FeatureLayer, OrientedImageryLayer, SubtypeGroupLayer y SubtypeSublayer.
- Los filtros y filtros espaciales aplicados a fuentes de datos o vistas de datos no se pueden agregar automáticamente a fuentes de datos de perfil. Utilice la función getFilteredFeatureSet para sincronizar el filtro manualmente.
- Para el perfil de formato del widget, el script Arcade utiliza los datos actuales para probar el script al ejecutarlo o aplicarlo. Por ejemplo, si utiliza selectedFeatures y no hay ninguna selección, el script mostrará un mensaje que indica Script Arcade no válido, a menos que haya resuelto el caso de no selección.
- Para el perfil de formato del widget Elemento de lista, al ejecutar o aplicar el script Arcade, este utiliza el primer elemento de lista para probar el script.
- Cada página de aplicación admite un máximo de 10 expresiones Arcade utilizando el perfil de formato de widget, incluyendo tanto el contenido dinámico como el estilo dinámico establecido por el script Arcade.
- Si utiliza un valor de agregación en varios lugares, utilice la opción Arcade de la ventana Agregar datos para agregarlo una vez y utilizarlo en otros lugares.
- Los campos utilizados en el perfil de formato del widget no se agregan automáticamente a la lista de campos utilizados. Si no se hace referencia a estos campos en otro lugar, es posible que el script Arcade no se ejecute correctamente y dé lugar a una salida incorrecta.