topic Story Map HMTL bootstrap Tabs in Classic Esri Story Maps Questions

Story Map HMTL bootstrap Tabs

JosephYang — Tue, 26 Apr 2022 17:20:13 GMT

Hi everyone,

I am trying to create a list of tabs in a story map page very similar to this link:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

For some reason the
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li> lines become after saving the project

<li><a href="#menu3" target="_blank">Menu 3</a></li> which opens a new tab when the user clicks a tab. Is there a workaround this?

Re: Story Map HMTL bootstrap Tabs

OwenGeo — Tue, 26 Apr 2022 18:54:34 GMT

The data-toggle attribute is not on ArcGIS Online's supported HTML allow list (see Supported HTML—ArcGIS Online Help | Documentation), so I believe that's why it's getting removed. There might be a different way to create the experience you want without using that attribute, or you could host your code on your own web server and embed it into the story.

I moved the question to the classic questions board since I believe you are working with one of the classic storytelling templates like Journal or Series.

Re: Story Map HMTL bootstrap Tabs

JosephYang — Thu, 28 Apr 2022 16:23:24 GMT

Thanks Owen, yes I am using the Map Journal on Enterprise.

I have tried using <iframe> to emded my html and the content is tabbed except is there a way to initiate map story actions through the embed htmls?

Eg. I have a text in one of the tabs with a specific action

<a data-storymaps="MJ-ACTION-1651162466736" data-storymaps-type="media" href="#"

Re: Story Map HMTL bootstrap Tabs

OwenGeo — Thu, 28 Apr 2022 17:34:00 GMT

I don't believe it's compatible with standard browser web security policies for content within an iframe to communicate with the parent page in that way. There might be a way to trigger a story action by implementing some cross-frame messaging via a postMessage API, but that's beyond my expertise. You'd have to work with a developer who has a deep understanding of security.

Re: Story Map HMTL bootstrap Tabs

JosephYang — Thu, 28 Apr 2022 20:51:04 GMT

I see. Story Map actions are a priority so I guess the closest solution would be to list everything in order on the page instead of tabs.

Thank you Owen