Highlight rows with null values using advanced formatting in the ArcGIS Dashboards table elements

Summary

In ArcGIS Dashboards, Arcade expressions can be used to highlight rows containing null values through the advanced formatting option in the table element. This functionality helps to quickly identify incomplete records and determine which records require data updates.

The table below shows a project tracking table containing records with null values without visual indication of missing information, making null records difficult to identify.

Procedure

1. Open the dashboard's edit page.
2. Hover over the ellipsis in the upper-left corner of the table element  and click Configure.
3. Enable advanced formatting in the table element. Refer to ArcGIS Dashboards: Enable advanced formatting in a table for instructions.
4. Specify the following Arcade expression in the Expression window:

1. Set the highlight and colorText variables.

var highlight = '';
var colorText = '';

2. Use an if statement with multiple IsEmpty() conditions to evaluate all fields and highlight the entire row containing null values. Specify the color values for the background and text of the rows containing null values.

if (
  IsEmpty($datapoint.<fieldName1>) || 
  IsEmpty($datapoint.<fieldName2>) || 
  IsEmpty($datapoint.<fieldName3>) || 
  IsEmpty($datapoint.<fieldName4>) || 
  IsEmpty($datapoint.<fieldName5>)
  ) {
  highlight = '<Color values>';
  colorText = '<Color values>';
}

3. Return the section specifying the table columns. Ensure each column uses the highlight and colorText variables so that the entire row is displayed with the assigned colors.

return {
  cells: {
    <fieldName1>: {
      displayText : $datapoint.<fieldName1>,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: '',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
  
    <fieldName2>: {
      displayText : $datapoint.<fieldName2>,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
  
    <fieldName3>: {
      displayText : $datapoint.<fieldName3>,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    <fieldName4>: {
      displayText : $datapoint.<fieldName4>,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
    
    <fieldName5>: {
      displayText : $datapoint.<fieldName5>,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    }
  }
}

The code block below shows the full working expression used in this example.

var highlight = '';
var colorText = '';

if (
  IsEmpty($datapoint.ID) || 
  IsEmpty($datapoint.ProjectName) || 
  IsEmpty($datapoint.ProjectType)|| 
  IsEmpty($datapoint.ProjectManager)||
  IsEmpty($datapoint.Status)
  ) {
  highlight = '#b47477af';
  colorText = '#2248c2ff';
}
  
return {
  cells: {
    ID: {
      displayText : $datapoint.ID,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: '',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
  
    ProjectName: {
      displayText : $datapoint.ProjectName,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
  
    ProjectType: {
      displayText : $datapoint.ProjectType,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    ProjectManager: {
      displayText : $datapoint.ProjectManager,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
    
    Status: {
      displayText : $datapoint.Status,
      textColor: colorText,
      backgroundColor: highlight,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    }
  }
}

Each row containing null values is highlighted with a dusty pink background and blue text in the table below.