topic Re: Going from ArcGIS API for JS to WAB in Web AppBuilder Custom Widgets Questions

Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 11 Jan 2018 16:38:27 GMT

Hey guys, I was wondering if there is any documentation available (if it is even possible) about converting a webmap from the javascript api into a widget/webmap on the web app builder.

As an example I am attempting to create an application where the user can edit features without a popup of any sort appearing. I understand that there is a code sample that does exactly that and i have linked it below. But I am using agol and do not host anything on my own servers, so i need this functionality in the form of a widget.

Linked js example : Edit without editor widget | ArcGIS API for JavaScript 3.23

Re: Going from ArcGIS API for JS to WAB

Juan_ManuelAngel — Thu, 11 Jan 2018 16:56:07 GMT

Try To search in this SDK Get started—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers and in my opinion just delete all the creation of the web map in the widget and use the expretion "this.map", look this example from Route Example:

define([
'dojo/_base/declare',
'jimu/BaseWidget',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js',
"dojo/dom",
"dojo/_base/array",
"esri/urlUtils",
"esri/map",
"esri/graphic",
"esri/tasks/RouteTask",
"esri/tasks/RouteParameters",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
],
function(declare, BaseWidget, $,dom,array,urlUtils, Map, Graphic, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// DemoWidget code goes here

//please note that this property is be set by the framework when widget is loaded.
//templateString: template,

baseClass: 'jimu-widget-demo',

postCreate: function() {
this.inherited(arguments);
console.log('postCreate');
},

startup: function() {
this.inherited(arguments);
console.log('startup');
//VARIABLES !!
var mapc,routeTask, routeParams,route;
var stopSymbol, routeSymbol, lastStop;
var map = this.map;
var mapc = this.map;

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 11 Jan 2018 17:06:54 GMT

So in the widget just have actions and any reference I make to the map or layers of the map can be done using "this.map", and using my above example I should just start from the "function initEditing(evt) {" line and work my way down from there.

Re: Going from ArcGIS API for JS to WAB

Juan_ManuelAngel — Thu, 11 Jan 2018 18:48:33 GMT

yeah thats right, and in the event call the map and try to define the modules from the basewidget.

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Wed, 17 Jan 2018 14:59:26 GMT

after copying the code from This Code sample and attempting to convert the code to Web App builder my widget refuses to load. I get a pop-up that says " Create widget error" and in the console i am getting "Error: uniqName_8 template:config.configText"

I also do not see how I can add the html to widget.js. I have attached my widget.js code below:

define(['dojo/_base/declare',
'jimu/BaseWidget',"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"],

function(declare, BaseWidget, map, draw, edit, graphic, config,FeatureLayer, SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,
TemplatePicker,array,lang,parser,registry,BorderContainer,ContentPane,Button,domReady) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// DemoWidget code goes here

//please note that this property is be set by the framework when widget is loaded.
//templateString: template,

baseClass: 'jimu-widget-ROP',

postCreate: function() {
this.inherited(arguments);
console.log('postCreate');
},

startup: function() {
this.inherited(arguments);
this.mapIdNode.innerHTML = 'map id:' + this.map.id;
require(["jimu/LayerNode"], function(LayerNode) { /* code goes here */ });
var map = this.map;
console.log('startup');

},
_initEditing: function(evt){
console.log("InitEditing",evt);
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(this.map);
editToolbar.on("deactivate", function(evt){
currentLayer.applyEdits(null,[evt.graphic], null);
});
arrayUtils.forEach(layers,function(layer){
var editingEnabled = false;
layer.on("dbl-click",function(evt){
event.stop(evt);
if (editingEnabled == false){
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
}
else{
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
});

var templatePicker = new TemplatePicker({
FeatureLayer: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
templatePicker.startup();
var drawtoolbar = new Draw(this.map);

var selectedTemplate;
templatePicker.on ("Selection-Change", function(){
if (templatePicker.getSelected()){
selectedTemplate = templatePicker.getSelected();
}
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(Draw.POLYGON);
break;
}
});
drawToolbar.on("draw-end", function(evt){
drawToolbar.deactivate();
editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template
.prototype.attributes);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic],null,null);

});
}
});

});

Re: Going from ArcGIS API for JS to WAB

KenBuja — Wed, 17 Jan 2018 15:35:43 GMT

The first thing to make sure the modules you're calling in "define" are in the same order as the arguments you're assigning them in "function". They are all messed up in your code.

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Wed, 17 Jan 2018 15:42:50 GMT

Well that's embarrassing, I went ahead and changed it and am still getting the same error message after refreshing the page.

Re: Going from ArcGIS API for JS to WAB

Juan_ManuelAngel — Thu, 18 Jan 2018 15:05:19 GMT

Can you explain what widget do you want to create ?

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 18 Jan 2018 15:10:55 GMT

For now I just want to re-create this sample (but using my layer) so i can learn how to properly develop in WAB. I have fixed the errors I mentioned above but am now getting a reference error. in the startup command." ReferenceError: initEditing is not defined" Ill post my code below.

function(declare, BaseWidget, map, draw, edit, graphic, esriConfig, FeatureLayer, SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,
TemplatePicker, arrayUtils, lang, parser, registry, BorderContainer, ContentPane, button, dom) {
parser.parse();
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// DemoWidget code goes here

//please note that this property is be set by the framework when widget is loaded.
//templateString: template,
baseClass: 'jimu-widget-ROP',

postCreate: function() {
this.inherited(arguments);
console.log('postCreate');
},

},
initEditing: function() {
console.log("initEditing",evt);
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(this.map);
editToolbar.on("deactivate", function(evt){
currentLayer.applyEdits(null,[evt.graphic], null);
});
arrayUtils.forEach(layers,function(layer){
var editingEnabled = false;
layer.on("dbl-click",function(evt){
event.stop(evt);
if (editingEnabled == false){
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
}
else{
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
});

});

Re: Going from ArcGIS API for JS to WAB

KenBuja — Thu, 18 Jan 2018 15:32:07 GMT

I'm seeing a typo here:

this.map.on("layers=add-result", initEditing);‍‍‍

that should be

this.map.on("layers-add-result", initEditing);‍‍‍‍

Also, this line won't work properly, since the events are case-sensitive

templatePicker.on ("Selection-Change", function(){‍‍

It would be helpful if you used Syntax Highlighting when posting code, since that would let us point to specific line numbers and make it easier to read

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 18 Jan 2018 15:40:19 GMT

I made those changes but the error message still shows up.

Re: Going from ArcGIS API for JS to WAB

Juan_ManuelAngel — Thu, 18 Jan 2018 16:39:14 GMT

Hi Ab i get this solution.

This is what you want ?

Firts You need to develope the Widget folder, its look like this, then you need to create your html and your java script code. i am going to attach the code of the widget, you know how to add the widget to the web app builder widget pool?

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 18 Jan 2018 16:43:41 GMT

Thank you very much, I will download and compare the code with my own code and see where I made my mistakes. I assume using my own layer (which is hosted on arcgis online) will not be too difficult.

Re: Going from ArcGIS API for JS to WAB

Juan_ManuelAngel — Thu, 18 Jan 2018 16:46:32 GMT

Yeah just use the Web Map in your web app builder and thewidget get the layers to delete the custom layers just delete this lines.

I hope this help to you.

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 18 Jan 2018 16:59:54 GMT

I think I see where my problem is, i defined my functions outside of the startup method whereas you placed everything inside of the startup method. But i tried defining the function as _initEditing and without the underscore (which i believe is what would make into a global function) and I still get the same error. Do you think it is not as simple as that?

Re: Going from ArcGIS API for JS to WAB

AbhinavSharma — Thu, 18 Jan 2018 17:38:22 GMT

I just realized that the widget will only populate the layers that you add to it in the .js file. I thought that if this.map is called it retrieves all the information on the map including the layers.