Cómo crear un PopUp Inteligente con Arcade en ArcGIS Online

 var html = `<div style="

              margin-top:10px;

              background-color:#eef3f7;

              border:1px solid #003366;

              border-radius:6px;

              padding:10px; margin-bottom:16px;

            ">`

        return {

              type: 'text',

              text: html

            }

   // Obtener inspecciones relacionadas

            var inspecciones = FeatureSetByRelationshipName($feature, 'Equipos')

            // Ordenar por fecha descendente y tomar la más reciente

            var ultimas = OrderBy(inspecciones, 'fecha_inspeccion DESC')

            var recientes = First(ultimas)

            // Asignar color según condición general

            var color = IIf(recientes.condicion_general == 'Crítico', '#d7191c',

                  IIf(recientes.condicion_general == 'Alerta', '#fdae61', '#1a9641') )

            // Construir bloque HTML para mostrar última inspección

            html += `<div style="background-color:#E6F4EA; border:1px solid #bbb; border-radius:6px; padding:10px; margin-bottom:14px;">

            <div style="font-size:14px; font-weight:bold; color:#003366; margin-bottom:6px;">🕓 Última inspección</div>

            <div><b>Fecha:</b> ${Text(recientes.fecha_inspeccion, 'DD-MM-YYYY')}</div>

            <div><b>Inspector:</b> ${recientes.inspector}</div>

            <div><b>Condición:</b> <span style="color:${color}; font-weight:bold;">${recientes.condicion_general}</span></div>

            <div style="margin-top:6px;">

                <b>Temperatura motor:</b> ${recientes.temperatura_motor} °C<br>

                <b>Vibración:</b> ${recientes.vibracion} mm/s

            </div>

            `;

// Asignar pesos para cada estado

            var pesos = { "OK": 1, "Alerta": 2, "Crítico": 3 }

            var peor_valor = 0

            var peor_registro = null

            // Recorrer todas las inspecciones y encontrar la de mayor peso

            for (var p in inspecciones) {

              var peso = pesos[p.condicion_general]

              if (peso > peor_valor) {

                peor_valor = peso

                peor_registro = p

              }

            }

            // Construir bloque HTML para mostrar peor condición

            html += `<div style="margin-top:10px; background-color:#eef3f7; border:1px solid #003366; border-radius:6px; padding:10px; margin-bottom:16px;">

            <div style="font-size:14px; font-weight:bold; color:#d7191c; margin-bottom:6px;">🔴 Peor condición registrada</div>

            <div><b>Fecha:</b> ${Text(peor_registro.fecha_inspeccion, 'DD-MM-YYYY')}</div>

            <div><b>Inspector:</b> ${peor_registro.inspector}</div>

            <div><b>Condición:</b> <span style="color:${color}; font-weight:bold;">${peor_registro.condicion_general}</span></div>

            <div style="margin-top:6px;">

                <b>Temperatura motor:</b> ${peor_registro.temperatura_motor} °C<br>

                <b>Vibración:</b> ${peor_registro.vibracion} mm/s

            </div>

            `;

    // Cierre del contenedor principal HTML

            html += `</div>`

            // Retornar el contenido como tipo texto para el popup

            return {

              type: 'text',

              text: html

            }