topic Re: Access bespoke Widget click events in ArcGIS Experience Builder Questions

Access bespoke Widget click events

diplonics — Fri, 24 Nov 2023 16:35:32 GMT

I have a bespoke widget that adds a GeoJson layer to a mapview.

When the map is clicked and features from the GeoJson layer are identified they are loaded back into the widget UI as the list of features selected.

The UI output is made like this:

let message = response.results.length + " Feature selected here.<br \>"; for(let index = 0; index < response.results.length; ++index){ message += "ID: " + response.results[index].graphic.attributes.feature_id + ":<br \>"; message += "Date: " + response.results[index].graphic.attributes.date_time + "<br \>"; message += '<Button onClick="getDetails(\'' + response.results[index].mapPoint.latitude.toFixed(4) + ', ' + response.results[index].mapPoint.longitude.toFixed(4))" size="default">Load</Button>'; }

All this loads into the UI fine but the scope on the button onClick fails with this message:

Uncaught ReferenceError: getDetails is not defined
at HTMLButtonElement.onclick (0/?draft=true:1:1)
onclick @ 0/?draft=true:1

Sorry but lost as to how I can get scope back on the button click, tried so many approaches and just more confused now.

Re: Access bespoke Widget click events

Grant-S-Carroll — Fri, 24 Nov 2023 17:59:19 GMT

Is this a functional component or a class component?

If its a class component, you could try:

message += '<Button onClick="this.getDetails(\'' + response.results[index].mapPoint.latitude.toFixed(4) + ', ' + response.results[index].mapPoint.longitude.toFixed(4))" size="default">Load</Button>';

Otherwise you can try:

message += '<Button onClick="(e) => getDetails(\'' + response.results[index].mapPoint.latitude.toFixed(4) + ', ' + response.results[index].mapPoint.longitude.toFixed(4))" size="default">Load</Button>';

One of those might work.

Re: Access bespoke Widget click events

diplonics — Fri, 24 Nov 2023 19:46:01 GMT

Its a functional component and the error is gone on button click, so thanks for that bit.

Unfortunately the function getDetails is not executing it seems as I've stripped it down to just output a console.log and no output on click, but no error either.

Will poke about some more to understand.

Re: Access bespoke Widget click events

diplonics — Fri, 24 Nov 2023 20:05:36 GMT

The function being called currently only look like this:

const getDetails = (clickPointLat, clickPointLon) => { console.log("In getDetails"); }

Re: Access bespoke Widget click events

Grant-S-Carroll — Fri, 24 Nov 2023 20:14:28 GMT

The part where you build the button, it looks like it’s the result of a call to a service. Can you show the full code for that please?

Re: Access bespoke Widget click events

diplonics — Sat, 25 Nov 2023 01:14:45 GMT

Below is relevant code, hopefully its enough as I think the logic it defines is whats got me.

Definitely react naive issue as not my standard framework as you'll see by the 'cheating' using jQuery to manage div updates!!!

Happy to rework all if pointers/advice possible so thanks for help so far!!

layer in below code is a geoJsonLayer of polylines added at the start of the code.