Customizing ArcGIS API for JavaScript widget?

Question

The default ESRI search dijit doesn't have all the functionality I need. Is it possible to get the default search dijit code and extend it and if so are there any guides on doing this? I couldn't find anything on Google.

I see on the ESRI developers website that it is possible to create a custom build of the arcgis javascript library but this seems like overkill, I just want to extend a single widget.

Answer 1

it is possible

read this document

for example : firstly set dojo config

        dojoConfig = {
        parseOnLoad: false,
        packages: [{
            "name": "customWidget",
            "location": "/customWidget"
            }]
        };

/customWidget/customModule.js

define([
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dojo/Evented",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/on",
"dojo/text!/customWidget/templates/customModule.html",
"dojo/dom-class",
"dojo/dom-style"
], function (_WidgetBase,
         _OnDijitClickMixin,
         _TemplatedMixin,
         Evented,
         declare,
         lang,
         on,
         dijitTemplate,
         domClass,
         domStyle) { 
  return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin,   Evented], {
    declaredClass: "customWidget.customModule",
    templateString: dijitTemplate,
    options: {
        map: null

    },
    constructor: function (options) {
        declare.safeMixin(this.options, options);
        this.set("map", this.options.map);



    },
    startup: function () {
       console.log('start widget');
    }
    ,
    destroy: function () {
        this.inherited(arguments);
    }
    ,
    update: function () {

    },
    save: function(){
        alert('alert');
    }
});
});

/customWidget/templates/customModule.html

<div>
<button class="btn btn-primary pull-right" data-dojo-attach-event="onclick:addPoint"></button>
</div>

/index.hmtl

.....
require(["esri/map",
    "customWidget/customModule",
    ....
    "dojo/domReady!"
   ], function (Map,
         customModule,
         ....) {
         ....
         myCustomModule = new customModule({map:map},"divname");
         myCustomModule.startup();