Dashboards That Pop: Embeds
In this edition of Dashboards That Pop, we’ll be talking about embedding dynamic content inside of ArcGIS Dashboards. Embeds are a helpful way to get additional content and contextual information into your dashboard that isn’t available in your data. Popular embeds I’ve seen are weather forecasts/conditions, traffic camera feeds, and contact lists. Embeds can also be used to facilitate workflows, the most popular of which is using the dashboard to drive an editing workflow in Survey123.
This blog will go over more general tips for setting up your dashboard embeds. If you are interested in learning how to set up a Survey123 editing workflow, I suggest you check out Survey123 Tricks of the Trade: Embedding a Survey.
Adding Embeds
You can embed a variety of different content, but for this example we will embed an image. Senate.gov has images of each state’s state seal. If we look at the URLs for some of these seal images, we can see that there is a nice little pattern to them:
https://www.senate.gov/states/AL/seal.png
https://www.senate.gov/states/AK/seal.png
https://www.senate.gov/states/AZ/seal.png
These image URLs use the state abbreviation to distinguish each image. If we have a dataset in our dashboard that contains state abbreviations, we can display these seal images in our dashboard and have them change based on the user selection.
To set this up, we will first add an embed element to our dashboard. In order to make it dynamic, we will need to set the type to features and then select the data layer that contains our state abbreviations.
Our seals are all images, so we will choose the image content type. If we were embedding a website or other app, I would have chosen document.
Now we will add the URL to our seal images. You will need to replace the state abbreviation in the URL with our state abbreviation field. Your field name should be in curly brackets. I like to use the dashboard field picker, so I don’t have to worry about remembering the exact field name.
Our URL will look like this: https://www.senate.gov/states/{state_abbr}/seal.png
Finally, change the maximum displayed features to 1.
At this point, we have our embedded content added to our dashboard, but we need a way for users to interact with it. Let’s add a list element and point the action to our embedded content.
I like to set it up so that my embedded content only renders when filtered. Otherwise, it will display the first record in your data. This is typically the record with an object id of 1, unless you set up a data sort on your embedded content widget. I don’t like this because you have one widget that is filtered so it may not be relevant compared to the rest of your elements. It is also not transparent to the user that a filter has been applied.
This is why I like to use the render only when filtered option and set up a custom No Selection message for the embed widget.
I like to provide explicit directions, so the users know what to do. You can even add an image to help your dashboard look fuller when first opened.
Tips
The values in your data have to exactly match the values in the URL. Looking at our example URL, our dataset needs to have uppercase state abbreviations. Nothing else will work.
It’s important to note that not every website allows you to embed it in other websites. I like to add the full URL without any field name variable to ensure that it can be embedded into my dashboard before spending any time adding variables and then trying to troubleshoot why it’s not working.
If you are having trouble getting your embed to work, try copy and pasting your embed URL into a list so you can see exactly how it looks once the variables are filled in. Are there any spaces or special characters? Are there nulls in your data causing issues? If it looks ok, try copying and pasting one of the filled in URLs into a new browser. Does the link work outside of the dashboard?
If your dataset contains URLs to the content you want to embed, you can simply reference that URL field. This method is useful if your URLs do not have a set pattern you can take advantage of.
Just because you can embed something doesn’t mean you should embed it. Does it add value, and does it fit into how users will be using your dashboard? Do not embed a website if users have to scroll through it, use the website navigation, or it is not immediately clear what users are supposed to do with it. Instead consider adding that website as a link to a details or list element.
Happy Dashboarding!
More Dashboards That Pop Articles