topic Re: Is there any method to change report class api? in ArcGIS JavaScript Maps SDK Questions

Is there any method to change report class api?

LeiZhou1 — Sun, 12 Dec 2021 07:22:06 GMT

ESRI released its new report widget using report class, I am trying to let the report widget print my query result, which is sent from another query widget.

The data is sent from another widget uisng publishData function as an object, it is census data such as census tracts. The sending object has been tested: it is an array object containing 23 row records and each one has 57 fields as columns, e.g., 23 census tracts and each one contains fields like ID, Name, Area, Population ...

My codes inserting to the report widget is like the following, the colItem and rowItem are defined at the beginning of the report widget as colItem:null, rowItem:null,
queryResult is defined in publishData() in another widget to pass the query result as

this.publishData({
'target': 'Report',
'queryResult': this.results
});

My question is how to make the queryResult to display in Report widget in a good format? At least displaying as a table with fields as columns and census tracts as row records. Thanks a lot!

onReceiveData: function(name, widgetId, data, historyData) {
    
       if(widgetId === 'widgets_test_36') {
        console.log("Report widget got the message");  
        
       var resultItems = [];
       var resultCount = data.queryResult.length; 
       for (var i =0; i<data.queryResult.length; i++) {
            var featureAttributes = data.queryResult[i].attributes; //each row record 
           //The next is to handle fields of each record and push them into resultItems
            for (var attr in featureAttributes){ 
                 resultItems.push(featureAttributes[attr]);
            }
            this.rowItem = resultItems;
            console.info(this.rowItem);
        }   
     }
    }
    
    _onBtnPrintClicked: function(){
          var printData = [
          {
            addPageBreak: true,
            type: "map",
            map: this.map
          },
        
        {
            title: "Testing Report",
            addPageBreak: false,
            type: "table",
            tableCols: 4,
            data: {
               showRowIndex: true,
               cols: this.colItem,// I have no idea how to code this?
               rows: this.rowItem
            }
          }   
  ];
  
        this.report.print("Testing Report", printData);
      }, //_onBtnPrintClicked funciton ends ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Is there any method to change report class api?

SumitZ — Sun, 12 Dec 2021 07:22:09 GMT

Lei Zhao‌

The cols should be your fields name/alias and rows should the values for each field in a feature.

For e.g:

//Cols should be an array of strings which will be used to show table column title

cols: ["Name", "Address", "Lat/Lon"],

//Rows should be an array of array (strings) which will be used to show values in each row

rows: [

["Brookside Park", "1630 Brookside Avenue, Redlands, CA 92373", "34.045347, -117.209909"],
["Crafton Park", "Wabash Ave & Independence Ave, Redlands, CA 92374", "34.060946, -117.140118"],
["Ford Park", "Parkford Dr & Redlands Blvd, Redlands, CA 92374", "34.043828, -117.160692"],
["Prospect Park", "352 Prospect Dr., Redlands, CA 92373", "34.039145, -117.172582"],
["Sylvan Park", "601 N University St, Redlands, CA 92374", "34.059977, -117.168179"]

]

So in this example we have three columns - "Name", "Address", "Lat/Lon" and 5 rows each row is array for values in each col.

For more details please see this link

I Have updated the onReceiveData method to populate the this.rowItem and this.colItem in your case.

onReceiveData: function(name, widgetId, data, historyData) {
    
       if(widgetId === 'widgets_test_36') {
        console.log("Report widget got the message");  
        
       this.rowItem = [];
       this.colItem = [];
       var resultCount = data.queryResult.length; 
       for (var i =0; i<data.queryResult.length; i++) {
            var resultItems = [];
            var featureAttributes = data.queryResult[i].attributes; //each row record 
           //The next is to handle fields of each record and push them into resultItems
            for (var attr in featureAttributes){ 
               //Show Column titles as Field name
               if(this.colItem.length === 0){
                  this.colItem.push(attr);
               }
               //Show Values in rows
               resultItems.push(featureAttributes[attr]);
            }
            //Add each row in rowItem
            this.rowItem.push(resultItems);
            console.info(this.rowItem);
        }
   }
}

Re: Is there any method to change report class api?

LeiZhou1 — Mon, 14 Aug 2017 17:15:14 GMT

Thanks a lot! I researched the link and run the codes, the current report is like the picture attached below. The code for is as the following:

{
title: "Testing Report",
addPageBreak: false,
type: "table",
tableCols: 10,
data: {
showRowIndex: true,
cols:this.colItem,
rows:this.rowItem//this.rowItem
}
},

My question is that: after changing the tableCols to 10, why there are still 3 columns in the report? When there are many fields, can I make them display in one row instead of 3 columns for each row? This post helps me a lot! Thank you very much!

Re: Is there any method to change report class api?

Ayed — Tue, 12 Feb 2019 10:16:26 GMT

Hey all

I know it's been a long time since this question was posted, but In case someone is using this class and looking for such an answer, this is how I figured it out:

You need to change the maximum number of columns in the formatting code of this report which can be found in jimu.js/dijit/Report.js, then go to line 72 to change the value of (maxNoOfCols: 3) variable to whatever you want.

Ayed