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. 

[OwenGeo]

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.

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.

[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'.

[OwenGeo · Accepted solution]

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.

[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!

 

[OwenGeo]

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