Report class—ArcGIS Web AppBuilder

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

ArcGIS Web AppBuilder

AMD Module Require

Constructor

Methods

Data objects

Note:

In this topic