Well here is what I have so far. I was able to grab the sample Data Extract Widget and get it working, but this is a self contained website, which is very plain. Since I have very limited programming skills I have most likely taken this as far as I can.
I'm struggling with trying to get this code converted over to a usable widget... either in WAB or outside.
------------------
<!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>Data Download</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
.claro .dijitBorderContainer-child {
border: none;
}
.claro .dijitBorderContainer-dijitContentPane, .claro .dijitContentPane {
padding: 0;
}
.claro .dijitTitlePaneContentInner {
line-height: 1.4em;
}
#controls {
position:absolute;
top:1em;right:1em;
width:auto !important;
height:auto !important;
z-index:10;
}
#loading {
display: none;
vertical-align: middle;
}
.freehandIcon { background-image:url(./images/i_draw_freepoly.PNG); width:20px; height:20px; }
.polyIcon { background-image:url(./images/i_draw_poly.png); width:20px; height:20px;}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var gp, map;
require(["esri/map", "esri/dijit/HomeButton", "esri/dijit/Scalebar", "esri/config",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/toolbars/draw",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/Color",
"dojo/dom", "dojo/dom-style", "dojo/query", "dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/TitlePane", "dijit/form/CheckBox", "dijit/form/ComboBox",
"dojo/domReady!"], function(Map, HomeButton, Scalebar, esriConfig,
ArcGISDynamicMapServiceLayer,
Geoprocessor, FeatureSet, Draw,
SimpleFillSymbol, SimpleLineSymbol,
Graphic,
Color,
dom, domStyle, query, parser,
registry)
{
// Create all dijits.
parser.parse();
// Prevent flash of unstyled content(FOUC).
domStyle.set(query("body")[0], "visibility", "visible");
// Specify where the location of the proxy to use to communicate with the extract GP service.
esriConfig.defaults.io.proxyUrl = "/proxy/";
// Keep a reference to the loading icon DOM node.
var loading = dom.byId("loading");
map = new Map("map", {
basemap: "",
center: [-77.844, 41.834],
zoom: 10
});
home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
map.on("load", initSelectionToolbar);
var homelandSecurity = new ArcGISDynamicMapServiceLayer("http://..../arcgis/rest/services/sitename/MapServer");
map.addLayer(homelandSecurity);
gp = new Geoprocessor("http://.../arcgis/rest/services/.../GPServer/Extract%20Data%20Task");
gp.setOutSpatialReference({wkid:102100});
registry.byId("polygon").on("click", function() {
activateTool(this.id);
});
registry.byId("freehandpolygon").on("click", function() {
activateTool(this.id);
});
registry.byId("extract").on("click", extractData);
function initSelectionToolbar() {
map.graphics.clear();
selectionToolbar = new Draw(map);
selectionToolbar.on("draw-end", function(e) {
selectionToolbar.deactivate();
var symbol = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("dash", new Color([255,0,0]), 2),
new Color([255,255,0,0.25])
);
var graphic = new Graphic(e.geometry, symbol);
map.graphics.add(graphic);
});
}
function activateTool(tool) {
map.graphics.clear();
// The draw.activate expects a string like "polygon" or "freehand_polygon".
selectionToolbar.activate(tool);
}
function extractData(){
//get clip layers
var clipLayers = [];
if ( registry.byId("layer0").get("checked") ) { clipLayers.push("schools"); }
if ( registry.byId("layer1").get("checked") ) { clipLayers.push("villages"); }
if ( registry.byId("layer2").get("checked") ) { clipLayers.push("streams"); }
if ( registry.byId("layer3").get("checked") ) { clipLayers.push("streets"); }
if ( registry.byId("layer4").get("checked") ) { clipLayers.push("railway"); }
if ( registry.byId("layer5").get("checked") ) { clipLayers.push("driveways"); }
if ( registry.byId("layer6").get("checked") ) { clipLayers.push("utils"); }
if ( registry.byId("layer7").get("checked") ) { clipLayers.push("buildings"); }
if ( registry.byId("layer8").get("checked") ) { clipLayers.push("ipars"); }
if ( registry.byId("layer9").get("checked") ) { clipLayers.push("Parcels_Owner"); }
if ( registry.byId("layer10").get("checked") ) { clipLayers.push("WaterSA"); }
if ( registry.byId("layer11").get("checked") ) { clipLayers.push("Centre"); }
if ( clipLayers.length === 0 || map.graphics.graphics.length === 0 ) {
alert("Select layers to extract and draw an area of interest.");
return;
}
var featureSet = new FeatureSet();
var features = [];
features.push(map.graphics.graphics[0]);
featureSet.features = features;
var params = {
"Layers_to_Clip": clipLayers,
"Area_of_Interest": featureSet,
"Feature_Format": registry.byId("formatBox").get("value")
};
domStyle.set(loading, "display", "inline-block");
gp.submitJob(params, completeCallback , statusCallback, function(error){
alert(error);
domStyle.set(loading, "display", "none");
});
}
function completeCallback(jobInfo){
if ( jobInfo.jobStatus !== "esriJobFailed" ) {
gp.getResultData(jobInfo.jobId, "Output_Zip_File", downloadFile);
}
}
function statusCallback(jobInfo) {
var status = jobInfo.jobStatus;
if ( status === "esriJobFailed" ) {
alert(status);
domStyle.set("loading", "display", "none");
}
else if (status === "esriJobSucceeded"){
domStyle.set("loading", "display", "none");
}
}
function downloadFile(outputFile){
map.graphics.clear();
var theurl = outputFile.value.url;
window.location = theurl;
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-prps="gutters:false"
style="width: 100%; height: 100%;margin:0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Extract Data'" id="controls">
1.Select area of interest
<br>
<button id="polygon"
data-dojo-type="dijit/form/Button"
data-dojo-props="iconClass:'polyIcon', showLabel:false">
Polygon
</button>
<button id="freehandpolygon"
data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass:'freehandIcon', showLabel:false">
Freehand
</button>
<br><br>
2.Select Layers to extract data from
<br>
<input id="layer0" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer0">Schools</label><br>
<input id="layer1" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer1">Villages</label><br>
<input id="layer2" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer2">Streams</label><br>
<input id="layer3" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer3">Streets</label><br>
<input id="layer4" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer4">Railway</label><br>
<input id="layer5" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer5">Driveways</label><br>
<input id="layer6" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer6">Utility Roads</label><br>
<input id="layer7" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer7">Buildings</label><br>
<input id="layer8" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer8">Unsold Lots</label><br>
<input id="layer9" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer9">Parcels</label><br>
<input id="layer10" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer10">Water Service Areas</label><br>
<input id="layer11" data-dojo-type="dijit/form/CheckBox" checked="checked" type="checkbox"/>
<label for="layer11">Municipal Lines</label>
<br><br>
3.Specify download format
<br>
<select data-dojo-type="dijit/form/ComboBox" id="formatBox">
<option>Shapefile - SHP - .shp</option>
<option>File Geodatabase - GDB - .gdb</option>
<option>Autodesk AutoCAD - DXF_R2007 - .dxf</option>
<option>Autodesk AutoCAD - DWG_R2007 - .dwg</option>
<option>Bentley Microstation Design (V8) - DGN_V8 - .dgn</option>
</select>
<br><br>
<button id="extract" data-dojo-type="dijit/form/Button">Extract Data</button>
<img id="loading" src="images/loading.gif">
</div>
</div>
</div>
</body>
</html>
