topic Re: Hardcoding FeatureLayer in WAB App widget in Web AppBuilder Custom Widgets Questions

Hardcoding FeatureLayer in WAB App widget

RobertMueller_Jr1 — Mon, 14 Mar 2016 00:07:36 GMT

Is there any way to hard code a feature layer within the widget.js file? I want to write to it (behind the scenes) without the user knowing via applyedits within the ESRI JS API. I'm having troubles moving from the raw ESRI JS file into ESRI WAB.

Thanks

Re: Hardcoding FeatureLayer in WAB App widget

RobertScheitlin__GISP — Mon, 14 Mar 2016 00:13:00 GMT

Robert,

Sure you can. A custom widgets js file is nothing more than JS code essentially so is there something specific you are struggling with that is different from how you would do this in a regular JS file?

Re: Hardcoding FeatureLayer in WAB App widget

RobertMueller_Jr1 — Mon, 14 Mar 2016 00:31:10 GMT

Ok - just wanted to make sure. I'm still working out the FeatureLayer "applyEdits" methods to the raw "Add Shapefile" code with works as I want in the raw JS but doesn't want to work in WAB Add Shapefile. The error on the line in the arrayUtils says the firePerimeterFL is not defined.

I was trying to add this the Featurelayer call into the Startup function:

var firePerimeterFL = new esri.layers.FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2", {

mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,

outFields: ["*"],

id: "firePerimeterFL"

});

And an additional 1 line (see bold below) within this arrayUtils;

arrayUtils.forEach(featureCollection.layers, function (layer) {

var infoTemplate = new InfoTemplate("Details", "${*}");

var featureLayer = new FeatureLayer(layer, {

infoTemplate: infoTemplate

});

//associate the feature with the popup on click to enable highlight and zoom to

featureLayer.on('click', function (event) {

map.infoWindow.setFeatures([event.graphic]);

firePerimeterFL.applyEdits([event.graphic], null, null);
});

//change default symbol if desired. Comment this out and the layer will draw with the default symbology

changeRenderer(featureLayer);

fullExtent = fullExtent ?

fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;

layers.push(featureLayer);

});

map.addLayers(layers);

map.setExtent(fullExtent.expand(1.25), true);

dom.byId('upload-status').innerHTML = "";

}

Re: Hardcoding FeatureLayer in WAB App widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:54:29 GMT

Robert,

OK something to note:

1. Quit using Legacy style programming. When you use "esri.layers.FeatureLayer" this is legacy style and not AMD style with is the only style you should be using now a days. In AMD you would only use "FeatureLayer"

2. If you want to do something with a html element in the widgets html template file you us the data-dojo-attach-point and not an id of the element (actually you do not even add an id property to any html elements in your html template file). The data-dojo-attach-point acts sort of like an id but to reference the html element in the widgets js file you just use this dot then the string you put in the elements data-dojo-attach-point property.

3. The next thing you need to get use to is scope when working with widgets. I would bet that when you get to your "firePerimeterFL.applyEdits([event.graphic], null, null);" portion of your code the console is showing an error of applyEdits is not a function of null. to fix this you need to add lang.hitch to bring your functions into scope.

        arrayUtils.forEach(featureCollection.layers, lang.hitch(this, function (layer) {
          var infoTemplate = new InfoTemplate("Details", "${*}");
          var featureLayer = new FeatureLayer(layer, {
            infoTemplate: infoTemplate
          });
          //associate the feature with the popup on click to enable highlight and zoom to
          featureLayer.on('click', lang.hitch(this, function (event) {
             this.map.infoWindow.setFeatures([event.graphic]);
             firePerimeterFL.applyEdits([event.graphic], null, null);
          }));
          //change default symbol if desired. Comment this out and the layer will draw with the default symbology
          changeRenderer(featureLayer);
          fullExtent = fullExtent ?
            fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;
          layers.push(featureLayer);
        }));
        this.map.addLayers(layers);
        this.map.setExtent(fullExtent.expand(1.25), true);

        this.uploadStatus.innerHTML = ""

So technically there are some differences if you do not have any experience coding dojo templated dijits/widgets.

Re: Hardcoding FeatureLayer in WAB App widget

RobertMueller_Jr1 — Mon, 14 Mar 2016 14:28:42 GMT

Robert-

Thank you for your time on this, some very good point above. I would say I am a decent ESRI Javascript programmer, but I'm struggling with the WAB. You were right about the FeatureLayer apply edits throwing an error (undefined). I've been working through the code to try to get the rest of the Add Shapefile code modified for WAB.

Interestingly with your point number 1, the legacy FeatureLayer call was taken from an ESRI JS example (Reshape polygons | ArcGIS API for JavaScript )

-Bob

Re: Hardcoding FeatureLayer in WAB App widget

RobertScheitlin__GISP — Mon, 14 Mar 2016 14:34:29 GMT

Bob,

Must be one of the few samples that they have not gotten updated to AMD style.