utilizar HTML em expressões do Arcade para formatar valores de tabela no ArcGIS Dashboards

Descrição

As expressões HTML e ArcGIS Arcade podem ser utilizadas juntas no ArcGIS Dashboards para personalizar como os dados aparecem no elemento de tabela. Este artigo fornece as etapas para aplicar texto em negrito às categorias de instituições de ensino e seu número total de alunos correspondente. Um recuo de 20 pixels também é configurado para todos os nomes de instituições de ensino no ArcGIS Dashboards.

A imagem abaixo mostra o elemento da tabela sem a formatação de texto em negrito e recuo.

Solução ou Solução Provisória

1. Abra o item do ArcGIS Dashboards. Clique em Exibir na barra de ferramentas do painel e clique em Opções , localizado ao lado do elemento. Clique em Configurar.

2. Clique em Valores para abrir o menu Opções de Valor e clique em Habilitar.

3. Especifique a seguinte expressão Arcade na janela Expressão. A expressão HTML e Arcade configura valores de campo específicos para serem negrito ou recuados em 20 pixels. Consulte W3Schools: estilos HTML e W3Schools: Formatação de texto HTML para obter mais exemplos de formatação 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: ''
    },

  }
}

O bloco de código abaixo demonstra a expressão de trabalho completa. Neste exemplo, as categorias de valor de campo (Ensino fundamental, médio ou médio, Ensino médio e Faculdade ou universidade) do campo EDUCAÇÃO são configuradas para negrito, enquanto todos os outros valores de campo são recuados em 20 pixels. Os valores de campo numérico correspondentes do campo STUDENT também são definidos como negrito.

// 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. Clique em Concluir.

Abaixo está o elemento de tabela configurado.