Select feature on map click instead of popup

[Leonidas]

Hi, 

This feels like it is a simple problem.  I would like to have the default state of the application to select features from a parcel layer without using the popup feature in the map widget and then show some information in a list/table widget.  I have disabled the pop-up in the Map widget.  The select process works if I use the Select tool in the map but I would prefer that the user does not have to click on the select tool first and would just be able to do this by default when the map loads initially.  

Here are some examples of apps I have found that do this:

https://maps.co.kendall.il.us/mapviewer/ @jcarlson 

https://experience.arcgis.com/experience/590b624f1a8c46e68821463e829b95c5 @AmyRoust 

https://experience.arcgis.com/experience/4476f767a9804c9d87eb2df2ef620661/page/Proposed-changes/ 

I am using Developer edition 1.15 and trying to do this with out of the box tools for now.  The parcel layer is in a webmap in Portal for ArcGIS.

Any help would be much appreciated.  

[Ke_Xu]

Hi Leonidas,

You could add a message action to the Map widget. 

Record selection changes -> Framework -> Filter data records, set Trigger and Action data.

Please refer to the sample app: https://experience.arcgis.com/builder/?id=101c4e2a26c349be805f7e11cc4dd65e&views=data

Thanks,

Ke

[Leonidas]

Hi Ke,

Thanks for sending this.  This is how I had my app set up. 

I played around with the webmap and how the layers were added and got it to work that way.  The layer was originally linked to by using a portal map with a few other layers in the map service.  The layer was burred in a layer group.  When I linked directly to the layer in the service by using its ID (in portal webmap), selection on map click worked.  Hopefully that makes sense.

My issue now is that I would like to not show the ! icon when nothing is selected in the List and just the 'Click on a Parcel' text.  Is there any way to do this?

[Marshal]

I was able to achieve this in ExB Dev 1.14 by making a copy of the List widget into "your-extensions\widgets" and then modifying renderEmptyElement function in widget.tsx.  More specifically, commenting out line 7 as in the example below will remove the icon.  In my example, I also hardcoded the no data message because I wanted more control over appearance.

Unfortunately, you will then have to replace the default List widget with your new custom widget in your app and reconfigure.  Also, remember to ensure the manifest.json reflects the custom widget folder name.

Hope it helps!

  renderEmptyElement = (showLoading: boolean) => {
    const isNoData = !this.records || this.records.length < 1
    const noDataMessage = this.props.config?.noDataMessage || this.formatMessage('noData')
    // const isShowClearActionButton = isNoData && this.isHasPublishMessageAction
    return (!showLoading && isNoData) && (
      <div className='empty-con text-center'>
        {/*<WarningOutlined size={16}/>  CUSTOMIZED TO REMOVE ICON}*/}
        {/*<div className="discribtion">{noDataMessage}</div>  CUSTOMIZED TO REMOVE TEXT.  CUSTOMIZED NO DATA MESSAGE BELOW*/}
        <div className="discribtion"><i>Select single features using pop-ups. <br/>Select multiple features using the Select tool.</i></div>
        {/* {isShowClearActionButton && <Button
          className="clear-message-action-button"
          size='sm'
          title={this.formatMessage('reset')}
          onClick={this.clearMessageAction}
        >
          {this.formatMessage('reset')}
        </Button>} */}
      </div>
    )
  }

[Leonidas]

Thanks Marshal,

This is a great idea.  Unfortunately it did not work for me.  I am using ExB15, but also tried the method on ExB14.  

I tried this and am getting an error when starting the client.  See below.  

I also tried editing the default List widget.tsx in the client\dist\widgets\common\list\src\runtime folder.  This did not work since it sounds like this folder is not used at runtime.  

https://community.esri.com/t5/arcgis-experience-builder-questions/modifying-default-widgets-in-arcgi... 

[Marshal · Accepted solution]

Sorry, I forgot I ran into this as well and here was my fix.  Disclaimer; I don't know all adverse affects these changes might have, but it did not cause any issues for our use case.

I commented out the LinkContainer import  from widget.tsx (line 87).

// import { LinkContainer } from 'jimu-ui/advanced/link-container'

Then also remove reference to LinkContainer in render() function (line 2937 - 2980).

        <div className='widget-list d-flex' onMouseMove={this.onListContainerMouseMove}>
          <LinkContainer  ****DELETE FROM HERE
            widgetId={id}
            appMode={appMode}
            linkParam={config.linkParam}
            queryObject={queryObject}
            useDataSources={useDataSources}
            changeIsCanClickLink={this.changeIsCanClickLink}
          >  ****DELETE TO HERE
            {this.isDsConfigured()
              ? (
                <DataSourceComponent
                  query={datasource ? query : null}
                  useDataSource={useDataSources && useDataSources[0]}
                  onDataSourceCreated={this.onDSCreated}
                  onCreateDataSourceFailed={this.onCreateDataSourceFailed}
                  widgetId={this.props.id}
                  queryCount
                  onDataSourceInfoChange={this.onDataSourceInfoChange}
                  onSelectionChange={this.onDsSelectionChange}
                >
                  {this.renderList}
                </DataSourceComponent>
                )
              : (
                  this.renderList()
                )}
            {(!this.isHasRenderList && !createDataSourceFailed) && (
              <div className='list-loading-con w-100 h-100'>
                <div className='jimu-secondary-loading'></div>
              </div>)}
            {
              createDataSourceFailed && <div className='list-error-con position-relative w-100 h-100'>
                {this.renderWidgetPlaceholder()}
                <Alert
                  className='position-absolute'
                  type='warning'
                  withIcon
                  text={this.formatMessage('dataSourceCreateError')}
                />
              </div>
            }
          </LinkContainer>  ****DELETE THIS LINE
        </div>

[Leonidas]

Thanks for responding.  After playing around with removing the code and adjusting what you sent before, I got it to work.  

I got some weird behavior at first when I commented some code out.  I didn't realize Typescript comments are slightly different from JavaScript.  

Thanks again for you help.  Accepted your response as a solution (although it was not for the original question)

[vijaybadugu]

I commented the code as mentioned above. After, drag and drop the custom list widget, I am getting "failed to load"