My widget requires MapView and it needs use through out the application. However, I am not able to get it. The problem is activeViewChangeHandler is not executed at all. I followed this documentation.

Below is my code:

import './my-component';

import {AllWidgetProps, jsx, React} from "jimu-core";
import {JimuMapViewComponent, JimuMapView} from "jimu-arcgis";
import {Service} from "./service";

const {useRef} = React;

export default function Widget(props: AllWidgetProps<{}>) {
    const widgetRef = useRef<HTMLDivElement>();

    const activeViewChangeHandler = (jmv: JimuMapView) => {

        if (jmv) {
            if (widgetRef.current) {
                // since the widget replaces the container, we must create a new DOM node
                // so when we destroy we will not remove the "ref" DOM node
                const container = document.createElement("div");


                // Save reference to the "Current widget" in State so we can destroy later if necessary.

            } else {
                console.error('could not find widgetRef.current');

    return (
            className="widget-js-api-widget-wrapper jimu-widget"
            style={{overflow: "auto"}}>
            <div ref={widgetRef}></div>

Experience Builder v1.11

1 Answer 1


The issue was caused by another service import {Layout, Service} from "./service"; methods and properties being used in the template. So I had to replace all of them with local properties. So in short, you couldn't use an external class properties and method in the the widget template. Clearing them fixed the error and onActiveViewChange started getting triggered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.