Verwenden von HTML in Arcade-Ausdrücken zum Formatieren von Tabellenwerten in ArcGIS Dashboards

Beschreibung

HTML- und ArcGIS Arcade-Ausdrücke können zusammen in ArcGIS Dashboards verwendet werden, um die Darstellung der Daten im Tabellenelement anzupassen. In diesem Artikel werden die Schritte zum Anwenden von fett formatiertem Text auf die Kategorien von Bildungseinrichtungen und die entsprechende Gesamtzahl der Schüler und Studenten beschrieben. Ein Einzug von 20 Pixel wird auch für alle Namen von Bildungseinrichtungen in ArcGIS Dashboards konfiguriert.

Die folgende Abbildung zeigt das Tabellenelement ohne Fettformatierung und Einzug von Text.

Lösung oder Problemumgehung

1. Öffnen Sie das ArcGIS Dashboards-Element. Klicken Sie in der Werkzeugleiste des Dashboards auf Ansicht und dann auf Optionen neben dem Element. Klicken Sie auf Konfigurieren.

2. Klicken Sie auf Werte, um das Menü "Wertoptionen" zu öffnen, und klicken Sie auf Aktivieren.

3. Geben Sie im Fenster Ausdruck den folgenden Arcade-Ausdruck an. Mit dem HTML- und Arcade-Ausdruck werden bestimmte Feldwerte so konfiguriert, dass sie fett formatiert oder um 20 Pixel eingerückt sind. Weitere Beispiele für die Textformatierung finden Sie unter W3Schools: HTML Styles und W3Schools: HTML Text Formatting.

// 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: ''
    },

  }
}

Der folgende Codeblock veranschaulicht den vollständigen ordnungsgemäßen Ausdruck. In diesem Beispiel sind die Feldwertkategorien ("Elementary", "Middle or junior high", "High school" und "College or university") des Feldes "EDUCATION" als fett formatiert konfiguriert, während alle anderen Feldwerte um 20 Pixel eingerückt sind. Die entsprechenden numerischen Feldwerte des Feldes "STUDENT" werden ebenfalls fett formatiert.

// 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. Klicken Sie auf Fertig.

Unten wird das konfigurierte Tabellenelement dargestellt.