Help understanding Arcade expression to create table

ZachBodenner

Hello,

I'm not super proficient with Arcade but I'm trying to get better! Specifically, loops and iterations aren't super clear to me at all. Recently I was going through a blog post from ESRI about improving popups with arcade (this one specifically deals with cluster popups). The entire popup syntax is below:

Expects($aggregatedFeatures, "is_night", "type");

var crimes = $aggregatedFeatures;

// Queries the count of crimes grouped by the "type" field

var stats = GroupBy(crimes, ["type"],

  [

    { name: "total", expression: "1", statistic: "count" },

    { name: "nightPercent", expression: "is_night", statistic: "avg" }

  ]

);

// Orders the results in descending order by the total count

var topCrimes = Top(OrderBy(stats, "total desc"), 5);

if(Count(topCrimes) == 0){

  return {

    type: "text",

    text: "No crimes committed in this area"

  };

}

// Build an HTML table to display the summary of

// crimes by count and how many occurred at night

var cssGray = "style='background-color:#d6d6d6;'";

var cssRight = "style='text-align: right;'";

var cssCenter = "style='text-align: center;'";

var table = "<table style='width: 100%'>";

table += `<tr>

  <td ${cssCenter}><b>Category</b></td>

  <td ${cssCenter}><b>Count</b></td>

  <td ${cssCenter}><b>% at night</b></td>

</tr>`;

var i = 0;

for(var item in topCrimes){

  var num_crimes = Text(item.total, "#,###");

  var night_percent = Text(item.nightPercent, "#%");

  var crimeType = item["type"];

  table += `<tr ${IIF( i % 2 != 0, cssGray, null )}>

    <td>${crimeType}</td>

    <td ${cssRight}>${num_crimes}</td>

    <td ${cssRight}>${night_percent}</td>

  </tr>`;

  i++;

}

table += "</table>";

// Return the table as a text element

return {

  type: "text",

  text: table

};

 

In particular I am interested in this section:

 

table += `<tr ${IIF( i % 2 != 0, cssGray, null )}>

    <td>${crimeType}</td>

    <td ${cssRight}>${num_crimes}</td>

    <td ${cssRight}>${night_percent}</td>

  </tr>`;

  i++;

}

table += "</table>";

 

What this seems to do in the popup is configure a table to have alternating background colors for the table rows (as well as right-aligning the return text). Can someone please explain to me how this works? Does the function index rows and somehow determine if it's an even row vs. odd row? 

 

I have some tables constructed in HTML popups that are a pain to adjust because I hard-code the background color manually into alternating table rows. This really looks like it could make my life easier if I could figure it out.

 

Thanks!

kenbuja

A couple of things. Your code is looping through at the fields of the feature, but you're returning only the one attribute for Cultivar for each field. Also, you're arbitrarily setting the size of the table to 350 px, which is larger than the popup width. Use width=100%, which will make the table as big as the longest value and attribute. Try this instead (and please use the syntax button when adding code)

// Build an HTML table to display the summary of
// crimes by count and how many occurred at night
var cssGray = "style='background-color:#d6d6d6;'";
var cssRight = "style='text-align: right;'";
var cssCenter = "style='text-align: center;'";

var table = "<table style='width: 100%'>";

var i = 0;
for(var item in $feature){
 
  table += `<tr ${IIF( i % 2 != 0, cssGray, null )}>
    <td ${cssRight}>${item}</td>
    <td ${cssRight}>${$feature[item]}</td>
  </tr>`;
  i++;
}
table += "</table>";

// Return the table as a text element
return {
  type: "text",
  text: table
};