nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS Dashboard Mobile Layout embed behavior in StoryMaps

AaronKoelker

ArcGIS Dashboards introduced new mobile layouts this past summer that allows authors to configure two versions of a single dashboard item, which would then dynamically swap between desktop and mobile layouts based on the screen size readers were viewing it with.

I was hoping to take advantage of this within StoryMaps while using the embed block, so that if you viewed the StoryMap on desktop, you'd get the desktop version of a dashboard within an interactive embed block. If you viewed the StoryMap on mobile, then you'd expect to get the mobile StoryMaps layout along with either the mobile layout of the dashboard if in interactive mode, or the static card option that would link to a new window and show the mobile dashboard layout full screen.

But this doesn't appear to work as expected, at the moment. When adding an ArcGIS Dashboard with a mobile layout to an embed block in a StoryMap, it appears to always default to the mobile view of the dashboard within the embed block, even when the StoryMap is displaying the desktop (landscape) layout. Changing the size of the block (small, medium, large) makes no difference.

Not sure if this is a bug, oversight, or user error, but it would be great to have this sorted out. So many folks view StoryMaps on phones, and simple dashboards are a great option for the embed block to show a basic bar chart or line graph, etc. in a StoryMap. It would be nice to have dynamic layout switching between the two apps work together.

Find more posts tagged with

Embed

Accepted answers

OEvans

Hi @AaronKoelker -- It's generally up to the dashboard which view loads depending on the screen/container it occupies. Depending on your screen/browser window size, the small block size in the story builder may not be large enough to trigger the dashboard's desktop view. If you change to the medium or large block size (and reload the story builder) you should usually see the desktop view.

If you have feedback about which dashboard view should shown for particular sizes of devices/iframes or would like to be able to configure that, I would suggest submitting that to the Dashboard team.

All comments

sandra555

@OwenGeo That is AWESOME! Thanks!

OEvans

@sandra555 - You can adjust the height of the dashboard iframe using the technique in the blog I shared above. Essentially, you add width="100%" height="1000px" to your iframe code and you can experiment with the height and the layout of the mobile view to see if you can get it to look more like you expect.

sandra555

Thank you for explaining! That explains a lot. When I embed my dashboard in the storymap with the view=mobile, the dashboard shows the layout of the mobile view, but it is vertically squished. Will it look this way on a mobile device? Is there a way to make it like the view I see when I look at the dashboard in mobile mode (which is taller than it is wide)? Let me know if you would like to see screenshots of what I mean. Thanks for you assistance!

OEvans

@sandra555 -- I apologize, I realized that I misread your first message and misunderstood your original question.

If you embed a dashboard without view=mobile, the mobile view will ONLY show on a physical mobile device. The reason for this is the dashboard automatically switches to mobile view based on the device's screen size, not the size of the frame or window where the dashboard is embedded (see documentation on this here).

This is why you are not seeing the dashboard automatically show the mobile view when previewing a StoryMap on your desktop device, even in the story builder's mobile preview or when resizing the browser window.

I understand that you are not able to test this on a physical mobile device, but we have tested this in the past and verified dashboards with mobile views do show the mobile view on devices smaller than <600px. This is the case if the dashboard is viewed on its own or embedded in a StoryMap. Just be sure you have selected the LIVE option for small screens in the Embed options.

Screenshot 2025-05-07 at 7.40.06 AM.jpg

sandra555

@OwenGeo Thank you for replying so quickly. This works if I close the iframe (e.g., <iframe src="https://noaa.maps.arcgis.com/apps/dashboards/9705ce05977940eda13f39583d04df26#view=mobile"></iframe>). What would I do I only want the mobile view of the dashboard to show in the storymap if I am using Preview with a mobile device icon selected (when working on my desktop), or when I am on a mobile device. Unfortunately, I am not able to test my storymap on an actual mobile device due to my organizational authentication procedures.

OEvans

@sandra555 -- When you embed a dashboard, you need to use an iframe if you want to pass in URL parameters, like this:

<iframe src="https://www.arcgis.com/apps/dashboards/abcdef123456#view=mobile" />

When you do this, the dashboard's mobile view will be shown all the time in your story, and you can also set your own height for the embedded dashboard as well (see this blog for more info).

