Dashboards That Pop: No Selection? No Problem!
I started writing about some creative alternative uses for common ArcGIS Dashboard elements. The blog started to get a bit long, and I noticed that a couple of them really made good use of the No Selection message. So, I decided to break it up into a few blogs and focus today on the No Selection setting.
The No Selection setting is used with elements that have been configured to only render when filtered. When these elements do not have a filter applied, they display the No Selection message, the default message being ‘Selection required on one or more elements’.
I use this a lot when I have dashboards that are used to support a Survey123 editing workflow. I always take a minute to change the default message to ensure that it is clear to the user what they need to do to activate the element.
Today I am letting the No Selection message have its moment in the sun. Finally, it gets to be more than just a helpful informational message.
Space Dashboard
Both upper corners of this dashboard are using widgets in an out of the box manner to add just a little bit extra to the dashboard. The No Selection message is the workhorse of this configuration, as without it the design just wouldn’t work. The upper right corner displays the flag of the country users have filtered on. If a country filter has not been applied, then the unofficial flag of Planet Earth is displayed. This is a nice visual reminder to users that a country filter has or has not been applied to the dashboard and adds some polish and visual interest to a pretty simple dashboard.
The upper left corner features a simple introduction to the dashboard and a dynamic logo. As you click on various rocket launches, the outer circle of the logo changes color to reflect the mission status. Any guesses as to the two mystery elements?
Flags
The flag element is a details element. In the webmap, I am using arcade to dynamically add images to the media section based on the country field. Flagpedia.net has all sorts of flag images available for use and these images follow a standardized URL which means you can use Arcade to dynamically create the image link for you. Check out the Dashboards that Pop: Arcade post for more detailed Arcade tips.
Then in the Details element, I turned off everything except for the media section.
Next, I set the maximum features displayed to 1. This works to display various country flags, but what if I don’t have a filter applied? In that case it would simply display the first record (and corresponding country flag) in my dataset which would be confusing. I needed some sort of default image to display. I decided that the Planet Earth flag would be a good on-topic choice, but I don’t have an Earth value in my dataset to power it. To get the default Planet Earth flag to display I had to get creative. For this, I set the details element to render only when filtered.
Then I used some HTML to add my Planet Earth flag in the No Selection message box. Check out the Dashboards That Pop: HTML post for more details on using HTML in dashboards.
To make this as seamless as possible, you want to spend the time getting your No Selection content as close as possible to the dynamically displayed content.
If you are wondering why I didn’t just use an embed element for the images instead of the details element, it is because I needed to be able to use Arcade to clean up my country attributes to match the flagpedia country codes in the URLs.
Welcome Message
This element is a List displaying a single feature. Using a list instead of a rich text element, allows me to use Arcade to create dynamic content. In the list I added some HTML that stacks a donut shaped SVG element on top of my logo image. Next, I used Arcade to dynamically change the SVG color and added the expression to the HTML.
<div style="background-image:url(https://prof-services.maps.arcgis.com/sharing/rest/content/items/2e5e03919f0143cfb14ded258e9421c2/data);height:101px;margin:0 auto;width:101px;">
<svg version="1.1" viewBox="67.2 67.2 377.6 377.6" xmlns="http://www.w3.org/2000/svg"><path d="m256 444.8c-104.32 0-188.8-84.48-188.8-188.8s84.48-188.8 188.8-188.8 188.8 84.48 188.8 188.8-84.48 188.8-188.8 188.8zm0-352c-90.238 0-163.2 72.961-163.2 163.2s72.961 163.2 163.2 163.2 163.2-72.961 163.2-163.2-72.961-163.2-163.2-163.2z" fill="{expression/scolor}"></path></svg>
</div>
<p>
</p>
<p>
Welcome to the Space Missions dashboard, where we explore the history of rocket launches. Browse by country or click on a launch to see where the rocket was launched.
</p>
Once again, I set this list to only render when filtered and added my HTML to the No Selection message. This time I hard-coded the SVG color into the HTML.
This method is a bit advanced; another option would be to have multiple logo images that have different colored rings as part of the image. Then you could use Arcade to dynamically display the different logo URLs.
Happy Dashboarding!