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();

• Dowlers: @emredelioglu Thanks for you response. When I look at your code and the linked text I can see how to create my own custom widget. I'm afraid I'm still not seeing where I can inherit from and extend an existing widget.
• emredelioglu: @Dowlers , it is search widget code you use your custom widget. this is esri js api full source code you find another widget.