The purpose of this post is to provide the necessary information for embedding Report Builder for ArcGIS reports into a website.
If the website you are embedding into is a WordPress website supplied by Esri UK, please ensure that the page template is not set to InstantAtlas – Sub-Level – Content (Auto-Embed Reports). As the name suggests, this template auto-embeds reports according to a file behind the scenes of your WordPress website. We use this mechanism to embed the standard reports with data from the National Data Service we provide for our managed service customers.
To embed a report, add this code to your web page:
<div id="iaReportHolder" class="ia-report-viewer ia-app ia-embedded-report"><script src="https://www.reports.esriuk.com/static/js/ia-reports.js?report=5db1ef44afe64e499b390b57c0f012ae&container=iaReportHolder&auto=true"></script></div>
Simply change app ID (shown above in red) to embed a different report. If you wish to embed a report for a particular feature rather than the index page, add this code to your web page:
<div id="iaReportHolder" class="ia-report-viewer ia-app ia-embedded-report"><script src="https://www.reports.esriuk.com/static/js/ia-reports.js?report=5db1ef44afe64e499b390b57c0f012ae&feature=E05007163&container=iaReportHolder&auto=true"></script></div>
Simply change the feature code (shown above in blue) to embed the report for a different feature.
To allow an end user to change the feature the report is displayed for, you can insert the Navigator widget into the report (you may need to edit the widget’s Item Hyperlink setting).
Alternatively, you can embed the report (with a control shown above it to select the report/feature) using a configuration attribute as shown below.
<div><div class="ia-report-viewer ia-app ia-embedded-report no-controls" data-config='{"reports": [{"id": "677880328fb94104b91b758bd498d881", "name": "County"}], "default_geography": "677880328fb94104b91b758bd498d881"}'><script type="text/javascript" defer src="https://www.reports.esriuk.com/static/js/ia-reports.js?container=.ia-report-viewer&auto=true"></script></div></div>
The red text shows the script tag that does the work of embedding the report(s). Note the ?container=.ia-report-viewer part of the URL – this is what tells the script where to fetch the configuration from. You will need to make sure that the “class” of your enclosing <div> matches this ?container= instruction.
The blue text shows the reports configuration. This is encoded as JSON and can look a bit complicated – but is essentially a list of the reports that you want to use as { "id": "<report-id>", "name": "<label-to-show-in-drop-down>" }. In the example above, there is just one report in the list.
But you can use the same approach to embed multiple reports in the same page, as shown below, by adding more reports to the list.
<div><div class="ia-report-viewer ia-app ia-embedded-report no-controls" data-config='{"reports": [{"id": "677880328fb94104b91b758bd498d881", "name": "County"}, {"id": "ce13e3808baa4e56aad1b5583a9244bd", "name": "Local Authority"}, {"id": "2a41ba53aebc43198723a4705f706223", "name": "Active Partnership"}, {"id": "692664a5ea1c469a8a263cff0d3868fc", "name": "Local Delivery Pilot Area"}], "default_geography": "677880328fb94104b91b758bd498d881"}'><script type="text/javascript" defer src="https://www.reports.esriuk.com/static/js/ia-reports.js?container=.ia-report-viewer&auto=true"></script></div></div>