topic Re: Create a Custom Layer Selector in ExB Developer Edition. Calcite or Other Approach? in ArcGIS Experience Builder Questions

Create a Custom Layer Selector in ExB Developer Edition. Calcite or Other Approach?

GregReinecke — Sun, 18 Aug 2024 21:52:06 GMT

I'm trying to create a custom layer widget which would be open and look something like this:

I created the above example using the calcite component example provided in the resources folder and then put it in my > client > your-extensions > widgets folder. I modified the widget.tsx code to reflect my target layers. I just don't know where or with what code to add the layers URL/feature layer info that would correspond to each checkbox.

import { React, type AllWidgetProps } from 'jimu-core' import { type IMConfig } from '../config' /** * Use this way, the @esri/calcite-components-react code will be compiled into widget entry, which makes widget size large. * `import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react'` * So, we should use the below way. */ import { CalciteButton, CalciteIcon, CalciteSlider } from 'calcite-components' const Widget = (props: AllWidgetProps<IMConfig>) => { const text = props.config.text const [sliderValue, setSliderValue] = React.useState(50) return ( <div className="widget-calcite jimu-widget m-2"> <div className="App"> <h5> Ancillary Layer Selector</h5> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Parks </calcite-label> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Transit Stops </calcite-label> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Grocery Stores </calcite-label> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Libraries </calcite-label> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Unfavorable POIs </calcite-label> <CalciteIcon icon/> </div> </div> ) } export default Widget

Any advice or a different approach would be helpful. Thanks in advance.

GRMapper

Re: Create a Custom Layer Selector in ExB Developer Edition. Calcite or Other Approach?

TimWestern — Wed, 21 Aug 2024 15:26:55 GMT

There are a couple of ways to approach this:

You may need to create a settings.tsx file and have named sources to setup for each layer.
You have the option of hard coding them, but I usually prefer to avoid that, because if the experience is ever shifted to another domain, then if those services move, you have to update and republish the custom widget. Using a settings screen in the dashboard editor allows you to reassign them more dynamically, and not be slaved to a programing GIS developer's availability to make those changes.

Note: I see you are using the more HTML version of Calcite, rather than the react calcite component versions. I believe those can still work, but that also may play a role in the ultimate look of this one.

Once you have a way to add all the layers you want to control. (And in theory you could have a text box for the name of each one to capture and associate with each one you add so you can add layers easily too), you would then need a way based on the index of the check box buttons, to decide which layers you are hiding/making visible.

Now once you know the index, and how it maps in code to the data source, then you may be able to toggle visibility I believe. (I don't have a good example of doing the visibility toggle in code handy though)

Re: Create a Custom Layer Selector in ExB Developer Edition. Calcite or Other Approach?

GregReinecke — Thu, 22 Aug 2024 10:41:48 GMT

Thanks Tim. I’m going to unpack your response and thanks for the kickstart. I’ll have a look at the react approach as well. Very helpful.