If you don't use an iframe, the URL is optimized for typical display and any URL parameters are removed.

Please give this a try and let me know if it works as you expect.

sandra555

@OwenGeo I have a similar issue I hope you can help with. I have a dashboard embedded in a storymap. On my desktop, when I view my dashboard on its own, I can add #view=mobile to the end of the URL and it gives me my mobile view of the dashboard. When I use the Preview in a storymap, and click the mobile device icon, I do not get the mobile view. I have tried reducing my browser window width, changing screen resolution, and making sure to click the preview full screen button between changing views but I still see the desktop view. Can you provide some insight into how I can review the mobile view of the dashboard within the storymap? Thanks

OEvans

Thanks for the additional information. I can see how having that block be a bit taller on a phone screen would be advantageous for displaying the dashboard. We can look into providing some additional options (or perhaps just improving the standard experience).

FYI, the rules for desktop vs. mobile dashboard views are if the height OR width are <600px the mobile view of a dashboard shows. That's documented here: Requirements—ArcGIS Dashboards | Documentation

AaronKoelker

Aha! Changing the block size to medium and large worked, once I also refreshed the page as you were explaining in your original response. I wasn't putting 2 and 2 together there. Thanks! I also get what you're saying about the the Dashboard app itself determining the layout based on the iframe it's loading into.

I guess as a potential improvement to the StoryMaps side then, it would be neat if the embed block could recognize if an ArcGIS Dashboard is being loaded (maybe other ArcGIS Online apps, too, if they have a portrait friendly mode), and then would automatically extend the length of the embed block on mobile to a longer portrait layout to accommodate. Or maybe just a setting to have the embed block change to a predefined portrait display ratio whenever the StoryMap is loaded into the mobile view.

Thanks again for the help!

OEvans

If you have feedback about which dashboard view should shown for particular sizes of devices/iframes or would like to be able to configure that, I would suggest submitting that to the Dashboard team.

AaronKoelker

Appreciate the response Owen. A refresh button in the builder would be great!

However I'm seeing the issue in a published story (not just the builder). I have created a new StoryMap with just the one Embed block and dashboard as a test that replicates the behavior and shared it publicly if you want to take a look. Here is the link to just the dashboard, as well. The dashboard on its own appears to be switching between the two layouts correctly. But when embedded in the StoryMap it only ever loads in the vertical mobile layout for me, even when viewing the public published story on a desktop sans builder. The only difference between the desktop/mobile layouts in my dashboard is the orientation of the chart. The desktop layout should have a horizontal chart with a legend to the right, while the mobile layout has a vertical chart with the legend below.

Perhaps something about my specific dashboard layout is throwing it off? Or maybe I don't have things set up right on the embed block. Currently the block is set to 'interactive' using the small size layout. In the additional options, I have both boxes checked under Large Screens, and under Small Screens it is currently set to 'Live'.

OEvans

Hi @AaronKoelker -- Thanks for sharing this feedback. This is a great question!

A dashboard must be reloaded to trigger a change in its view (from mobile to desktop or vice versa). For performance reasons, the story builder doesn't reload embeds when changing block size or adjusting the browser window size, so this is why you might not see exactly what you expect. But don't worry! dashboard mobile views do work well in StoryMaps!

We have tested this (because we were also excited about the dashboard mobile view feature!), and you should see the view you expect at different screen sizes if you reload the story builder. And you'll certainly see the right dashboard view once you publish your story and view it on different sized screens/devices. This includes if you set the dashboard to the LIVE option for small screens in the embed options.

You can also use the device previews in the story builder to see this. But be aware that embeds may not always reload every time you change the device preview mode. Be sure to go back to the "full screen" preview mode before changing between one of the other device previews to ensure a reload.

Screenshot 2023-09-20 at 6.37.16 AM.jpg

We understand how you could get the impression that these features don't work as expected based on the current behavior, but hopefully this information helps explain how things work. We are thinking about some ways to improve this experience without sacrificing performance or reloading embeds more than necessary. We have discussed perhaps adding a "Refresh" button to the embed toolbar so you could manually reload the content in an embed block, but we're not sure this would be obvious to anyone who didn't know they had to reload the content.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.