Can't close custom Web AppBuilder widget programmatically

Question

I am creating a custom widget in ArcGIS Web AppBuilder.

This page shows how you can use the WidgetManager to close a widget programmatically, saving the user from having to click the X button manually.

The difference between the example code given on the above page and the code in my widget is I have a declare portion of my class like so:

define(['dojo/_base/declare', 'jimu/BaseWidget', 'jimu/WidgetManager', 'dojo/dom-style'],
function(declare, BaseWidget, WidgetManager, style) {
    return declare([BaseWidget], {
        ....
    });
});

Within an onClick function in the above, I attempt to call WidgetManager.getInstance.closeWidget(this.id), as recommended by the code sample on the ESRI page. This does not work, and the failure is silent.

I'm a Dojo/Web AppBuilder newbie, but I vaguely understand that declare creates a new instance of a class, whereas the ESRI website seems to be using WidgetManager in a more abstract way. Does this have anything to do with it?

Answer 1

the first thing that I noticed, is the WidgetManager.getInstance is a function, which means you need to call it using

WidgetManager.getInstance()

I haven't worked with the web app builder yet, but from what I can tell, the WidgetManager is a Singleton class (the class is created once and used throughout the application). Calling the getInstance function of the class returns the WidgetManager instance from which you can access its properties and methods documented in the API

As a starting point for debugging, place a

console.log('click');

in the onClick handler. This will ensure that your function is indeed named and placed correctly.

Next try using the console.log function to make sure you have valid properties. Example:

console.log(this.id)

Declare doesn't actually create a new instance of a class, it simply "declares" a new class from which a developer can create new instances using something like

var widget = new YourWidget({
    property: 'value'
}, "widgetNode"); 

In your case, you are declaring a new class that inherits from the BaseWidget class, meaning your class will inherit the functions and properties of the BaseWidget.

Hope this helps.