Embedding a Data View dynamic report into an existing web-page

Transcription

1 Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4

2 Embedding a Data View dynamic report into an existing web-page Table of Contents 1. Introduction Outline Details Example page Support... 4

3 Embedding a Data View Dynamic Report into an existing Web Page Page 1 1. Introduction It is possible to easily embed Data View dynamic reports into other external web pages. This is useful for providing rich dynamic content in existing pages within your organisation. 2. Outline The process is as follows: 1 Identify the dynamic report you wish to embed on the Data Views module 2 Launch it and obtain an appropriate snippet of source code 3 Adapt the source code 4 Place the adapted code into your existing page code and tweak the styling to suit. Please note that the code snippet you will eventually obtain will look like it has two dynamic report embed tags in it. This is because Internet Explorer treats embedded objects differently to all other browsers (it requires a classid attribute). Therefore the code is repeated twice, once for Internet Explorer and then through a conditional statement for non-ie browsers. You should ensure that if you make amendments (e.g. changing the height of the embed), that you make them in both blocks of code. 3. Details Step 1 - Using the standard Data Views navigation system, you should identify the dynamic report you are interested in using. Open this dynamic report in a web browser. Step 2 Once the report has opened, view the source of the page to locate the appropriate section of code you wish to take. The snippet we wish to use is hidden in the code for those users who do not have JavaScript enabled, so you will notice that as part of the code there are <noscript> tags. In the source code, locate the line that reads: <div id="flashmovie"> and copy all the lines including this one until you reach: to select areas/features from a map. </p> </div> You should also include these lines. You will then have a snippet of code that will look like the image below:

4 Embedding a Data View Dynamic Report into an existing Web Page Page 2 Step 3 Adapt this code. This is a small piece of embed code used in the IAS system for those users who do have Javascript enabled browsers. However, for embedding purposes, we can use this same code to embed this dynamic report. We have to remove two sections of code. 1 Remove both the <noscript> tag and the closing </noscript> tag. 2 Remove the entire paragraph section near the bottom of the snippet that has the error message in it. Delete from the opening <p class= errormessage > down to </p> 3 Update the URLs that are sending the URL of the report to ensure they are absolute rather than relative URLs if you are embedding into a webpage running on a different server/location/url to IAS. The two parameter values to update are: <param name="movie" value=" "> <param name="base" value=" "/> Ensure the content of value now includes a URL that is accessible from the server on which the dynamic report is running. E.g. in our example, we would prefix value /IAS_Demo/DynamicReports/ward_sm/atlas.swf with If you are creating a page sitting within the same website as IAS, then you will not need to perform this step. Step 4 Take your remaining code and place it into the page you wish to embed the dynamic report in. Exactly how you do this, will depend upon the nature of the page you are embedding too. There are a few items you should consider changing according to the circumstances: 1 You should amend the width and height parameters to suit the size of the window you are trying to embed into. Please note that the default minimum embed size for a dynamic report is 820px in width by 620px in height unless the dynamic report has been configured

5 Embedding a Data View Dynamic Report into an existing Web Page Page 3 to work at a smaller size (i.e. 820 x 620 is the minimum size the report will auto-scale down without having scroll bars). 2 The code includes a border around the embed by default. These are in the style tags. You can clear these tags if you do not want to have a border. 4. Example page Below is some sample code used to show how our dynamic report embed snippet can be easily placed into any web page. The page below is very simple. The extra html mark-up that is not part of the code snippet is shown in bold. Those amendments made in step 3 and 4 are shown in red. <html> <head>this is a simple embed page</head> <body> <h2>custom Standalone Webpage</h2> This is a simple example to show how a Data View dynamic report can be easily embedded into a standalone web page. <div id="flashmovie"> <p> <object id="instantatlasreportx" name="instantatlasreport" classid="clsid:d27cdb6e-ae6d-11cf-96b " width="820" height="620" style="" type="application/x-shockwave-flash" data="/ias_demo/dynamicreports/ward_sm/atlas.swf"> <param name="movie" value=" /> <param name="base" value=" /> <param name="flashvars" value="&iasbaselayer=10&iasoverridebaselayer=false&ias=false&data=http%3a%2f%2fia s.instantatlas.com%2fias_demo%2fdata%2fxml%3fviewid%3d9%26geotypeid%3d10%26subsetid%3d- 1%26inline%3dfalse%26timestamp%3d %26lookup%3d%26viewer%3dDynamicReport%26ext%3d& amp;config=%2fias_demo%2fdynamicreports%2fward_sm%2fconfig" /> <!--[if!ie]>--> <object id="instantatlasreport" name="instantatlasreport" width="820" height="620" style="" type="application/x-shockwave-flash" data="/ias_demo/dynamicreports/ward_sm/atlas.swf"> <param name="movie" value=" /> <param name="base" value=" /> <param name="flashvars" value="&iasbaselayer=10&iasoverridebaselayer=false&ias=false&data=http%3a%2f%2fia s.instantatlas.com%2fias_demo%2fdata%2fxml%3fviewid%3d9%26geotypeid%3d10%26subsetid%3d- 1%26inline%3dfalse%26timestamp%3d %26lookup%3d%26viewer%3dDynamicReport%26ext%3d& amp;config=%2fias_demo%2fdynamicreports%2fward_sm%2fconfig" /> <!--<![endif]--> This is a Flash movie which shows this data view as an interactive map with charts and tables. <!--[if!ie]>--> </object> <!--<![endif]--> </object> </p> </div> </body> </html>

6 Embedding a Data View Dynamic Report into an existing Web Page Page 4 5. Support If after consulting the user documentation you require further support for IAS please contact the GeoWise User Support Team. support@geowise.co.uk Telephone: United Kingdom: North America: (toll-free) Hours: Monday-Friday UK: 9:00am-5:00pm USA: 4:00am-12:00 noon EST