Hiding widget based on data action

[SerjStol]

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

[SerjStol]

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

[SerjStol]

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?

[SerjStol · Accepted solution]

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.

[UbaidGul_opaz]

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.