A common requirement is to be able to get data from a URL query. Right now, there is no perfect solution to this problem in Online/Enterprise Editions. You can use this method, but it requires using two Experiences and doesn't allow for the Experience to work without a URL parameter. Better options should be coming to the Online version in Q1 2024. Until then, if you are on Developer Edition, you can use this starter widget to build your own solutions.
This widget uses the built-in URLSearchParams method to directly inspect and extract data from the URL. The code in the included zip package is intentionally incomplete as there is no way to practically code this for a generalized case, but it should get you halfway to a complete solution. Using a widget like this will allow you to extract URL parameters with a single Experience that will also work normally without any URL parameters. The final version of this widget should have all of it's visible output removed, be made as small as possible in the builder mode and tucked into an unused corner of your application.
My final widget was designed to extract a parcelId from the URL, find that parcel's centroid from a sublayer of a MapImageLayer, zoom to that location and send the centroid to a modified version of @RobertScheitlin__GISP Feature Panel widget. Here is what the final code for this widget looks like.
import { React, MutableStoreManager } from 'jimu-core'
import { MapViewManager, JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'
import reactiveUtils from 'esri/core/reactiveUtils'
const { useEffect, useState } = React
const Widget = (props) => {
const viewManager = MapViewManager.getInstance()
const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0])
const [jimuMapView, setJimuMapView] = useState<JimuMapView>(mapView)
const [mapReady, setMapReady] = useState(false)
const [parcel, setParcel] = useState(null)
useEffect(() => {
if (jimuMapView) {
reactiveUtils
.whenOnce(() => jimuMapView.view.ready)
.then(() => {
setMapReady(true)
const queryParameters = new URLSearchParams(window.location.search)
//This line looks for a query in the url parameters called ParcelId and stores it to state. (like mysite.com?ParcelId=123) Will do nothing if that query parameter does not exist.
const parcelId = queryParameters.get("ParcelId")
setParcel(parcelId)
}
)
}
}, [jimuMapView])
useEffect(() => {
//Function will only run when url parameter ParcelId changes.
//If check prevents errors on first load and if there is no url parameters.
if (parcel) {
//Do stuff. Handle processing for a parcel query.
const layer = jimuMapView.view.map.findLayerById("18a9a43aca0-layer-6")
const sublayer = layer.findSublayerById(17)
console.log(sublayer)
let query = sublayer.createQuery()
query.where = `TaxParcelId = ${parcel}`
query.returnCentroid = true
sublayer.queryFeatures(query).then((response) => {
const location = response.features[0].geometry.centroid
jimuMapView.view.goTo({
center: location,
zoom: 18
})
MutableStoreManager.getInstance().updateStateValue('widget_34', 'newSearch', location)
MutableStoreManager.getInstance().updateStateValue('widget_63', 'newSearch', location)
})
}
}, [parcel])
const activeViewChangeHandler = (jmv: JimuMapView) => {
if (jmv) {
setJimuMapView(jmv)
}
}
return (
<div className='jimu-widget'
{
...
props.useMapWidgetIds &&
props.useMapWidgetIds.length === 1 && (
<JimuMapViewComponent
useMapWidgetId={props.useMapWidgetIds?.[0]}
onActiveViewChange={activeViewChangeHandler}
/>
)
}
>
</div>
)
}
export default Widget
