topic Re: Custom Widget Video Tutorial? in Web AppBuilder Custom Widgets Questions

Custom Widget Video Tutorial?

BrianO_keefe — Thu, 16 Oct 2014 19:25:10 GMT

I am wondering if anyone has (or would make) a video tutorial that shows how to create a 'Hello World' widget for WAB (B3).

I have tried to wrap my head around Dojo but can't find any tutorials that walk through their library simply or step-by-step. A video tutorial that covered a simple Hello World Widget tutorial would be perfect... anyone?

Re: Custom Widget Video Tutorial?

MichaelJenkins — Wed, 19 Nov 2014 23:50:55 GMT

Have you watched this one yet?

Customizing and Extending Web AppBuilder for ArcGIS | Esri Video

Re: Custom Widget Video Tutorial?

BrianO_keefe — Thu, 20 Nov 2014 16:24:41 GMT

Watching it right now. Thx!

Re: Custom Widget Video Tutorial?

MichaelJenkins — Thu, 20 Nov 2014 17:27:53 GMT

Great! It helped me gain some basic understanding of the process and it is essentially a "Hello World" example.

Re: Custom Widget Video Tutorial?

BrianO_keefe — Thu, 20 Nov 2014 17:43:14 GMT

Objects.

That video sent me on a spiraling google-express to depression until... Introduction to AMD Modules - The Dojo Toolkit

What is a module?

A module is a value that can be accessed by a single reference. If you have multiple pieces of data or functions that you want to expose in a module, they have to be properties on a single object that represents the module. Practically speaking, it's overkill to create a module for a simple value likevar tinyModule = 'simple value';, but it would be valid. Modules start to make a lot more sense for modularizing your code - splitting it up into logical subsets for handling specific functionality. If you want to represent a person with information like name and address, perhaps even add some methods to your person, it starts to make sense to put all that code in a single location. A module is stored in your file system in a single file.

I'm sure the developers working hard on custom widgets are chuckling at me, but this has eluded me from every tutorial I have watched and read on Dojo. Nobody has clarified this until something clicked just now.

Basically...

define({

library: 'dojo',

version: 1.10

});

The module becomes nothing more than a JS Object with two attributes in this instance. And...

define(function(){

    var privateValue = 0;

    return {

        increment: function(){

            privateValue++;

        },

        decrement: function(){

            privateValue--;

        },

        getValue: function(){

            return privateValue;

        }

    };

});

The module becomes a JS Object with three methods (increment, decrement, getValue) that all manipulate a variable / attribute that is untouchable any other way.

Everything clicked. Now... to the batmobile!

Re: Custom Widget Video Tutorial?

RickeyFight — Mon, 27 Apr 2015 19:10:21 GMT

Here is an updated video for WAB 1.1: Customizing and Extending

Re: Custom Widget Video Tutorial?

TimWitt2 — Mon, 27 Apr 2015 19:17:03 GMT

Brian,

I had issues creating a custom widget for the WAB until I started looking at already existing widgets and deconstructed them. Sadly the WAB helpfile on custom widgets is very thin and without deeper javascript knowledge hard to understand.

I know this doesn't help you in understanding it more, but I just wanted to let you know that you are not alone!

Tim