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:
Solved! Go to Solution.
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
};
The way it determine if it's an even or odd row is in this bit of code:
{IIF( i % 2 != 0, cssGray, null )
The % is a remainder operator, which returns the number left over when the first operator is divided by the second operator. If an even number is divided by 2, the remainder is 0. The variable i is a counter, which increments as each row is added to the table as it loops through the TopCrimes variable. In the first row, i = 0, so the remainder of i/2 is equal to 0. The first part of the IIF statement is false (0 != 0), so the color is null.
Thanks! I think I was pretty close to that somewhere in my brain. Okay, so then my followup question: this expression here creates some variables and does some statistical operations, more complicated than I need for my average layer popup - what if I just want to create a table from the attributes as-is? How would I construct the table that uses that alternating row function that would automatically place the attribute name and value in two columns of a table while applying alternating background colors?
How is what your looking for different than the existing popup field element?
Good question, so the table from the above expression looks like this:
It creates variables that count instances of a different field (crime type). I really only need to show the actual attribute values present in a layer, at least at this point. A popup that I would like to re-create using a similar expression but is right now built with HTML is:
So just "Attribute Name" {Attribute Value}
Below is the HTML I current use to make that popup above.
<table style="color: rgb(76, 76, 76); width: 250px;">
<tbody>
<tr>
<td><b>Asset Type</b></td>
<td>{AssetType}<br /></td>
</tr>
<tr></tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Materials</b></td>
<td style="background-color: rgb(225, 225, 225);">{Material}<br /></td>
</tr>
<tr>
<td><b>Color</b></td>
<td>{Color}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Feature Details</b></td>
<td style="background-color: rgb(225, 225, 225);">{FeatureDetails}</td>
</tr>
<tr>
<td><b>Condition</b></td>
<td>{Condition}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Is Memorial Bench?</b></td>
<td style="background-color: rgb(225, 225, 225);">{Memorial}</td>
</tr>
<tr>
<td><b>Memorial Name</b></td>
<td>{MemorialName}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Ownership</b></td>
<td style="background-color: rgb(225, 225, 225);">{Ownership}</td>
</tr>
<tr>
<td><b>Maintenance Needed</b></td>
<td>{MaintenanceNeeded}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Maintenance Priority</b></td>
<td style="background-color: rgb(225, 225, 225);">{MaintenancePriority}</td>
</tr>
<tr>
<td><b>Needs Replacement</b></td>
<td>{NeedsReplacement}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Date Installed</b></td>
<td style="background-color: rgb(225, 225, 225);">{DateInstalled}</td>
</tr>
<tr>
<td><b>Park</b></td>
<td>{Park}</td>
</tr>
<tr>
<td style="background-color: rgb(225, 225, 225);"><b>Notes</b></td>
<td style="background-color: rgb(225, 225, 225);">{Notes}</td>
</tr>
</tbody>
</table>
I could definitely be overthinking this, but I tried to adapt the expression just to test it out with one of my own layers (this is a different layer than shown above, but you get the idea I think):
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
};
Okay so first of all that works great! Now, just a couple of last questions because I think I'm following for the most part:
1. the part of the code that says "For (var item in $feature){": in arcade, does item refer to table attributes specifically? It looks to me like it's just a variable name, but if that's the case which part of the code identifies "item" as being a list (array? I'm not sure) of attributes.
2. next, we call {$feature[item]}. If I had gotten there on my own, I think I would have tried {$feature.item}. What are the straight brackets doing for the code here?
3. also, what's the "`" for in the table portion?
PS thank you for the tip on the syntax button. I was looking for something like that in the expand toolbar menu, I just must have missed it. Will do in future.
1. Take a look at this page that talks about loops, and specifically, how looping through a feature works.
2. You have to use brackets when using a variable. Otherwise, Arcade interprets this as an actual field name.
3. Template literals use the back tick instead of single or double quotes.
Don't forget to click the "Mark as Solution" button for all the posts that helped you.