Listen for record selection change

Question

Hi,

I'm looking for the best / easiest way to listen for record selection change.

I've got a widget that displays records, much the same as the built in List widget. I'm listening for an onclick event in the map to get selected records, and update my list with the clicked record. The problem, it seems that the onclick listens and responds before the framework has actually updated the datasource > selectedrecords. So the onclick triggers my code and grabs the previous selection.

I don't see a simple "watch > selection change" type event. (I'd happy to be wrong, should one exist).

Looking at the code for the actual List widget, it seems to handle this by:

* componentDidUpdate
* getSelectedRecords
* Compare selectedRecords to lastSelectedRecord
* If different, do something... and update lastSelectedRecord

This makes perfect sense, but the built in widget has to handle a lot of use cases and workflows as it's configurable for different scenarios. So, again, wondering if anyone has come across a simpler (yet, less robust) way of listening for the selected set change?

Anonymous User · Answer

Hi Sam,

I'm not sure I can describe the process I laid out above from the built in list widget. But you can check it out for yourself:  ExB##\client\dist\widgets\common\list\src\runtime\widget.tsx

My approach that isn't working as I'd like is as follows. Maybe it'll help for what you're doing. Note that in the selectedSite call below, I'm passing in r[0] (first facility) despite how many selected records may exist. This was a business decision - you may want to handle all selected records.

activeViewChangeHandler = (jmv: JimuMapView) => {

if (jmv) {
    const that = this;
     this.setState({
       jimuMapView: jmv
     }, () =>{
      // Setup the click handler
      this.state.jimuMapView.view.on("click", function(c){  
        if (that.state.datasource.getStatus() == "LOADED"){
          let r = that.state.datasource.getSelectedRecords()
          let oids = []         
          r.forEach( feat => oids.push(feat['feature']['attributes']['objectid']))          
          if (r.length > 0){        
            that.selectedSite([r[0].feature.attributes.objectid, r[0].feature.attributes.facility_name_location])   
          }  
        }
      })
     })
    }
 }

render(){
//....
       {this.props.hasOwnProperty("useMapWidgetIds") &&
           this.props.useMapWidgetIds &&
           this.props.useMapWidgetIds.length === 1 && 
            ( <JimuMapViewComponent
              useMapWidgetId={this.props.useMapWidgetIds[0]}
               onActiveViewChange={this.activeViewChangeHandler}                         
             />
       )}

SBerg_VHB · Answer

Hi @Anonymous User, can you describe how to access the widget's datasource in componentDidUpdate in order to getSelectedRecords?

Thanks,

Sam