Usar HTML en expresiones de Arcade para asignar formato a los valores de tabla en ArcGIS Dashboards

Descripción

Las expresiones HTML y de ArcGIS Arcade se pueden utilizar juntas en ArcGIS Dashboards para personalizar la forma en que aparecen los datos en el elemento de tabla. Este artículo proporciona los pasos para aplicar texto en negrita a las categorías de instituciones educativas y su correspondiente número total de estudiantes. También se configura una sangría de 20 píxeles para todos los nombres de instituciones educativas en ArcGIS Dashboards.

La siguiente imagen muestra el elemento de tabla sin el formato de texto en negrita y sangría.

Solución o solución alternativa

1. Abra el elemento de ArcGIS Dashboards. Haga clic en Ver en la barra de herramientas del cuadro de mando y en Opciones , que se encuentra junto al elemento. Haga clic en Configurar.

2. Haga clic en Valores para abrir el menú Opciones de valor seguido de Habilitar.

3. Especifique la siguiente expresión de Arcade en la ventana Expresión. La expresión HTML y de Arcade configura valores de campo específicos para que estén en negrita o con sangría de 20 píxeles. Consulte W3Schools: HTML Styles y W3Schools: HTML Text Formatting para obtener más ejemplos de formato de texto.

// Edit the desired variable name and required field name accordingly
var <variableName1> = Concatenate('<strong>'+$datapoint.<fieldName1>+'</strong>')
var <variableName2> = Concatenate('<div style="padding-left: 20px;">'+$datapoint.<fieldName1>+'</div>')
var <variableName3> = Concatenate('<strong>'+Text($datapoint.<fieldName2>)+'</strong>')

var <variableName4> = When($datapoint.<fieldName1> == '<textValue1>', <variableName1>, $datapoint.<fieldName1> == '<textValue2>', <variableName1>, $datapoint.<fieldName1> == '<textValue3>', <variableName1>, $datapoint.<fieldName1> =='<textValue4>', <variableName1>, <variableName2>)>
var <variableName5> = When(Text($datapoint.<fieldName2>) == '<numericValue1>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue2>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue3>', <variableName3>, Text($datapoint.<fieldName2>) =='<numericValue4>', <variableName3>, Text($datapoint.<fieldName2>))
return {
  cells: {
    <fieldName1>: {
      displayText : <variableName4>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    <fieldName2>: {
      displayText : <variableName5>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}

El siguiente bloque de código muestra la expresión de trabajo completa. En este ejemplo, las categorías de valor de campo (Primaria, Secundaria básica o intermedia, Bachillerato y Estudios universitarios o de educación superior) del campo EDUCACIÓN están configuradas para estar en negrita, mientras que todos los demás valores de campo tienen una sangría de 20 píxeles. Los valores de campo numéricos correspondientes del campo ESTUDIANTE también están configurados para aparecer en negrita.

// Edit the desired variable name and required field name accordingly
var bldE = Concatenate('<strong>'+$datapoint.EDUCATION+'</strong>')
var txaE = Concatenate('<div style="padding-left: 20px;">'+$datapoint.EDUCATION+'</div>')
var bldS = Concatenate('<strong>'+Text($datapoint.STUDENT)+'</strong>')

var educ = When($datapoint.EDUCATION == 'Elementary', bldE, $datapoint.EDUCATION == 'Middle or junior high', bldE, $datapoint.EDUCATION == 'High school', bldE, $datapoint.EDUCATION =='College or university', bldE, txaE)
var stud = When(Text($datapoint.STUDENT) == '41626', bldS, Text($datapoint.STUDENT) == '42283', bldS, Text($datapoint.STUDENT) == '47971', bldS, Text($datapoint.STUDENT) =='59081', bldS, Text($datapoint.STUDENT))

return {
  cells: {
    EDUCATION: {
      displayText : educ,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    STUDENT: {
      displayText : stud,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}

4. Haga clic en Hecho.

A continuación se muestra el elemento de tabla configurado.