topic Re: Hiding widget based on data action in ArcGIS Experience Builder Questions

Hiding widget based on data action

SerjStol — Wed, 27 Apr 2022 09:17:16 GMT

Hello,

I am new to ExB and React. I am trying to create a warning widget that appears only when a specific data is in the extent of the Map widget/view.

I have figured that I can use Action Trigger in the Map widget to be set on Extent Change and this should apply a Filter on the data source that is accessible to all widgets.

But can I hide a widget from view when no features of the configured data source is in the extent? I see WidgetState only applies to a widget in the Widget Controller. But I don't want it to be in the controller, I just want a message popup and dissapear if no data is visible.

I have so far reverse engineered Text Widget to make my message but I cannot figure out how to hide/unhide it based on the data action.

Sorry if it sounds totally wrong, maybe I am not understanding it properly.

Regards,

Serj

Re: Hiding widget based on data action

SerjStol — Wed, 27 Apr 2022 16:25:39 GMT

Okay I think I figured out how to hide the widget component if variable dataInExtent is false and we are not in the builder environment, basically just return null so nothing gets rendered:

if (dataInExtent || isInBuilder) {

return (

<div

data-testid='text-widget'

css={style}

className={classNames('widget-text jimu-widget p-1')}

{createEditor && <RichEditor

className={classNames({ 'd-none': !editable })}

widgetId={id}

nowrap={!wrap}

onInitResizeHandler={onInitResizeHandler}

useDataSources={useDataSources}

enabled={!!isInlineEditing}

onCreate={onEditorCreate}

onDestory={onEditorDestory}

onChange={onEditorChange}

placeholder={placeholder}

preserveWhitespace

value={text}

/>}

<Displayer

className={classNames({ 'd-none': editable })}

value={text}

wrap={wrap}

placeholder={placeholder}

useDataSources={useDataSources}

widgetId={id}

repeatedDataSource={repeatedDataSource as RepeatedDataSource}

</div>

)

} else {

return null

}

However, this does not effect the Style settings of the widget. For example, if I want the background colour, this does not get hidden. I guess this is applied somewhere else and I'll need to implement my own background if I want, or just use an image.

dataInExtent = true OR inBuilder = true:

dataInExtent = false

Re: Hiding widget based on data action

SerjStol — Wed, 27 Apr 2022 16:23:17 GMT

Now need to figure out how to get the TotalCount of features in the Data Source? I think there is a property somewhere I saw in the API. Since Map widget applies a map extent trigger and filters the data, this should come across?

Re: Hiding widget based on data action

SerjStol — Thu, 05 May 2022 15:17:06 GMT

To follow up on this idea. I ended up adding JimuMapViewComponent and using watchUtils from 'esri/core/watchUtils' to monitor change in map extent via activeViewChangeHandler function and set mapExtent in useState react hook. I then created a useEffect() react hook that executes whenever the mapExtent useState hook state changes, with an async function inside to query the total count of features in the connected data source.

React.useEffect(() => {

if (useDataSources) {

console.log("Data in extent?: ", dataInExtent)

console.log("Current Features Count:", featureCount)

async function getQueryCountResult() {

let totalFeatures = 0

for (const connectedDataSource of useDataSources) {

const dataSourceId = connectedDataSource.dataSourceId

const dataSource = dataSourceId && DataSourceManager.getInstance().getDataSource(dataSourceId) as QueriableDataSource

console.log("Layer name: ", dataSource.layerDefinition.name)

const result = await dataSource.queryCount(getQuery());

//console.log(result)

totalFeatures = totalFeatures + result.count

console.log("Inside query async count:", result.count)

}

console.log("Total Features count: ", totalFeatures)

setFeatureCount(totalFeatures)

if (totalFeatures > 0) {

setDataInExtent(true)

} else {

setDataInExtent(false)

}

getQueryCountResult()

console.log("Outside count:", featureCount)

}

}, [mapExtent])

The dataInExtent state changes to true or false based on if the query count is greater than 0 or not. This will then dictate the widget to render or not.

For this to work Map Widget Action Triggers need to be configured to filter the data on Extent Change applied on the Framework. So in my custom Text/Message Widget I connect to the same data sources and thats why queryCount will return only the total count of features in the map extent.

Re: Hiding widget based on data action

UbaidGul_opaz — Wed, 06 Dec 2023 11:38:38 GMT

Dears,

I have different zones of areas and I have one custom widget which is made particularly for one specific zone I want my user to open my widget using a button but I want that button to be shown only when map extent is on that particular zone. Please suggest some solution.