topic Re: Select feature on map click instead of popup in ArcGIS Experience Builder Questions

Select feature on map click instead of popup

Leonidas — Thu, 22 Aug 2024 17:04:32 GMT

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.

Re: Select feature on map click instead of popup

Ke_Xu — Mon, 26 Aug 2024 12:32:46 GMT

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,

Re: Select feature on map click instead of popup

Leonidas — Mon, 26 Aug 2024 17:43:32 GMT

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?

Re: Select feature on map click instead of popup

Marshal — Tue, 27 Aug 2024 15:15:51 GMT

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

Re: Select feature on map click instead of popup

Leonidas — Thu, 29 Aug 2024 14:48:59 GMT

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-arcgis-experience/m-p/1311970#M7718

Re: Select feature on map click instead of popup

Marshal — Fri, 30 Aug 2024 12:22:38 GMT

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>

Re: Select feature on map click instead of popup

Leonidas — Fri, 30 Aug 2024 20:17:58 GMT

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)

Re: Select feature on map click instead of popup

vijaybadugu — Mon, 23 Sep 2024 15:04:01 GMT

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