topic Re: How can I get a custom widget to rerender when fields change in ArcGIS JavaScript Maps SDK Questions

How can I get a custom widget to rerender when fields change

GBreen — Wed, 30 Aug 2023 18:09:33 GMT

I've got a simple widget that toggles a boolean but it stays on false and never rerenders. What am I doing wrong?

import { property } from 'esri/core/accessorSupport/decorators'; import { tsx } from 'esri/widgets/support/widget'; import esriWidget = require('esri/widgets/Widget'); const CSS = { base: 'redline-widget esri-widget--panel esri-widget', button: 'btn btn-white btn-sm btn-primary pull-right', loading: 'esri-icon-loading-indicator esri-rotating' }; class Test extends esriWidget { constructor(config: any) { super(); setInterval(() => { this.processing = !this.processing; }, 5000); } @property() processing: boolean; render() { return ( <div class={CSS.base}> {this.processing ? "True" : "False"} </div> ); } } export = Test;

Re: How can I get a custom widget to rerender when fields change

GBreen — Wed, 30 Aug 2023 18:10:31 GMT

Also in the docs they mention it's not recommended to extend Widget but if I don't it won't render at all except inside an expandable

Re: How can I get a custom widget to rerender when fields change

ReneRubalcava — Wed, 30 Aug 2023 20:10:20 GMT

We no longer recommend you extend the Widget class or build custom widgets with the Widget base.

It's recommended you use your preferred framework to build your components as shown here.

https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-custom-ui

If you however, need to maintain a current widget, you need to use the subclass decorator to make reactivity work as show here.

Re: How can I get a custom widget to rerender when fields change

GBreen — Wed, 30 Aug 2023 20:17:45 GMT

Yeah I'm trying to maintain and upgrade a suite of existing widgets but if I add a subclass to this widget like you suggest I get an error "TypeError: class constructors must be invoked with 'new'" when trying to create the widget:

return new TestWidget();

Any suggestions on that?

Re: How can I get a custom widget to rerender when fields change

ReneRubalcava — Wed, 30 Aug 2023 20:36:46 GMT

It might be your tsconfig settings too. This project works, see if it can help you out.

https://github.com/odoe/jsapi-ts-esm-widget

Re: How can I get a custom widget to rerender when fields change

JoelBennett — Wed, 30 Aug 2023 22:31:06 GMT

This looks like a scope issue. In your anonymous function called by setInterval, "this" will refer to the window, not the instance of the widget. You should be able to get around this using bind:

window.setInterval(function() { this.processing = !this.processing; }.bind(this), 5000);

Re: How can I get a custom widget to rerender when fields change

ReneRubalcava — Wed, 30 Aug 2023 22:51:13 GMT

I just noticed you're using the "esri/" paths, so you must be using the AMD CDN.

In that case, I don't think you can use the 'extends', you need to use createSubclass.

The snippets here provide a dropdown to switch between TS and JS, and you can see what I mean.

https://developers.arcgis.com/javascript/latest/implementing-accessor/

I haven't built custom widgets in this pattern, so not entirely sure, but that might be the way to go.

I did update my ESM widget sample with your code and it does work, so I think it's the createSubclass you need.

https://github.com/odoe/jsapi-ts-esm-widget/blob/main/src/test-widget.tsx