topic Re: My First Custom Widget (WIP) : Rubber Band Zoom in Web AppBuilder Custom Widgets Questions

My First Custom Widget (WIP) : Rubber Band Zoom

BrianO_keefe — Fri, 14 Nov 2014 20:04:29 GMT

Alrighty...

So I'm wanting to 'tentatively' step into custom widget design. I still have a VERY difficult time grasping the Dojo Modules concept, but what I want to do shouldn't require that. So...

I have created a new widget, I called it (ingeniously enough) "MagnifyingGlass" because that's what the end users want.

I have copied from the WAB Sample Widget the SimpleWidget folder structure for the 'Get Map Id' widget example.
I have renamed everything.
I have added it to the site config file so that it shows up.
It is now visible on one of my dev maps.
It is the button that is a Duplicate of the BOOKMARK widget button, in the bottom left set of 4 buttons.
1. If you hover over it it says 'Zoom'

The problem is what happens when you click it!

It opens a friggin window? Popup...

What I want it to do is simply "this.map.enableRubberBandZoom();" and nothing more.

The whole goal for this widget is to simply add a button that users can click that lets them THEN click and drag to draw a Zoom window.

Apparently, this is functionality that SHOULD be (obviously) on all maps. SO...

In my Widget.js file (remember I copied the Simple Widget example files) I have commented out the templateString, rewrote _getMapID to now be _init simply because I don't know what I'm doing (and I'm not sure where to look).

The whole goal is the Rubber Ban Zoom Box creation after clicking the Widget button. Period.

Anyone got any tips?

ps I'll post this widget in case anyone has a need (once I get it finished and working).

Re: My First Custom Widget (WIP) : Rubber Band Zoom

RobertScheitlin__GISP — Mon, 17 Nov 2014 15:17:05 GMT

Brain,

Having a widget just launch some code and not have a UI is not a common practice (wasn't in Flex either). There is just nothing setup for this OTB. You will have to manually handle things like a UI widget does. Here is your code updated to do this:

The big thing is the inPanel - false part and then handling all the UI dom stuff yourself since you are not wanting a panel.

Here is the json code for you main config.json file (of course you might need to change the left and bottom values):

{

"position": {

"left": 205,

"bottom": 155

"id": "widgets/MagnifyingGlass/Widget_10_13",

"positionRelativeTo": "map",

"name": "Zoom In",

"label": "Zoom In",

"uri": "widgets/MagnifyingGlass/Widget"

Re: My First Custom Widget (WIP) : Rubber Band Zoom

BrianO_keefe — Mon, 17 Nov 2014 15:56:49 GMT

That is gorgeous...

I also think I understand the majority of the code. Altho, I am more confused by the config stuff versus the javascript!

What would be involved if I wanted to make this visible underneath the MyLocation button? It appears that those buttons are scaled/sized differently than the buttons across the bottom?

Also, (trying to learn as much as I can here!) could I just make this a 'generic' button (unconnected to top or bottom widget groups) and allow the user to add it from the WAB so that it sized itself correctly?

Re: My First Custom Widget (WIP) : Rubber Band Zoom

RobertScheitlin__GISP — Mon, 17 Nov 2014 16:41:37 GMT

Brain,

Because this is a UI (on screen) type of widget and it is not part of the WAB widget manifest you are not adding this as you would OTB widget in WAB. you are adding it manually to the main config.json of your app.

Making it appear under your location widget would be as simple as adjusting the position constraints (top or bottom, left or right) in your main config.json. Adjusting the size to match the my location widget would be simply changing the pnode div size in the widget.js code by adding a style attribute.

Re: My First Custom Widget (WIP) : Rubber Band Zoom

RobertScheitlin__GISP — Mon, 17 Nov 2014 16:51:28 GMT

If you want your widget to appear in every app that you produce using WAB then you can add it as a default widget by adding it to the client\builder\predefined-apps\default2DApp\config.json right after the MyLocation widget object

{

"uri": "widgets/MagnifyingGlass/Widget",

"position": {

"left": 7,

"top": 145

}