Going from ArcGIS API for JS to WAB

2693
15
Jump to solution
01-11-2018 08:38 AM
AbhinavSharma
New Contributor III

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 

Tags (1)
1 Solution

Accepted Solutions
Juan_ManuelAngel
Esri Contributor

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?

View solution in original post

0 Kudos
15 Replies
Juan_ManuelAngel
Esri Contributor

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;

AbhinavSharma
New Contributor III

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.

0 Kudos
Juan_ManuelAngel
Esri Contributor

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

0 Kudos
AbhinavSharma
New Contributor III

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);

});
}
});

});

0 Kudos
KenBuja
MVP Esteemed Contributor

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.

AbhinavSharma
New Contributor III

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

0 Kudos
Juan_ManuelAngel
Esri Contributor

Can you explain what widget do you want to create ?

0 Kudos
AbhinavSharma
New Contributor III

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.

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, 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');
},


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');
this.map.on("layers=add-result", initEditing);

},
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;
}
});
});

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);
});
}

});

});

0 Kudos
KenBuja
MVP Esteemed Contributor

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