View Source

Theme	Display
Type	Message
Available from	This can be left blank unless the How To is only available for a specific version of iShare

Overview

This is a neat way of sending a message to users when iShare GIS is first loaded in the browser. This can be useful for maintenance messages such as:

Application downtime
Network interruption

The popup can either contain plain text or text with a link to a URL e.g.

iShare Help > Display a popup information box on iShare GIS > image2021-11-18_15-39-55.png

Remember you are editing the main .aspx page for the iShare GIS application front-end and any typos or incorrect syntax etc. will cause the entire application to fail. We would suggest that, if you have a test instance of iShare GIS, that you first make the change here.

Step-by-step guide

If you would like help from Astun in adding this feature then this can be done using call off time.

Download the Flash.js library folder from here https://betaweb.github.io/flashjs/ and click the download button as depicted in the image below:

The downloaded folder will have the name flashjs-master
Unzip the folder, rename it as flashjs for easier integration and save it to D:\Astun\iShareGIS\TEST\WebApps\Web\custom\js and to D:\Astun\iShareGIS\TEST\WebApps\Web\custom\css as shown below:
Make a copy of your iShareGIS.aspx page (in case you need to roll back to the original version).
Open your iShareGIS.aspx in a text editor such as Notepad++ (usually found D:\Astun\iShareGIS\TEST\WebApps\Web\iShareGIS.aspx replacing TEST with LIVE where applicable).
Load the CSS file of the Flash library inside the <head> section of the iShareGIS.aspx by adding the following line, as shown in the following screen shot.
<link rel="stylesheet" href="custom/css/flashjs/dist/flash.css" type="text/css">
Inside the <style> element of the HTML code add one more CSS property as shown in the following screen shot:
.ishare-map-max > body > .not-ishare-map { display: block !important; }
Load the JS file of the Flash library inside the <head> section of the iShareGIS.aspx by adding the following line
<script src="custom/js/flashjs/dist/flash.min.js"></script>
Find the section where the page is loaded e.g.

   <script type="text/javascript">
        Event.observe(window, 'load', function() {
            Astun.JS.IncludeJS('gis', function() {
                window.astun.app = new Astun.JS.MapApp("#ishare-gis", "gis",
					{
					    branding: "<h1><a href=\"https://astuntech.atlassian.net/wiki/x/14AgAQ\">iShare GIS</a></h1>"
					}
				);
            });

	/* Add the window.FlashMessage.info in here */

        });
    </script>

Copy the following and paste it into the page where we have added the "Add the window.FlashMessage.info in here" comment above.

	window.FlashMessage.info('iShare GIS maintenance is scheduled for Fri 16 October. <a href="https://www.yourURL">More info</a>',{
		appear_delay: 5000, 	// Delay before flash message appears
		progress: true, 	// Shows progress bar
		theme: 'default',	//available: default, dark
		timeout: 20000 		// Flash message timeout
	});

So you should end up with something like this.

   <script type="text/javascript">
        Event.observe(window, 'load', function() {
            Astun.JS.IncludeJS('gis', function() {
                window.astun.app = new Astun.JS.MapApp("#ishare-gis", "gis",
					{
					    branding: "<h1><a href=\"https://astuntech.atlassian.net/wiki/x/14AgAQ\">iShare GIS</a></h1>"
					}
				);
            });
	window.FlashMessage.info('iShare GIS maintenance is scheduled for Fri 16 October. <a href="https://www.yourURL">More info</a>',{
		appear_delay: 5000, 	// Delay before flash message appears
		progress: true, 	// Shows progress bar
		theme: 'default',	//available: default, dark
		timeout: 20000 		// Flash message timeout
	});
        });
    </script>

The final outcome will be something similar to this where you can see the message at the top right of the map:
We would suggest that you leave the appear_delay and progress as the defaults but you can adjust the timeout if you wish to display the message for a longer or shorter amount of time.

If you wish to turn off this functionality you just need to comment out the window.FlashMessage.info section you added and then it will be there if you need it again e.g.

   <script type="text/javascript">
        Event.observe(window, 'load', function() {
            Astun.JS.IncludeJS('gis', function() {
                window.astun.app = new Astun.JS.MapApp("#ishare-gis", "gis",
					{
					    branding: "<h1><a href=\"https://astuntech.atlassian.net/wiki/x/14AgAQ\">iShare GIS</a></h1>"
					}
				);
            });
	/* window.FlashMessage.info('iShare GIS maintenance is scheduled for Fri 16 October. <a href="https://www.yourURL">More info</a>',{
		appear_delay: 5000, 	// Delay before flash message appears
		progress: true, 	// Shows progress bar
		theme: 'default',	//available: default, dark
		timeout: 20000 		// Flash message timeout
	}); */
        });
    </script>