| Page Properties | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
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.
| Warning |
|---|
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
| Note |
|---|
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.
Paste code macro <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:
Paste code macro .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
Paste code macro <script src="custom/js/flashjs/dist/flash.min.js"></script>
- Find the section where the page is loaded e.g.
| Paste code macro |
|---|
<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.
| Paste code macro |
|---|
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.
| Paste code macro |
|---|
<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.
Paste code macro <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>