topic Side Panel Description Issue / Adding Basemap Carousel / Splash Screen to Swipe App. in Classic Esri Story Maps Questions

Side Panel Description Issue / Adding Basemap Carousel / Splash Screen to Swipe App.

deleted-user-o0qo22IL6bb6 — Mon, 22 Dec 2014 20:19:01 GMT

Hello all:

I have a functioning 'Swipe' Story Map application illustrating the effective Flood Insurance Rate Maps and the Preliminary FIRMs. I have done some basic customization (with some headaches given the structure of the .js files for these apps). However, at the request of my boss, I have been asked to include a few more customizations.

1. I've put together an incredibly simple help page for those that don't find the application intuitive. It's based on the help page provided with other ESRI Local Government applications. In the index.html file, the sidePanelDescription portion says it accepts valid HTML string. In the side panel I would like to include a link to this help page however it does not accept basic html. It kills the application.

I am neither a programmer or a web developer. I've been reteaching myself basic CSS and JS on an as needed basis in order to deploy these applications. That being said, I'm not quote sure what a 'valid html string' entails.

2. The application's .js files, as I've previously mentioned, are just a single block of text. I have parsed out / beautified the swipe-min.css file in order to easily make the aesthetic changes I've wanted to make but whenever I went through that process for the .js files, it kills the app. I'd like to easily add a carousel or a flouting basemap selector to the application. Out of the box, it only includes a topo basemap but I'd like to have the option to switch between that and an aerial.

3. My boss had requested including a quick introductory splash screen. Any easy way to do this?

Any help would be greatly appreciated!

Thanks!

Jason

Re: Side Panel Description Issue / Adding Basemap Carousel / Splash Screen to Swipe App.

GregoryL_Azou — Mon, 29 Dec 2014 17:46:27 GMT

Hi Jason,

1. We use "valid HTML strings" because your description isn't a full web page, it's only part of a page. Because of that most HTML validator will gave you hard time but that one seems pretty good Free Online HTML Validator - FreeFormatter.com . The main thing to note is that you can't use double quotes ("), this will break the app you have to use simple quotes (') or escape the double quotes using a slash (\"). For exemple to include a link in your description you will use <a href='http://www.arcgis.com'>Test</a>

2. Yes the application is minified and you should not edit those files directely, please follow the documentation on GitHub to extend the application: Esri/swipe-map-storytelling-template-js · GitHub

3. That's not included for sure and I don't remember other users doing it in the Swipe app but the application is using bootstrap http://getbootstrap.com/ that comes with Modals JavaScript · Bootstrap so you could use that. That's what the builder is using.

Hope this helps

Re: Side Panel Description Issue / Adding Basemap Carousel / Splash Screen to Swipe App.

deleted-user-o0qo22IL6bb6 — Mon, 29 Dec 2014 18:25:19 GMT

Greg,

Thanks so much for the reply. I'll run through some of your suggestions and see how it all pans out.

I'll repost here with any results.

Jason

Re: Side Panel Description Issue / Adding Basemap Carousel / Splash Screen to Swipe App.

NathanEnge — Tue, 26 May 2015 19:08:49 GMT

Jason

were you able to get a splash screen to popup on app load? I'm thinking of doing the same thing as a disclaimer,

At the end of the index.html, there is a place to put in a splash:

<script type="text/javascript">
	require(["dojo/topic"], function(topic) {
	/*
	* Custom Javascript to be executed while the application is initializing goes here
	*/

	// The application is ready
	topic.subscribe("tpl-ready", function(){
	/*
	* Custom Javascript to be executed when the application is ready goes here
	*/
	});
	});
	</script>