Hello everyone,
I'm using the list widget on the dashboard. I want to have the symbol the same as my map. However, would like to have the symbols on the list bigger.
How can I change the size of an icon in the list?
Thanks in advance! 🙂
Ken
Accepted Solutions
You can change the icon size by adjusting the actual symbol size in the linked map or the layer default symbology, whichever applies.
Unfortunately, this only goes up to a point. The icon's max height / width is 40 pixels, and that is explicitly defined in the CSS. And each icon is an SVG, with its height and width set to a fixed value.
But is there a way around it? You bet! Using the Advanced Formatting feature, we can make up our own SVGs. In my example, I am using the FID column to define the color, but you could easily re-write this to match your icon symbology settings.
var symbol_color = Decode(
$datapoint["FID"],
0, "blue",
1, "red",
2, "green",
3, "yellow",
"grey"
);
var symbol_size = 80;
var svg = `<svg height="${symbol_size}" width="${symbol_size}">
<circle cx="${symbol_size / 2}" cy="${symbol_size / 2}" r="${symbol_size * 0.4}" stroke="black" stroke-width="1" fill="${symbol_color}" />
</svg>`;
return { attributes: { svg } };
Fiddle with the symbole_size parameter until it's something you like.
And then in the list, we can open up the line item template and do something like this:
<div style="display:flex">
<div style="flex:0 4 20%">{expression/svg}</div>
<div style="flex:0 1 80%">Your attributes / text go here</div>
</div>
And the result:
You can change the icon size by adjusting the actual symbol size in the linked map or the layer default symbology, whichever applies.
Unfortunately, this only goes up to a point. The icon's max height / width is 40 pixels, and that is explicitly defined in the CSS. And each icon is an SVG, with its height and width set to a fixed value.
But is there a way around it? You bet! Using the Advanced Formatting feature, we can make up our own SVGs. In my example, I am using the FID column to define the color, but you could easily re-write this to match your icon symbology settings.
var symbol_color = Decode(
$datapoint["FID"],
0, "blue",
1, "red",
2, "green",
3, "yellow",
"grey"
);
var symbol_size = 80;
var svg = `<svg height="${symbol_size}" width="${symbol_size}">
<circle cx="${symbol_size / 2}" cy="${symbol_size / 2}" r="${symbol_size * 0.4}" stroke="black" stroke-width="1" fill="${symbol_color}" />
</svg>`;
return { attributes: { svg } };
Fiddle with the symbole_size parameter until it's something you like.
And then in the list, we can open up the line item template and do something like this:
<div style="display:flex">
<div style="flex:0 4 20%">{expression/svg}</div>
<div style="flex:0 1 80%">Your attributes / text go here</div>
</div>
And the result:
I have a set of points that are symbolized as circles and X's based on an attribute and can't quite figure out how to make your code work. Screenshot below shows the large X and blue circle based on the layer properties set in the webmap, but I want the size of the icons to be much smaller in the actual list. Nothing fancy...I'm sure the solution is staring me in the face....
Do you mean change the value from 12 to 12px? It won't execute when I do that unfortunately.
The size of the smaller dot is being changed when I change that value from 12 to 8 for example. It's creating a new graphic though when what I really want is to control is the existing graphic which is tied to the attribute value 'Completed.' Your code effectively allows me to change the colors using that attribute value, but can I also change the shape of the icon that is created and instead make circles and X's ? I know nothing about about SVGs and the documentation online for advanced formatting is limited.
thanks in advance and apologies if this should have been on a new thread -
var symbol_color = Decode(
$datapoint["Completed"],
0, "blue",
1, "red",
2, "green",
3, "yellow",
"grey"
);
var symbol_size = 8; // is the suggestion to change this to var symbol_size = 12px
var svg = `<svg height="${symbol_size}" width="${symbol_size}">
<circle cx="${symbol_size / 2}" cy="${symbol_size / 2}" r="${symbol_size * 0.4}" stroke="black" stroke-width="1" fill="${symbol_color}" />
</svg>`;
return { attributes: { svg } };
I am using different symbols for my incident types. On the map, the symbols looked fine. However, on the dashboard list, the icons looked very small. I was able to make the icons in the list the same size as the map icons by removing the check from Adjust size automatically within the map symbology. Not sure if this would pertain to this discussion, but I thought it might help.
Just to close the loop on this, the 'adjust size automatically' didn't fix the issues. Using the symbology that was generated when I published the webMap through ArcPro didn't seem to work and produced enormous icons in the Dashboard List. The "Basic Shapes" option had the same issue. I googled a blue circle icon and black x and downloaded .png files. Then I selected the Uploaded Symbols category and uploaded my .png files and the list looks great now:
