topic Re: How to disable a customer widget? in Web AppBuilder Custom Widgets Questions

How to disable a customer widget?

LuyiHan — Fri, 12 Dec 2014 08:47:14 GMT

Hi everyone,

I am very new to web application builder, and I am working on building new customer widgets on web application builder.

I have some questions about it, and hope someone could help me.

1. How to disable a customer widget?

For example. I created a widget, after opening it (maybe startup), it will have the function that every time when I click on the map, it will add a new marker on the map point, and center the extent of the map with that marker (the actual widget has more functions than this).

But when I close the widget, I want everything to go back to the default situation, which means do nothing when clicking or dragging the map.

What should I write on the onClose function? destroy the widget?

2. How to disable the widget window?

I want to have a widget which only has the icon button to open and close the widget, or even to be invisible.

The problem is that every time when the widget starts up, the blank window shows up (because I don't need any html code).

What can I do to hide the window of the widget?

Thank you very much!

Re: How to disable a customer widget?

JeremieCornet1 — Mon, 15 Dec 2014 04:10:42 GMT

Hy Luyi,

1) you need to use dojo.disconnect. But it requires a reference to the handle.

Add this in your widget :

_widgetEvents:[],
addEvent:function(target_object, event_name, slot_function, hitchToThisWidget){
    var evt_id = target_object.id + "__" + event_name;
    if(hitchToThisWidget){
        slot_function = lang.hitch(this, slot_function);
        console.log("->hitched");
    }
    this._widgetEvents[evt_id] = this.own(on(this.map, "mouse-move", slot_function));
},
removeEvents:function(){
    for(var evt_id in this._widgetEvents)
        dojo.disconnect(this._widgetEvents[evt_id]);
    delete(this._widgetEvents);
    this._widgetEvents=[];
},
removeEvent:function(target_object, event_name){
    var evt_id = target_object.id + "__" + event_name;
    dojo.disconnect(this._widgetEvents[evt_id]);
    delete(this._widgetEvents[evt_id]);
},

And then, in onOpen, add events with this.addEvent

this.addEvent(
    this.map,
    'mouse-move',
    function(evt){
        var center = evt.mapPoint;
        this.coordsNode.innerHTML = "X : "+parseInt(center.x).toString()+" ; Y : "+parseInt(center.y).toString();
    },
    true
);

And to remove all events in onClose :

this.removeEvents();

or just one event :

this.removeEvent(this.map; 'mouse-move');

2) I don't think it's possible to have a widget in icons bar (widgetPool) with an icon and without GUI.

You can do a widgetOnScreen (like coordinate widget) and make a simple GUI (just one button with activated/deactivated status) and capture this button changes to activate/deactivate your even

Re: How to disable a customer widget?

LuyiHan — Mon, 15 Dec 2014 10:58:43 GMT

Hi Jeremie,

Thank you so much for your reply.

For the first question, sorry I don't understand it very well. Does this code only for remove the mouse click event I have defined on the widget or it can "kill" all the functions in the widget and set everthing to default.

Dose the first part of the code shoule be put in the widget.js file?

I tried to follow your suggestion, and it seems doesn't work, maybe there is some part of the code I put it in the wrong place.

I checked the introduction of "dojo.disconnect", it is used to disconnect the previous "dojo.connect" listener, and for me it works, so does this means for every changed made by this widget, I must make sure they have a connect listener, and then create a disconnect event to destroy them?

For the second question, I tried to use off panel widget and configure the position of it in the layout of the theme, but it will still open a blank GUI window by itself. Is there some place/code I could define not to show the GUI window or even get the result like you descibed to have one button with activated/deactivated status, which is actually what I need for some widgets.

Thank you very much!

Luyi

Re: How to disable a customer widget?

JeremieCornet1 — Mon, 15 Dec 2014 22:50:39 GMT

Hi,

The code (methods and an attribute to add in the widget) is just fort adding and stopping handlings.

After adding this code, you can call addEvent or removeEvent in any other method of the class like onOpen or onClose.

For the second question, you can watch the code from homeButton widget to see how to do.

It's not exactly what's you want because it use an existing js esri component (HomeButton dijit).