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

(1)

Embedding a Data View dynamic report

into an existing web-page

(2)

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.

(4)

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

http://ias.instantatlas.com

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

(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.

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="820" height="620" style="" type="application/x-shockwave-flash" data="/IAS_Demo/DynamicReports/ward_sm/atlas.swf"> <param name="movie"

value="http://ias.instantatlas.com/IAS_Demo/DynamicReports/ward_sm/atlas.swf" /> <param name="base"

value="http://ias.instantatlas.com/IAS_Demo/DynamicReports/ward_sm/" /> <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%3d05172011172908179%26lookup%3d%26viewer%3dDynamicReport%26ext%3d& amp;config=%2fIAS_Demo%2fDynamicReports%2fward_sm%2fconfig" />

type="application/x-shockwave-flash"

data="/IAS_Demo/DynamicReports/ward_sm/atlas.swf"> <param name="movie"

value="http://ias.instantatlas.com/IAS_Demo/DynamicReports/ward_sm/atlas.swf" /> <param name="base"

value="http://ias.instantatlas.com/IAS_Demo/DynamicReports/ward_sm/" /> <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%3d05172011172908179%26lookup%3d%26viewer%3dDynamicReport%26ext%3d& amp;config=%2fIAS_Demo%2fDynamicReports%2fward_sm%2fconfig" />

This is a Flash movie which shows this data view as an interactive map with charts and tables.  </object>  </object> </p> </div> </body> </html>

(6)

5. Support

If after consulting the user documentation you require further support for IAS please contact the GeoWise User Support Team.

Email: [email protected]

Telephone: United Kingdom: +44 131 624 8935 North America: 1-800-961-8948 (toll-free) Hours: Monday-Friday

UK: 9:00am-5:00pm

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