Adapting ESRI ArcGIS API for JavaScript Feature Layer With Selection sample for use in Configurable Map Viewer (CMV)

Question

I am trying to build my first widget, for use in the Configurable Map Viewer (CMV), using code from ESRI's ArcGIS API for JavaScript feature layer with selection sample. I've been successful in configuring a template and css file so the select and clear buttons show up in the viewer as desired, but I am having trouble modifying the ESRI developer sample for use in the CMV. I've adapted enough of the sample to be able to draw a box on the map with the draw tool but nothing is selected. I'm not following enough of what's going on in some of the other widgets I've looked at to have any confidence that I've successfully adapted the code for PostCreate, initSelectToolbar or sumGasProduction (obviously I haven't). I'm wondering if anyone has tackled the ESRI sample and has any suggestion as to what PostCreate, initSelectToolbar and sumGasProduction should look like or have any suggested references for someone getting started?

Code:

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/tasks/query',
'dijit/form/Button',
'dojo/_base/lang',
'dojo/on',
'dojo/text!./Select/templates/Select.html',
'xstyle/css!./Select/css/Select.css'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, SelectTemplate, css) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    widgetsInTemplate: true,
    templateString: SelectTemplate,
    selectTools: null,
    postCreate: function () {
        this.selectTools = new Draw(this.map);
        this.selectTools.on('load', lang.hitch(this, 'initSelectToolbar'));
        this.fieldsSelectionSymbol =
            new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 2),
            new Color([255, 255, 0, 0.5]));

        var content = "<b>Status</b>: ${STATUS}" +
                        "<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
                        "<br><b>Total Acres</b>: ${APPROXACRE}" +
                        "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";

        var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);

        this.featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
        {
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: ["*"]
        });

        this.featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        this.featureLayer.setSelectionSymbol(this.fieldsSelectionSymbol);
        this.featureLayer.on("selection-complete", 'sumGasProduction');
        this.featureLayer.on("selection-clear", function () {
            document.getElementById('messages').innerHTML = "<i>No Selected Fields</i>";
        });

        this.map.addLayer(FeatureLayer);

    },

    select: function () {
        this.selectTools.activate(Draw.EXTENT);
    },
    clearSelection: function () {
        this.featureLayer.clearSelection();
    },


    initSelectToolbar: function (event) {
        //selectionToolbar = new Draw(event.map);
        this.selectQuery = new Query();

        on(this.selectTools, "DrawEnd", function (geometry) {
            this.selectTools.deactivate();
            this.selectQuery.geometry = geometry;
            this.featureLayer.selectFeatures(this.selectQuery,
            FeatureLayer.SELECTION_NEW);
        });
    },
    sumGasProduction: function (event) {
        this.productionSum = 0;
        //summarize the cumulative gas production to display
        arrayUtil.forEach(event.features, function (feature) {
            this.productionSum += feature.attributes.CUMM_GAS;
        });
        document.getElementById('messages').innerHTML = "<b>Selected Fields Production: " + productionSum + " mcf. </b>";
    }
});

});

Answer 1

The following configuration below seems to be working fine. I'd appreciate any issues being pointed out.

The configuration of the widget:

select: {
                include: true,
                id: 'select',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Select',
                title: 'Select',
                open: false,
                position: 10,
                options: {
                    map: true,
                    mapClickMode: true,
                    featureLayerURL: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1',
                    content: "<b>Status</b>: ${STATUS}" +
                            "<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
                            "<br><b>Total Acres</b>: ${APPROXACRE}" +
                            "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters",
                    title: '${FIELD_NAME}',
                    defExpress: "PROD_GAS='Yes'",
                    clearSelectMsg: 'No Selected Fields',
                    fieldToSum: 'CUMM_GAS',
                    selectSumMsgPrefix: 'Selected Fields Production:',
                    selectSumUnits: 'mcf'
                }
            },

The widget:

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/tasks/query',
'dijit/form/Button',
'dojo/_base/lang',
'dojo/on',
'dojo/_base/array',
'dojo/dom',
'dojo/text!./Select/templates/Select.html',
'xstyle/css!./Select/css/Select.css'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, arrayUtil, dom, SelectTemplate, css) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        widgetsInTemplate: true,
        templateString: SelectTemplate,
        selectTools: null,

        postCreate: function () {
            this.selectTools = new Draw(this.map);

            this.selectQuery = new Query();

            on(this.selectTools, "DrawEnd", lang.hitch(this, function (geometry) {
                this.selectTools.deactivate();
                this.selectQuery.geometry = geometry;
                this.featureLayer.selectFeatures(this.selectQuery,
                FeatureLayer.SELECTION_NEW);
            }));

            this.fieldsSelectionSymbol =
                new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0]), 2),
                new Color([255, 255, 0, 0.5]));


            var infoTemplate = new InfoTemplate(this.title, this.content);

            this.featureLayer = new FeatureLayer(this.featureLayerURL,
            {
                mode: FeatureLayer.MODE_ONDEMAND,
                infoTemplate: infoTemplate,
                outFields: ["*"]
            });

            this.featureLayer.setDefinitionExpression(this.defExpress);
            this.featureLayer.setSelectionSymbol(this.fieldsSelectionSymbol);
            this.featureLayer.on("selection-complete", lang.hitch(this, 'sumGasProduction'));
            var clearMsg = this.clearSelectMsg;
            this.featureLayer.on("selection-clear", function () {
                dom.byId('messages').innerHTML = "<i>" + clearMsg + "</i>";
            });

            this.map.addLayer(this.featureLayer);

        },

        select: function () {
            this.selectTools.activate(Draw.EXTENT);
        },
        clearSelection: function () {
            this.featureLayer.clearSelection();
        },


        sumGasProduction: function (event) {
                        var productionSum = 0;
                        var sumField = this.fieldToSum;

                        arrayUtil.forEach(event.features, function (feature) {
                            productionSum += feature.attributes[sumField];

                        });
                        dom.byId('messages').innerHTML = "<b>" + this.selectSumMsgPrefix + " " + productionSum + " " + this.selectSumUnits + ". </b>";
                    }
    });
});

Answer 2

To really answer you question: The references I think would be the most useful for you are the Dojo's tutorials and ESRI JSAPI Reference. Please look over ALL of Dojo's tutorials. If you don't understand something there, you'll need to brush up on JavaScript. From there, I think adapting ESRI samples to CMV would be much easier for you :)

Specifically about your code, couple of things I see right away are:

Draw doesn’t have a load event, so your listener here is just not doing anything:

this.selectTools.on('load', lang.hitch(this, 'initSelectToolbar'));

Secondly, your DrawEnd listener is probably not scoped right. You're using this inside there without rescoping. Try:

    on(this.selectTools, "draw-end", lang.hitch(this, function (geometry) {
        this.selectTools.deactivate();
        this.selectQuery.geometry = geometry;
        this.featureLayer.selectFeatures(this.selectQuery,
        FeatureLayer.SELECTION_NEW);
    }));

Better yet, I would really just move the content of initSelectToolbar into your postCreate and get rid of your load listener altogether.

As for debugger, I would use whatever you're comfortable with. If you were to create breakpoints on the initSelectToolbar method, you'd probably notice that it never gets called.

Hope these were the only issues!