Trigger Edit from Feature Table with row-double click

1968
7
Jump to solution
08-24-2016 09:26 AM
helenchu
Occasional Contributor II

By default, row-double click will zoom to feature with popup and go to Edit from that popup.  I would like to twist the codes for it to zoom and open edit template at 1 step.  I chased down to these lines (in FeatureTable.js) but I don't know how to call the Edit widget to in here.  Your help is greatly appreciated.

selectFeatures: function(method, result) {
if (result && result.length > 0) {
if (method === "rowclick" || method === "selectall") {
this._setSelection(result);
} else if (method === "zoom" || method === "row-dblclick") {
this._zoomToExtentByFeatures(result).then(lang.hitch(this, function(gExtent) {
if (method !== "row-dblclick" || !this.domNode) {
return;
}
this._showMapInfoWindowByFeatures(gExtent, result);
}), lang.hitch(this, function(err) {
if (err && err.message !== 'Request canceled') {
console.error(err);
}
}));
}
this.setSelectedNumber();
} else {
this._popupMessage(this.nls.dataNotAvailable);
}
},

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Helen,

   Sure here is the code for that:

Add the require for WidgetManager:

'jimu/WidgetManager'

And of course set the this.wManager var (line 7):

    postCreate: function() {
      this.inherited(arguments);
      this._relatedQueryIds = [];
      this.createToolbar();
      this.loading = new LoadingIndicator();
      this.loading.placeAt(this.domNode);
      this.wManager = WidgetManager.getInstance();

Then add the _getWidgetConfig helper function and the updated selectFeatures function.

    _getWidgetConfig: function(widgetName){
      var widgetCnfg = null;
      array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
        if(aWidget.name == widgetName) {
          widgetCnfg = aWidget;
          return true;
        }
        return false;
      });
      if(!widgetCnfg){
        /*Check OnScreen widgets if not found in widgetPool*/
        array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
          if(aWidget.name == widgetName) {
            widgetCnfg = aWidget;
            return true;
          }
          return false;
        });
      }
      return widgetCnfg;
    },

    selectFeatures: function(method, result) {
      if (result && result.length > 0) {
        if (method === "rowclick" || method === "selectall") {
          this._setSelection(result);
        } else if (method === "zoom" || method === "row-dblclick") {

          this._zoomToExtentByFeatures(result).then(lang.hitch(this, function(gExtent) {
            if (method !== "row-dblclick" || !this.domNode) {
              return;
            }
            //this._showMapInfoWindowByFeatures(gExtent, result);
            if (this.wManager) {
              var widgetCfg = this._getWidgetConfig('Edit');
              if(widgetCfg){
                this.wManager.triggerWidgetOpen(widgetCfg.id).then(lang.hitch(this, function(editWidget){
                  editWidget.disableWebMapPopup();
                  setTimeout(lang.hitch(this, function(){
                    var showEvent= {};
                    var featurePoint;
                    if(result[0].geometry.type === 'point') {
                      featurePoint = result[0].geometry;
                    } else {
                      featurePoint = result[0].geometry.getExtent().getCenter();
                    }
                    console.info(featurePoint);
                    showEvent.mapPoint = featurePoint;
                    showEvent.graphic = result[0];
                    editWidget.reClickMap(showEvent);
                  }), 500);
                }));
              }
            }
          }), lang.hitch(this, function(err) {
            if (err && err.message !== 'Request canceled') {
              console.error(err);
            }
          }));
        }
        this.setSelectedNumber();
      } else {
        this._popupMessage(this.nls.dataNotAvailable);
      }
    },

View solution in original post

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

Helen,

   Sure here is the code for that:

Add the require for WidgetManager:

'jimu/WidgetManager'

