Community
Select to view content in your preferred language

Using custom geoprocessing service "Table To Excel"

673
1
Jump to solution
07-26-2019 08:54 AM
Den-GIS
by
Regular Contributor
‎07-26-2019 08:54 AM

I'm trying to develop a web application using the custom geoprocessing service "Table to Excel". (The Geoprocessing Service is the actual tool published from ArcMap Toolbox.) The goal is to give the user the ability to export the attributes from the Feature Class Table to Excel (.xls / .xlsx not .csv). I have looked at different sources unfortunately not come next. Below is my code. I appreciate any help.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>FeatureTable Formatting</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.29/"></script>

  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/tasks/Geoprocessor",
      "esri/geometry/Extent",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/Color",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/number",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, Geoprocessor, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,
      domConstruct, dom, dojoNum, parser, ready, on,lang,
      registry, Button, ContentPane, BorderContainer, TextBox
    ) {

      parser.parse();

      ready(function(){

        var map = new Map("map",{
          basemap: "dark-gray",
          center: [-93.23, 36.65],
          zoom: 12
        });

        map.on("load", loadTable);

        function loadTable(){
        
        // Custom Geoprocessing Service from ArcMap Toolbox: "Table To Excel"
        
        var gpServiceUrl= "https://gis.bransonmo.gov/application/rest/services/GP_Services/TableToExcel_GP/GPServer/Table%20To%20Excel";

         var gp = new Geoprocessor(gpServiceUrl);
        
        
        
         var myFeatureLayer = new FeatureLayer("https://gis.bransonmo.gov/application/rest/services/AdoptAStreet/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            visible: true,
            id: "fLayer"
          });
 
          map.addLayer(myFeatureLayer);

          // create new FeatureTable and set its properties
          var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map,
            showAttachments: true,
            // only allows selection from the table to the map
            syncSelection: true,
            zoomToSelection: true,
            gridOptions: {
              allowSelectAll: true,
              allowTextSelection: true,
            },
            editable: true,
            dateOptions: {
              // set date options at the feature table level
              // all date fields will adhere this
              datePattern: "MMMM d, y"
            },
            // define order of available fields. If the fields are not listed in 'outFields'
            // then they will not be available when the table starts.
            outFields: ["ROADNM", "TYPE", "DIRECTION", "CLASSIFICA", 'MAINTAINED',
              "M_CITY", "M_STATE", "M_ZIP", "CONTACT", "PHONE"
            ],
            // use fieldInfos property to change field's label (column header),
            // the editability of the field, and to format how field values are displayed
            fieldInfos: [
              {
                name: 'CLASSIFICA',
                alias: 'CLASSIFICA',
                editable: false,
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'MAINTAINED',
                alias: 'MAINTAINED',
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'M_CITY',
                format: {
                  template: "${value} parking"
                }
              }
            ],
            
             //add custom menu functions to the 'Options' drop-down Menu
            menuFunctions: [
            //Add new Export to Excel menu function
            { label: "Export to Excel", callback: customExportToExcel }
          ]
          }, 'myTableNode');

          myFeatureTable.startup();

          // listen to show-attachments event
          myFeatureTable.on("show-attachments", function(evt){
            console.log("show-attachments event - ", evt);
          });
          
          function customExportToExcel (){
          
          //Code goes here.....
          
          }
          
        }
      });
    });
  </script>
</head>
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:65%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
      <div id="myTableNode"></div>
    </div>
  </div>
</body>
</html>

0 Kudos
1 Solution

Accepted Solutions
Den-GIS
by
Regular Contributor
‎07-29-2019 12:37 PM

if anyone is interested, that should work if the task is running!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>FeatureTable Formatting</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.29/"></script>

  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/tasks/Geoprocessor",
      "esri/geometry/Extent",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/Color",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/number",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, Geoprocessor, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,
      domConstruct, dom, dojoNum, parser, ready, on,lang,
      registry, Button, ContentPane, BorderContainer, TextBox
    ) {

      parser.parse();

      ready(function(){

        var map = new Map("map",{
          basemap: "dark-gray",
          center: [-93.23, 36.65],
          zoom: 12
        });

        map.on("load", loadTable);

        function loadTable(){
     

  // Custom Geoprocessing Service from ArcMap Toolbox: "Table To Excel"
        var gpServiceUrl= "https://gis.bransonmo.gov/application/rest/services/GP_Services/TableToExcel_GP/GPServer/Table%20To%20Excel";

         var gp = new Geoprocessor(gpServiceUrl);
       

  var myFeatureLayer = new FeatureLayer("https://gis.bransonmo.gov/application/rest/services/AdoptAStreet/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            visible: true,
            id: "fLayer"
          });
          map.addLayer(myFeatureLayer);

          // create new FeatureTable and set its properties
          var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map,
            showAttachments: true,
            // only allows selection from the table to the map
            syncSelection: true,
            zoomToSelection: true,
            gridOptions: {
              allowSelectAll: true,
              allowTextSelection: true,
            },
            editable: true,
            dateOptions: {
              // set date options at the feature table level
              // all date fields will adhere this
              datePattern: "MMMM d, y"
            },
            // define order of available fields. If the fields are not listed in 'outFields'
            // then they will not be available when the table starts.
            outFields: ["ROADNM", "TYPE", "DIRECTION", "CLASSIFICA", 'MAINTAINED',
              "M_CITY", "M_STATE", "M_ZIP", "CONTACT", "PHONE"
            ],
            // use fieldInfos property to change field's label (column header),
            // the editability of the field, and to format how field values are displayed
            fieldInfos: [
              {
                name: 'CLASSIFICA',
                alias: 'CLASSIFICA',
                editable: false,
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'MAINTAINED',
                alias: 'MAINTAINED',
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'M_CITY',
                format: {
                  template: "${value} parking"
                }
              }
            ],
            
             //add custom menu functions to the 'Options' drop-down Menu
            menuFunctions: [
            //Add new Export to Excel menu function
            { label: "Export to Excel", callback: customExportToExcel }
          ]
          }, 'myTableNode');
          myFeatureTable.startup();

          // listen to show-attachments event
          myFeatureTable.on("show-attachments", function(evt){
            console.log("show-attachments event - ", evt);
          });         
        }   
        function customExportToExcel(){
        var params = {
          Input_Table: "COB_LGIM.DBO.AdoptAStreetCenterline",
          Output_File: "Output File",
          Format: "XLS"          
        };
        gp.submitJob(params, completeCallback, statusCallback);
        }
        
        function statusCallback(jobInfo){
            console.log(jobInfo.jobId);
            console.log(jobInfo.jobStatus);
        }
        
        function completeCallback(jobInfo) {
            gp.getResultData(jobInfo.jobId, "Output_File", downloadFile);    
        }
        
        function downloadFile(outputFile) {  
            var theurl = outputFile.value.url;  
            dojo.byId('downURL').innerHTML = "<a href='"+ theurl + "'>Download File (Excel)</a>";  
        }    
      });
    });
  </script>
