topic Re: Trigger Edit from Feature Table with row-double click in Web AppBuilder Custom Widgets Questions

Trigger Edit from Feature Table with row-double click

helenchu — Wed, 24 Aug 2016 16:26:23 GMT

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

Re: Trigger Edit from Feature Table with row-double click

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:04:39 GMT

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

Re: Trigger Edit from Feature Table with row-double click

helenchu — Wed, 24 Aug 2016 20:07:55 GMT

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,

Re: Trigger Edit from Feature Table with row-double click

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:04:41 GMT

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‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Trigger Edit from Feature Table with row-double click

helenchu — Wed, 24 Aug 2016 20:42:38 GMT

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

Re: Trigger Edit from Feature Table with row-double click

RobertScheitlin__GISP — Wed, 24 Aug 2016 20:52:05 GMT

Helen,

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

Re: Trigger Edit from Feature Table with row-double click

helenchu — Thu, 25 Aug 2016 16:31:07 GMT

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.

Re: Trigger Edit from Feature Table with row-double click

RobertScheitlin__GISP — Thu, 25 Aug 2016 16:33:44 GMT

Helen,

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