topic Re: JimuLayerViewSelector multi selection doesnt work as expected in ArcGIS Experience Builder Questions

JimuLayerViewSelector multi selection doesnt work as expected

IkelosDev — Mon, 28 Oct 2024 14:14:34 GMT

Using ExB DE v.1.15.0

I'm currently working on a custom widget that needs to select multiple layers and get their IDs in a string array. The JimuLayerViewSelector component seemed like a suitable choice because it allowed selecting multiple layers with its isMultiSelection attribute

But, when I use the onChange callback, I noticed that it only gives me the ID of the last selected layer , and is completely empty if something is de-selected, regardless of if there are other selected layers .

This is okay for single selections, but for multi-selection, I expected to get all selected layer IDs in the array. I dont want to have to manually implement this behaviour from scratch if i dont have to.

This is my code currently:

import { JimuMapView, JimuMapViewComponent } from "jimu-arcgis"; import { React, type AllWidgetProps, } from "jimu-core" import { Loading } from "jimu-ui" import { JimuLayerViewSelector } from 'jimu-ui/advanced/setting-components'; import { useState } from "react"; const Widget = (props: AllWidgetProps<any>) => { const [jimuMapViewId, setJimuMapViewId] = useState<string>() const [selectedMapLayers, setSelectedMapLayers] = useState<string[]>() const activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { setJimuMapViewId(jmv.id) } } const onMapLayerSelected = (selectedLayerViewIds: string[]) => { //selectedLayerViewIds only contains the last selection, or empty if you //de-selected a layer console.log(selectedLayerViewIds); setSelectedMapLayers(selectedLayerViewIds) } return ( <div className="jimu-widget"> {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} /> )} {jimuMapViewId ? ( <JimuLayerViewSelector jimuMapViewId={jimuMapViewId} isMultiSelection={true} onChange={onMapLayerSelected} /> ) : (<Loading />)} </div> ) } export default Widget

Re: JimuLayerViewSelector multi selection doesnt work as expected

JeffreyThompson2 — Mon, 28 Oct 2024 15:30:38 GMT

https://react.dev/learn/updating-arrays-in-state

The way you have written this, you are replacing the array every time with a new array containing a single item. You will need to re-write your function so that you are adding new items using the spread operator and removing them with the filter method. This page from the React docs should help clarify what is going on and how to fix it.

Re: JimuLayerViewSelector multi selection doesnt work as expected

IkelosDev — Mon, 28 Oct 2024 15:43:57 GMT

I thought about that and i did do it that way initially

But doing it like that only tells me if a layer has been selected at some point , but i need to be able to toggle the selections.

Deselecting a layer calls the onChange callback with an empty array, not specifying which layer has been deselected, which as i said works fine with the single selection mode , but not with the multiple one

Re: JimuLayerViewSelector multi selection doesnt work as expected

WenpingWang — Fri, 08 Nov 2024 08:37:50 GMT

Hi @IkelosDev

Have you set the props `selectedValues`?

When you get values from `onChange`, you need pass it to `selectedValues`.

Re: JimuLayerViewSelector multi selection doesnt work as expected

IkelosDev — Fri, 08 Nov 2024 08:48:46 GMT

selectedValues isnt a prop for this component, It has defaultSelectedValues, but that only gets set on first render and then never again

Re: JimuLayerViewSelector multi selection doesnt work as expected

JeffreyThompson2 — Fri, 08 Nov 2024 14:27:22 GMT

You could check the selected value against the items already in the array. Something like this.

const [selectedViews, setSelectedViews] = useState([]) const handleSelection = (selected) => { const found = selectedViews.includes(selected) if (found) { // remove view setSelectedViews(selectedViews.filter(s => s !== selected)) } else { // add view setSelectedViews([...selectedViews, selected]) }

https://www.w3schools.com/jsref/jsref_includes_array.asp

Re: JimuLayerViewSelector multi selection doesnt work as expected

IkelosDev — Fri, 08 Nov 2024 14:42:01 GMT

Again, that wont work because the onChange callback passes in an empty array if anything is deselected.

this :

const found = selectedViews.includes(selected)

will always return false

Cant check if its already in my selected array because it doesnt return anything. Its impossible to know , with this component, when a layer is deselected, or at least i havent found a way.

I ended up just recreating the component myself from scratch without using anything from jimu-ui and handling the selection the way i need it.