And of course set the this.wManager var (line 7):

    postCreate: function() {
      this.inherited(arguments);
      this._relatedQueryIds = [];
      this.createToolbar();
      this.loading = new LoadingIndicator();
      this.loading.placeAt(this.domNode);
      this.wManager = WidgetManager.getInstance();

Then add the _getWidgetConfig helper function and the updated selectFeatures function.

    _getWidgetConfig: function(widgetName){
      var widgetCnfg = null;
      array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
        if(aWidget.name == widgetName) {
          widgetCnfg = aWidget;
          return true;
        }
        return false;
      });
      if(!widgetCnfg){
        /*Check OnScreen widgets if not found in widgetPool*/
        array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
          if(aWidget.name == widgetName) {
            widgetCnfg = aWidget;
            return true;
          }
          return false;
        });
      }
      return widgetCnfg;
    },

    selectFeatures: function(method, result) {
      if (result && result.length > 0) {
        if (method === "rowclick" || method === "selectall") {
          this._setSelection(result);
        } else if (method === "zoom" || method === "row-dblclick") {

          this._zoomToExtentByFeatures(result).then(lang.hitch(this, function(gExtent) {
            if (method !== "row-dblclick" || !this.domNode) {
              return;
            }
            //this._showMapInfoWindowByFeatures(gExtent, result);
            if (this.wManager) {
              var widgetCfg = this._getWidgetConfig('Edit');
              if(widgetCfg){
                this.wManager.triggerWidgetOpen(widgetCfg.id).then(lang.hitch(this, function(editWidget){
                  editWidget.disableWebMapPopup();
                  setTimeout(lang.hitch(this, function(){
                    var showEvent= {};
                    var featurePoint;
                    if(result[0].geometry.type === 'point') {
                      featurePoint = result[0].geometry;
                    } else {
                      featurePoint = result[0].geometry.getExtent().getCenter();
                    }
                    console.info(featurePoint);
                    showEvent.mapPoint = featurePoint;
                    showEvent.graphic = result[0];
                    editWidget.reClickMap(showEvent);
                  }), 500);
                }));
              }
            }
          }), lang.hitch(this, function(err) {
            if (err && err.message !== 'Request canceled') {
              console.error(err);
            }
          }));
        }
        this.setSelectedNumber();
      } else {
        this._popupMessage(this.nls.dataNotAvailable);
      }
    },
0 Kudos
helenchu
Occasional Contributor II

Robert,

Now the attribute table doesn't loaded at all.  Am I missing something ?  Attached is my _FeatureTable.js

If I understand you correctly, _FeatureTable.js is the only file I need to add your codes in ?

Thankyou,

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Helen,

   You can not add a require without a matching var in the function (line 56):

The abc’s of AMD | ArcGIS Blog 

'jimu/WidgetManager', //added Aug24,2016 (zoom to edit)
 '../utils',
 'dojo/query'
], function(
 declare,
 html,
 _WidgetBase,
 Popup,
 Message,
 Filter,
 OnDemandGrid,
 Selection,
 ColumnHider,
 ColumnResizer,
 ColumnReorder,
 Menu,
 MenuItem,
 Toolbar,
 Button,
 DropDownMenu,
 ToggleButton,
 DropDownButton,
 Deferred,
 when,
 Evented,
 touch,
 Memory,
 esriConfig,
 esriLang,
 esriRequest,
 RelationParameters,
 RelationshipQuery,
 // GraphicsLayer,
 FeatureLayer,
 QueryTask,
 Query,
 ProjectParameters,
 Graphic,
 Point,
 Multipoint,
 Polyline,
 Polygon,
 SimpleLineSymbol,
 SimpleFillSymbol,
 Color,
 normalizeUtils,
 lang,
 on,
 aspect,
 array,
 LoadingIndicator,
 FieldStatistics,
 SelectionManager,
 CSVUtils,
 jimuUtils,
 WidgetManager,
 tableUtils,
 query‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
helenchu
Occasional Contributor II

It still doesn't work.  Sorry, in Chrome debugger, I couldn't see _FeatureTable.js file so I couldn't track down what went wrong.  Thanks.

'jimu/dijit/FieldStatistics',
'jimu/SelectionManager',
'jimu/WidgetManager', //added Aug24,2016 (zoom to edit)
'jimu/CSVUtils',
'jimu/utils',
'../utils',
'dojo/query'
], function(
declare,
html,
_WidgetBase,
Popup,
Message,
Filter,
OnDemandGrid,
Selection,
ColumnHider,
ColumnResizer,
ColumnReorder,
Menu,
MenuItem,
Toolbar,
Button,
DropDownMenu,
ToggleButton,
DropDownButton,
Deferred,
when,
Evented,
touch,
Memory,
esriConfig,
esriLang,
esriRequest,
RelationParameters,
RelationshipQuery,
// GraphicsLayer,
FeatureLayer,
QueryTask,
Query,
ProjectParameters,
Graphic,
Point,
Multipoint,
Polyline,
Polygon,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
normalizeUtils,
lang,
on,
aspect,
array,
LoadingIndicator,
FieldStatistics,
SelectionManager,
WidgetManager, //added Aug24,2016
CSVUtils,
jimuUtils,
tableUtils,
query

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Helen,

   I do not see anything else wrong and it is working fine on my end.

0 Kudos
helenchu
Occasional Contributor II

I finally got it worked.  What happened was I got extra lines of code.

My next question is probably too much to ask but it's very crucial for me.  Users might not want to use my app at all if I can't make it happened.  I have stacked feature points. Double click from attribute table won't populate the right record.  It shows the first record of that feature point first.  It's very confusing.  The chance they edit on the wrong record is very likely. Could you please help me to fix it ?  Should I post this question as new post ?  Thanks.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Helen,

   Once your original question has been answered you should always start a new one if you have a different question.