Adding a splash creen to my local government app

[MartaSmith]

Hi,

I read the following documentation on GitHub about adding a splash screen to my online app:
https://github.com/Esri/local-government-online-apps/blob/master/doc/markdown/HowToShowSplashScreen....

I followed the instructions but there is one part I don't understand:
"Save and lint StartWithSplash.json; copy its contents into a new custom template's Configuration Parameters. Publish a map, and you'll see the help display appear as soon as the web app starts."
The part I have trouble with is the bold section. Is there a separate documentation on how to do that part?

Also, is it possible for the splash screen to be a custom page I create? I would like to create a custom splash page with a video tutorial on how to add new observation to the map, and how to use the map in general.

Thank you in advance,
Marta

[MartaSmith]

I noticed that this thread got a lot of views but no responses. Is there a better forum to ask such question?

I am new to ArcGIS, maybe I can clarify. My Splash screen works in my local environment, but only if I use the the direct link to the page, such as:

http://localhost/esri/local-government-online-apps-master/s2.html?app=apps2/StartWithSplash

However, I want the splash page to show when I arrive at my default page with my appId, such as:

http://localhost/esri/local-government-online-apps-master/s2.html?appid=<myAppId>

How do I achieve this? Also, I was wondering if I can create a custom splash page to display, instead of an existing page (such as the help page)?

Thank you in advance,

Marta

[SteveCole]

Unfortunately, my organization has blocked GitHub for fear of malicious Javascript but I have done what you want in my own webmaps. Jquery provides infinite opportunities for displaying "modal" dialogs such as splash screens so that is the path I've chosen for my own work. Specifically, I have used Freeow! and I think it's relatively painless to set up and use.

All of these modal dialogs usually rely on a hidden DIV element in your HTML and will display it at the time you want it to appear. Freeow is no different. Simply create an empty DIV element (give it an ID so that it can be referenced). On the javascript side, you invoke your splash screen at the end of your initialization routine or include it in an event driven function. I invoke my splash screen in dojo.ready(). I've had to tweak Freeow slightly to get it the way I want in terms of screen location and styling but that's pretty much just tweaking the CSS file that comes with it.

I've attached a screen shot of my splash screen. It's a little fancy since I use browser cookies to either display or avoid displaying the splash screen but the core functionality of the splash screen is straight from Freeow.

Steve

[AllisonMuise]

Hi Marta,

If you are hosting the application on your own web server, this step is not necessary, but if you'd like to have your modified app hosted for you in AGOL, the document you are looking for is here: https://github.com/Esri/local-government-online-apps/blob/master/doc/markdown/HowToHostAppOnOnline.m...

Using the workflow in this doc you will take your modified configuration and use it to create a new application template in your organization. You can then share your web map as an app using this modified template.

-Allison

[MikeTschudi]

For hosting the app in ArcGIS Online, you could create a different message box than the one that contains the help and use that message box to display your splash content, including an embedded video. You'd have to pack the HTML for it into a single string, but, as you can see from the image, this still gives you flexibility. The only problem with this approach is that the message box does not have a close button; the only way to close the splash screen would be to click on one of the menu buttons in the top-right corner.

[ATTACH=CONFIG]34784[/ATTACH]

(This snapshot uses the July 2014 release user interface update, but the concept can be used with the current application. The colors used for the non-hyperlink text and the background are controlled by the theme configured when the app is published.)

To add this sample to your hosted app, you'd insert the following text between the '}' and ']' at the end of your configuration:

, {
        "classname": "js.LGMessageBox",
        "styles": ".startMessageBox{display:block;padding:16px;position:absolute;overflow:auto;z-index:40;word-wrap:break-word;border:1px solid lightgray}",
        "config": {
            "rootId": "startMessageBox",
            "content": "<h2>Getting Started with Finder</h2><hr><iframe frameborder='0' scrolling='no' width='720' height='405' src='http://video.arcgis.com/iframe/254/000000/width/720/0/00:00:00'></iframe><h3>Overview</h3><p>Finder is a configurable ArcGIS Online application that searches and queries attributes of feature layers. It can be used to present information about a wide variety of features such as property tax and assessment information or the locations of water access points.</p><p>This application can be deployed by local, state, and national governments; utilities; NGOs and private industries; and can be used by staff or citizens on desktop computers, smartphones, and tablet devices.</p><p>For more information, please go to the <a href='http://solutions.arcgis.com/local-government/' target='_blank'>ArcGIS for Local Government website</a></p>",
            "parentDiv": "contentFrame",
            "rootClass": "startMessageBox",
            "horizOffset": [20, -20],
            "vertOffset": [20, -20],
            "trigger": "splash"
        }
    }

This sample sets the HTML content of the splash screen using the "content" parameter, places it over the map (which is inside the "contentFrame" parent), and sets horizontal and vertical offsets of 20 pixels from each side (so the splash screen will resize as the browser window resizes). Lastly, it sets a "trigger" of "splash"--this is the key to closing it whenever any of the menu buttons is closed.

After making these changes to the configuration file, save and lint the file using validator such as JSONLint to ensure that you have well-formed, error-free JSON. It's also recommended that you clear your browser cache before attempting to view your modified configuration.