Report class

The Report class allows you to print a file with a map, tables, and supporting elements.

AMD Module Require

require(["jimu/dijit/Report"], function(Report) { /* code goes here */ });

Constructor

new Report(params) Creates a new Report dijit. Parameters: <String> printTaskUrl—Required. URL of the print task. <String> reportLogo—Optional. URL of the logo image. The report logo placeholder is hidden unless a value is provided. <Object> reportLayout—Optional. Contains details for page size and orientation. The default is as follows: `{ "pageSize": PageUtils.PageSizes.A4, "orientation": PageUtils.Orientation.Portrait }` <Number> tableCols—Optional. Can be used to define a set number of table columns for the report. It is overridden by tableCols specified for individual print data objects. The default is 3. <Boolean> alignNumbersToRight—Optional. Supports RTL and LTR. The default is false. <Array> styleSheets—Optional. Collection of style sheets to override default report styling. Default values are defined in the provided HTML template at jimu/dijit/templates/ReportTemplate.html. <String> styleText—Optional. CSS style text to be applied to the report header. <String> footNotes—Optional. Values to add to the report footer. Example 1: Use the ArcGIS Online print task within the report to generate a printer-ready version of the map. require(['jimu/dijit/Report', 'jimu/dijit/PageUtils'], function(Report, PageUtils){ var report = new Report({ reportLogo: "http://myserver/images/CompanyLogo.png", footNotes: "Report Generated by My Department", printTaskUrl: "http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", reportLayout: { "pageSize": PageUtils.PageSizes.A4, "orientation": PageUtils.Orientation.Landscape }, styleSheets: ["http://myserver/css/reportDijitOverrides.css"] }); var data = []; data.push({ addPageBreak: true, type: "map", map: this.map } ... report.print("MyTitle", data); }); Example 2: Use a custom print task within the report to generate a printer-ready version of the map based on the defined ArcGIS PrintTemplate. require(['jimu/dijit/Report', 'jimu/dijit/PageUtils', 'esri/tasks/PrintTemplate'], function(Report, PageUtils, PrintTemplate){ var report = new Report({ reportLogo: "http://myserver/images/CompanyLogo.png", footNotes: "Report Generated by My Department", printTaskUrl: " http://myserver/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", reportLayout: { "pageSize": PageUtils.PageSizes.A4, "orientation": PageUtils.Orientation.Landscape }, styleSheets: ["http://myserver/css/reportDijitOverrides.css"] }); var printTemplate = new PrintTemplate(); printTemplate.layout = "Custom Template From My Print Service"; printTemplate.format = "PNG32"; var data = []; data.push({ addPageBreak: true, type: "map", map: this.map, printTemplate: printTemplate } ... report.print("MyTitle", data); });

new Report(params)

Creates a new Report dijit.

Parameters:

<String> printTaskUrl—Required. URL of the print task.

<String> reportLogo—Optional. URL of the logo image. The report logo placeholder is hidden unless a value is provided.

<Object> reportLayout—Optional. Contains details for page size and orientation. The default is as follows:

{
  "pageSize": PageUtils.PageSizes.A4,
  "orientation": PageUtils.Orientation.Portrait
}

<Number> tableCols—Optional. Can be used to define a set number of table columns for the report. It is overridden by tableCols specified for individual print data objects. The default is 3.

<Boolean> alignNumbersToRight—Optional. Supports RTL and LTR. The default is false.

<Array> styleSheets—Optional. Collection of style sheets to override default report styling. Default values are defined in the provided HTML template at jimu/dijit/templates/ReportTemplate.html.

<String> styleText—Optional. CSS style text to be applied to the report header.

<String> footNotes—Optional. Values to add to the report footer.

Example 1:

Use the ArcGIS Online print task within the report to generate a printer-ready version of the map.

require(['jimu/dijit/Report', 'jimu/dijit/PageUtils'], function(Report, PageUtils){
             var report = new Report({
            reportLogo: "http://myserver/images/CompanyLogo.png",
            footNotes: "Report Generated by My Department",
            printTaskUrl: "http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
            reportLayout: {
              "pageSize": PageUtils.PageSizes.A4,
              "orientation": PageUtils.Orientation.Landscape
            },
            styleSheets: ["http://myserver/css/reportDijitOverrides.css"]
          });
          
          var data = [];
          data.push({
            addPageBreak: true,
            type: "map",
            map: this.map
          }

          ...

          report.print("MyTitle", data);

    });

Example 2:

Use a custom print task within the report to generate a printer-ready version of the map based on the defined ArcGIS PrintTemplate.

require(['jimu/dijit/Report', 'jimu/dijit/PageUtils', 'esri/tasks/PrintTemplate'], function(Report, PageUtils, PrintTemplate){
          var report = new Report({
            reportLogo: "http://myserver/images/CompanyLogo.png",
            footNotes: "Report Generated by My Department",
            printTaskUrl: " http://myserver/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
            reportLayout: {
              "pageSize": PageUtils.PageSizes.A4,
              "orientation": PageUtils.Orientation.Landscape
            },
            styleSheets: ["http://myserver/css/reportDijitOverrides.css"]
          });

          var printTemplate = new PrintTemplate(); 
          printTemplate.layout = "Custom Template From My Print Service";
          printTemplate.format = "PNG32";
         
          var data = [];
          data.push({
            addPageBreak: true,
            type: "map",
            map: this.map,
            printTemplate: printTemplate
          }

          ...

          report.print("MyTitle", data);

    });

Methods


print (reportTitle, printData) Prints the provided data to an HTML page. The default HTML template is provided at jimu/dijit/templates/ReportTemplate.html. Parameters: <reportTitle> String—Optional. The value to be displayed as the report title. <printData> Array—Required. Array of data objects that will be printed to the map. Supported types are map, table, and html.

Data objects

MAP A map object provides a way for you print an ArcGIS JavaScript map object in the report. When using a custom print service, provide an ArcGIS PrintTemplate to the MAP object to define the appropriate layout options to be used in the report. `{ addPageBreak: Boolean, type: String, map: Object } { addPageBreak: true, type: "map", map: this.map }` TABLE A table object provides a way for you print rows and columns of data in the report. `{ title: String, addPageBreak: Boolean, type: String, tableCols: Number, data: { showRowIndex: Boolean, rows: Array, cols: Array } } { title: “Impact Area by State”, addPageBreak: false, type: "table", tableCols: 3, data: { showRowIndex: false, rows: [[“Colorado”, “14526”, “45”],[“California”, “32076”, “67”]], cols: [“Name”, “Area”, “Count”] } }` HTML An HTML object provides a way for you to add HTML elements to the report. `{ title: String type: String, data: String } { title: "Distribution of Impact by State", type: "html", data: '<img id="chartImage" style="width: 250px; height: 200px;" src="http://myserver/images/graphic.png">' }` NOTE A note object provides an editable text area that can be updated dynamically by the user in the report preview window prior to printing. `{ type: String, } { type: "note", }`

MAP

A map object provides a way for you print an ArcGIS JavaScript map object in the report. When using a custom print service, provide an ArcGIS PrintTemplate to the MAP object to define the appropriate layout options to be used in the report.

{
  addPageBreak: Boolean,
  type: String,
  map: Object
}
 
{
  addPageBreak: true,
  type: "map",
  map: this.map
}

TABLE

A table object provides a way for you print rows and columns of data in the report.

{
  title: String,
  addPageBreak: Boolean,
  type: String,
  tableCols: Number,
  data: {
    showRowIndex: Boolean,
    rows: Array,
    cols: Array
  }
}
 
 
{
  title: “Impact Area by State”,
  addPageBreak: false,
  type: "table",
  tableCols: 3,
  data: {
    showRowIndex: false,
    rows: [[“Colorado”, “14526”, “45”],[“California”, “32076”, “67”]],
    cols: [“Name”, “Area”, “Count”]
  }
}

HTML

An HTML object provides a way for you to add HTML elements to the report.

{
  title: String
  type: String,
  data: String
}
 
{
  title: "Distribution of Impact by State",
  type: "html",
  data: '<img id="chartImage" style="width: 250px; height: 200px;" src="http://myserver/images/graphic.png">'
}

NOTE

A note object provides an editable text area that can be updated dynamically by the user in the report preview window prior to printing.

{
  type: String,
}
 
{
  type: "note",
}

The following is the list of CSS class selectors that can be overridden to control aspects of report styling.

Note:

Defaults are provided with the HTML template at jimu/dijit/templates/ReportTemplate.html.

.esriCTSectionTitle

.esriCTReportMapImg

.esriCTTable

.esriCTTable th

.esriCTTable td

.esriCTDateContainer

.esriCTAOIInfoDiv

.esriAOITitle

.esriCTAOIArea

.esriCTHTMLData

.esriCTReportLogo

.esriCTPrintTitleDiv

.esriCTReportMain

.esriCTReportMap

.esriCTReportFooter

.esriCTReportHeader

We'd love to hear your feedback

Was this page helpful?

Thank you for helping us make ArcGIS Developers even better!