</head>
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:65%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
      <div id="myTableNode"></div>
       <div id="downURL"></div>
    </div>
  </div>
</body>
</html>

View solution in original post

0 Kudos
1 Reply
Den-GIS
by
Regular Contributor
‎07-29-2019 12:37 PM

if anyone is interested, that should work if the task is running!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>FeatureTable Formatting</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.29/"></script>

  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/tasks/Geoprocessor",
      "esri/geometry/Extent",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/Color",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/number",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, Geoprocessor, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,
      domConstruct, dom, dojoNum, parser, ready, on,lang,
      registry, Button, ContentPane, BorderContainer, TextBox
    ) {

      parser.parse();

      ready(function(){

        var map = new Map("map",{
          basemap: "dark-gray",
          center: [-93.23, 36.65],
          zoom: 12
        });

        map.on("load", loadTable);

        function loadTable(){
     

  // Custom Geoprocessing Service from ArcMap Toolbox: "Table To Excel"
        var gpServiceUrl= "https://gis.bransonmo.gov/application/rest/services/GP_Services/TableToExcel_GP/GPServer/Table%20To%20Excel";

         var gp = new Geoprocessor(gpServiceUrl);
       

  var myFeatureLayer = new FeatureLayer("https://gis.bransonmo.gov/application/rest/services/AdoptAStreet/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            visible: true,
            id: "fLayer"
          });
          map.addLayer(myFeatureLayer);

          // create new FeatureTable and set its properties
          var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map,
            showAttachments: true,
            // only allows selection from the table to the map
            syncSelection: true,
            zoomToSelection: true,
            gridOptions: {
              allowSelectAll: true,
              allowTextSelection: true,
            },
            editable: true,
            dateOptions: {
              // set date options at the feature table level
              // all date fields will adhere this
              datePattern: "MMMM d, y"
            },
            // define order of available fields. If the fields are not listed in 'outFields'
            // then they will not be available when the table starts.
            outFields: ["ROADNM", "TYPE", "DIRECTION", "CLASSIFICA", 'MAINTAINED',
              "M_CITY", "M_STATE", "M_ZIP", "CONTACT", "PHONE"
            ],
            // use fieldInfos property to change field's label (column header),
            // the editability of the field, and to format how field values are displayed
            fieldInfos: [
              {
                name: 'CLASSIFICA',
                alias: 'CLASSIFICA',
                editable: false,
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'MAINTAINED',
                alias: 'MAINTAINED',
                format: {
                  template: "${value} sqft"
                }
              },
              {
                name: 'M_CITY',
                format: {
                  template: "${value} parking"
                }
              }
            ],
            
             //add custom menu functions to the 'Options' drop-down Menu
            menuFunctions: [
            //Add new Export to Excel menu function
            { label: "Export to Excel", callback: customExportToExcel }
          ]
          }, 'myTableNode');
          myFeatureTable.startup();

          // listen to show-attachments event
          myFeatureTable.on("show-attachments", function(evt){
            console.log("show-attachments event - ", evt);
          });         
        }   
        function customExportToExcel(){
        var params = {
          Input_Table: "COB_LGIM.DBO.AdoptAStreetCenterline",
          Output_File: "Output File",
          Format: "XLS"          
        };
        gp.submitJob(params, completeCallback, statusCallback);
        }
        
        function statusCallback(jobInfo){
            console.log(jobInfo.jobId);
            console.log(jobInfo.jobStatus);
        }
        
        function completeCallback(jobInfo) {
            gp.getResultData(jobInfo.jobId, "Output_File", downloadFile);    
        }
        
        function downloadFile(outputFile) {  
            var theurl = outputFile.value.url;  
            dojo.byId('downURL').innerHTML = "<a href='"+ theurl + "'>Download File (Excel)</a>";  
        }    
      });
    });
  </script>
</head>
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:65%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
      <div id="myTableNode"></div>
       <div id="downURL"></div>
    </div>
  </div>
</body>
</html>

0 Kudos