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

GBreen

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;

 

 

 

RRubalcava

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